google maps with ionic

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.

How do I use Google Maps in ionic?

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.

Can you integrate with Google Maps?

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!

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

google maps with ionic

Tags:

google-maps

cordova

Lahiru Tjay

People also ask

2 Answers

novas1r1

user4470281

Recent Activity

Donate For Us

google maps with ionic

Tags:

google-maps

cordova

Lahiru Tjay

People also ask

2 Answers

novas1r1

user4470281

Related questions

Recent Activity

Donate For Us