google maps with ionic

Question

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.

score 25 · Accepted Answer · edited May 23 '17 at 12:24

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!

hello i done in browser but in mobile map is not loaded any idea? — KAUSHAL J. SATHWARA, Feb 02 '16 at 13:00
@error1337 when i open it in the page it shows up but when i open it in modal it does not ..can you help? — Anurag, Jun 01 '16 at 10:40
I can try, but then I have to see your code :)! Please create a fiddle or plunkr and I'll have a look — novas1r1, Jun 01 '16 at 13:21

score 13 · Answer 2 · answered Feb 03 '15 at 09:44

13

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

answered Feb 03 '15 at 09:44

user4470281

131
1
2

score 2 · Answer 3 · answered Jun 20 '15 at 12:59

2

If you are using the latest version of Ionic, chances are you will experience a blank screen when you deploy for android but you will see the map when u run the solution in a web browser. To resolve you need to add a whitelist plugin, run: ionic plugin add cordova-plugin-whitelist.

answered Jun 20 '15 at 12:59

code-assassin

415
4
14

Hey David, I tried this but when viewing the app with Ionic View it is still showing blank (not even the menu is showing). Any other ideas? – danboh Jul 12 '15 at 17:04
Can you share on plunker? – code-assassin Jul 12 '15 at 18:12
This is something similar to what I'm using http://codepen.io/ionic/details/uzngt/ – danboh Jul 13 '15 at 02:10

score 0 · Answer 4 · answered Aug 03 '15 at 15:45

0

Check out this project on github

http://angular-ui.github.io/angular-google-maps/#!/

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

answered Aug 03 '15 at 15:45

Clocker

1,316
2
19
29

score 0 · Answer 5 · answered Feb 09 '16 at 09:02

0

You can use the plugin angularjs-google-maps (ngmap) done for angularjs. It works for ionic. It gives you the ability to use google map v3.

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

answered Feb 09 '16 at 09:02

Fabien Thetis

1,666
15
11

score 0 · Answer 6 · answered May 18 '16 at 18:58

I solved this by setting a in :

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

and then you will have to do:

.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;
    });

});

Reference from: Implement Google Maps Using Ionic Framework

google maps with ionic

6 Answers6

Linked