Menu
Im trying to implement a map using google maps with Ionic. I followed the coding in this Link But all i get is a blank screen dont know where i went wrong. Please help
This is the controller
angular.module('starter', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
This is the html file
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
<h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</body>
please help.
690
In order to use the Google Maps SDK, you'll need to create a Google Cloud account and create your project. Within your project, you should enable the Android, iOS, and JavaScript Maps SDKs. Once you've enabled the SDKs, you can create an API Key to include in your project.
Whether a static or interactive map, mobile or browser-based, with the Google Maps Platform you can integrate customizable maps into shops, websites, apps, and business software.
I changed a few things to get this to work:
You don't need an api key for google maps anymore, this is enough for the script src (see Whats the Google Maps API Key):
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
Replace "function initialize()" with "$scope.init()" and comment out the line where it sais:
//google.maps.event.addDomListener(window, 'load', initialize);
Also add ng-init="init()" to your html like this:
<ion-header-bar class="bar-dark" ng-init="init()">
<h1 class="title">Map</h1>
</ion-header-bar>
I don't know why it's not working with the domListener, but the data need to be initialized before displaying them (see Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null). With ng-init you can achieve this.
Final controller should look like this:
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
};
// google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
Hope this helped!
110
or just replace this
google.maps.event.addDomListener(window, 'load', initialize);
for this
ionic.Platform.ready(initialize);
reference http://codepen.io/mircobabini/developer/ionic-google-maps-nightly
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
