Ionic Development – Part 2: Integrating Google Maps

Before we dive immediately to the code, I just want to point a subtle difference in the example code that Ionic has here. I am using ng-init to call the initialize method rather than having it in the controller. I also declared the initialize function in the scope. This is because the example in codepen runs fine in your browser but doesn’t work when you deploy it on your phone.

In your routes (typically in app.js of your Ionic project), add a route for your map.

.state('tab.map', {
  url: '/map',
  views: {
    'tab-map': {
      templateUrl: 'templates/tab-map.html',
      controller: 'MapController'
    }
  }
})

In your tab-map.html, have the following code

<ion-view title="Map Overview">
  <ion-content ng-controller="MapController" ng-init="initialize()">
    <div id="map" data-tap-disabled="true"></div>
  </ion-content>
</ion-view>

Create your controller

.controller('MapController', function($scope, $ionicLoading, $compile) {
  $scope.initialize = 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);


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

  
})

And finally, add the Google javascript to your index.html

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>