Integrating Google Maps in Ionic Framework

Ionic Framework is a great framework for building mobile apps using familiar web technologies.  To add Google Maps to your app, you could use an angular plug-in. However, for a simple implementation, it’s easy to simply integrate Google Maps with your app using Google Maps Javascript API v3.

In this example, I will show you how to build a basic map modal that will display the location of a contact from a list.

  1. Include a link to the Google Maps API in your Index.html
    <script src="http://maps.google.com/maps/api/js?key=[Your API Key]"></script>
  2. In the controller, set up a method to build the map.
    showOnMap = function (mapDivName, lat, lng, name) {
                if (lat && lat != '' && lng && lng != '') {
                    var latLng = new google.maps.LatLng(lat, lng); 
                    var mapOptions = {
                        center: latLng,
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var mapDiv = document.getElementById(mapDivName);
                    $scope.map = new google.maps.Map(mapDiv, mapOptions);
                    google.maps.event.addListenerOnce($scope.map, 'idle', function () {
                        var marker = new google.maps.Marker({
                            map: $scope.map,
                            animation: google.maps.Animation.DROP,
                            position: latLng,
                            title: name
                        });
                        var infoWindow = new google.maps.InfoWindow({
                            content: name
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infoWindow.open($scope.map, marker);
                        });
                    });
                }
            }

    In this method, we’re passing the latitude and longitude of a point, along with the name of the point (to show on the marker), and the name of the div that will hold the map.  naming the div is important if you may place the map in different divs depending on circumstance.
     

  3. Create a template for the modal (templates/modal/map-modal.html).
    <ion-modal-view class="modal-90"><ion-content><div id="map2" data-tap-disabled="true"></div></ion-content></ion-modal-view>
  4. In your Controller, wire up the $ionicModal service to open your modal.
    It is important to call the showOnMap function after the map div is available. We’ll use setTimeout to call showOnMap after a delay to allow the DOM to populate.

    $ionicModal.fromTemplateUrl('templates/modal/map-modal.html', {
                scope: $scope, animation: 'slide-in-up'
            }).then(function (modal) {
                $scope.MapModal = modal;
            });
            $scope.openMapModal = function (id) {
                var proj = $scope.Locations.filter(function (l) { return l.Id == id })[0];
                $scope.MapModal.show();
                if (ConnectivityMonitor.isOnline()) {
                    setTimeout(function () { showOnMap('map2', proj.Latitude, proj.Longitude, proj.Location.Name); }, 500)
                }
            };
  5. Now, in the view, wire up a button to display the map.
    <ion-item class='contact-item border-blue'>
    <div>
    	<div class='BGgrey topRight'><button class='icon ion-edit padEditButton no-border' ng-click="edit(contact.Id)"></button></div>
    	<div class='row'><div class='col'><span class='contact-text boldText'>{{project.Name}}</span></div></div>
    	<div class='row' ng-if="contact.location.hasAddress">
    		<div class='col-5 centerText'><i class='icon ion-ios-location Blue' ng-click='openMapModal(contact.location.Id)'></i></div>
    		<div class='col-95'>
                    <div class='row'><div class='col-90 col-offset-10'><span class='contact-heading'>Address</span></div></div>
                    <div class='row'><div class='col-90 col-offset-10'><span class='contact-text'>{{contact.location.Address}}</span></div></div>
                    <div class='row'><div class='col-90 col-offset-10'><span class='contact-text'>{{contact.location.City}}, {{contact.location.State}}  {{contact.location.Zip}} </span></div></div>
    		</div>
    	</div>
    </div>
    </ion-item>

 

Putting it all together, click on the location icon, and the modal will show the map, with a marker for your location.

contacts

map-modal

 

One thought on “Integrating Google Maps in Ionic Framework

Leave a Reply

Your email address will not be published. Required fields are marked *