Geek Answers Handbook

Google maps with ion

I am trying to implement a map using google maps with Ionic. I followed the encoding in this link But all I get is a blank screen, I don’t know where I made a mistake. 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 an 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.

+8
google-maps cordova
source share
6 answers

I changed a few things to make this work:

You no longer need the api key for Google maps, this is enough for the script src (see What is 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 is:

 //google.maps.event.addDomListener(window, 'load', initialize);

Also add ng-init = "init ()" to your html as follows:

 <ion-header-bar class="bar-dark" ng-init="init()"> <h1 class="title">Map</h1> </ion-header-bar>

I do not know why it does not work with domListener, but the data must be initialized before displaying it (see Google MAP API Uncaught TypeError: it is impossible to read the 'offsetWidth' property from zero ). With ng-init you can achieve this.

The 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 helps!

+24
source share

or just replace it

 google.maps.event.addDomListener(window, 'load', initialize);

for this

 ionic.Platform.ready(initialize);

link http://codepen.io/mircobabini/developer/ionic-google-maps-nightly

+13
source share

If you are using the latest version of Ionic, most likely you will use a blank screen when deploying for Android, but you will see a map when you launch the solution in a web browser. To solve, you need to add a whitelist plugin , run: ionic plugin add cordova-plugin-whitelist .

+2
source share

Check out this project on github

http://angular-ui.imtqy.com/angular-google-maps/#!/

It uses Angular.js directives to provide APIs for a large part of the functions of Google Maps.

0
source share

You can use angularjs-google-maps (ngmap) plugins made for angularjs. It works for ionic. This gives you the option to use google v3 map.

https://github.com/allenhwkim/angularjs-google-maps

0
source share

I solved this by setting a to:

 <ion-content ng-controller="MapCtrl"> <div id="map" data-tap-disabled="true"></div> </ion-content>

and then you will need:

 .controller('MapCtrl', function($scope, $ionicLoading) { google.maps.event.addDomListener(window, 'load', function() { var newLatlng = new google.maps.LatLng(53.5000, -113.4300); var mapOptions = { center: newLatlng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); navigator.geolocation.getCurrentPosition(function(pos) { map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); var myLocation = new google.maps.Marker({ position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), map: map, title: "My Location" }); }); $scope.map = map; }); });

Link from: Implementing Google Maps using the Ionic Framework

0
source share

More articles:


All Articles