AngularJS From Beginning: Google Map API With AngularJS - Part 17

I am here to continue the discussion around AngularJS. Today, we will discuss how to utilize google map api with angular js. Also in case you have not had a look at our previous articles of this series, go through the following links:

• Learn AngularJS From Beginning: Basic - Part One
• Learn AngularJS From Beginning: Filter - Part Two
• Learn AngularJS From Beginning: Service - Part Three
• Learn AngularJS From Beginning: Directive - Part Four
• Learn AngularJS From Beginning: Form Data Binding - Part Five
• Learn AngularJS From Beginning: Global Object Service - Part Six
• Learn AngularJS From Beginning: Http Request or Ajax - Part Seven
• Learn AngularJS From Beginning: Rest API - Part Eight
• Learn AngularJS From Beginning: Route Url - Part Nine
• Learn AngularJS From Beginning: Animation - Part Ten
• Learn AngularJS From Beginning: Injection - Part Eleven
• Learn AngularJS From Beginning: Localisation - Part Twelve
• Learn AngularJS From Beginning: Unit Test of AngularJS Controller - Part Thirteen
• Learn AngularJS From Beginning: Unit Test of AngularJS Component - Part Fourteen
• Learn AngularJS From Beginning: Automatic Workflow (Grunt) - Part Fifteen
• Learn AngularJS From Beginning: Lazy Loading of Angular Files - Part Sixteen

In this article, we will discuss how use AngularJS with google map API.

On today’s Web, mapping solutions are a natural ingredient. We use them to see the location of things, to search for the position of an address, to get driving directions, and to do numerous other things. Most information has a location, and if something has a location, it can be displayed on a map. There are several mapping solutions including Yahoo! Maps and Bing Maps, but the most popular one is Google Maps. In fact, according to Programmableweb.com, it’s the most popular API on the Internet. According to the site’s May 2010 statistics, 43 percent of all mashups use the Google Maps API (www.programmableweb.com/apis). In comparison, the second most popular API was Flickr with 11 percent, and the second most popular mapping API was VirtualEarth (Bing Maps) with 3 percent. Applications and web sites that are combining data or functionality from two or more sources are commonly referred to as mashups. Mashups are becoming increasingly popular and have revolutionized the way information is being used and visualized. Mapping solutions are one important ingredient in a lot of these mashups. The Google Maps API lets you harness the power of Google Maps to use in your own applications to display your own (or others’) data in an efficient and usable manner.

A Brief History

Google Maps was introduced in a blog post on Google in February 2005. It revolutionized the way maps on web pages work by letting the user drag the map to navigate it. This was new at the time. The map solutions used then were expensive and required special map servers, yet they didn’t deliver the same level of interactivity. Google Maps was originally developed by two Danish brothers, Lars and Jens Rasmussen. They cofounded Where 2 Technologies, a company dedicated to creating mapping solutions. The company was acquired by Google in October 2004, and the two brothers then created Google Maps. (They are also the men behind Google Wave.) Before there was a public API, some developers figured out how to hack Google Maps to incorporate maps on their own web sites. This led Google to the conclusion that there was a need for a public API, and in June 2005 it was publically released. The first mashup on the Internet is often considered to be Housingmaps.com, a combination of Google Maps with realty listings from Craiglist.org plotted on it. It was in fact created before the public API was released and was hacked together by developer Paul Rademacher. At the time, this was pretty revolutionary and started a new era of mashing information from different sources. During the Google I/O conference in May 2009, version 3 of the API, which this book is about, was announced. And in May 2010 (incidentally also during the Google I/O conference and during the making of this book), it was announced as graduated from beta. It’s now the recommended choice for new Google Maps applications and the next step in the history of Google Maps.

How It Works

When seeing the dynamic nature of Google Maps, you might think there is something magical going on under the hood. But there’s really nothing magical about it. It’s just HTML, CSS, and JavaScript working together. The map tiles are images that are loaded in the background with Ajax calls and then inserted into a <div> in the HTML age. As you navigate the map, the API sends information about the new coordinates and zoom levels of the map in Ajax calls that return new images. And that’s it! No magic involved whatsoever. The API itself basically consists of JavaScript files that contain classes with methods and properties that you can use to tell the map how to behave.

A New API

The new API is a complete remake. It not only features a brand new is also completely rewritten under the hood. Why did the Google Maps team take such a drastic measure?

Slimmed-Down Feature Set

Back when the Google Maps API was first API but built, other JavaScript libraries such as Prototype, MooTools, and jQuery weren’t available. That’s the reason the Maps API contains methods for making Ajax calls and other things that we now rely on other third-party libraries to do for us. Nowadays, we also rely on debugging tools such as the Firefox extension Firebug and the built-in tools in IE8 and Chrome/Safari for debugging our code. These haven’t been available that long either, so the old Maps API contains classes for writing debugging information in a console window. Apart from that, the old API was originally created for serving Google’s own mapping solution found at www.google.com/maps. This service contains a lot of features that most mappers don’t need, making the API even more bloated. Since 2005, an explosion in mobile use of web content has occurred. The old API wasn’t intended to be used on these devices and is therefore slower than necessary. Attempts to make the old API faster on these devices have been made, but because of its architecture, developers have been limited in what they’ve been able to accomplish. For this reason, Google decided to build the new API from scratch.

For demonstrating google map api, I created an angular js custom directive for google map and then used that directly in a page.

 

App.js

var testApp = angular.module('TestApp', []);

GoogleMap directive

testApp.directive('googleMap', function (googleMapApi) {
    return {
        restrict: 'EA',
        scope: {
            param: '='
        },
        template: '<div id="googlemaps" data-ng-style={"border":"solid","border-color":"red","width":param.width,"height":param.height}>' +
                  '</div>',
        replace: true,
        controller: function ($scope, $element, $attrs, googleMapApi) {

            var method = function () {
                var initAttribute = function () {
                    if (!angular.isDefined($scope.param)) {
                        $scope.param = {};
                    }

                    if (!angular.isDefined($scope.param.height)) {
                        $scope.param.height = '100%';
                    }

                    if (!angular.isDefined($scope.param.width)) {
                        $scope.param.width = '100%';
                    }
                    if (!angular.isDefined($scope.param.autoZoom)) {
                        $scope.param.autoZoom = true;
                    }
                    if (!angular.isDefined($scope.param.allowMultipleMark)) {
                        $scope.param.allowMultipleMark = true;
                    }
                    googleMapApi.then(mapConfig);
                }

                var assignMethod = function () {
                    $scope.param.method = {
                        setMark: function (latitude, longitude, title, desc) {
                            setMapMarker($scope.map, new google.maps.LatLng(latitude, longitude), title, desc)
                        }
                    }
                }

                var mapConfig = function () {
                    $scope.infoWindow = '';
                    $scope.markers = [];

                    $scope.mapOptions = {
                        center: new google.maps.LatLng(50, 2),
                        zoom: 4,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        scrollwheel: $scope.param.autoZoom
                    };
                    method.initMap();

                }

                var initMap = function () {
                    if ($scope.map === void 0) {
                        $scope.map = new google.maps.Map($element[0], $scope.mapOptions);
                    }
                }

                var setMapMarker = function (map, position, title, content) {
                    var marker;
                    var markerOptions = {
                        position: position,
                        map: map,
                        title: title,
                        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
                    };

                    marker = new google.maps.Marker(markerOptions);
                    if ($scope.param.allowMultipleMark)
                        $scope.markers.push(marker);
                    else
                        $scope.markers = marker;

                    google.maps.event.addListener(marker, 'click', function () {
                        // close window if not undefined
                        if (infoWindow !== void 0) {
                            infoWindow.close();
                        }
                        // create new window
                        var infoWindowOptions = {
                            content: content
                        };
                        infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                        infoWindow.open($scope.map, marker);
                    });
                }

                return {
                    initAttribute: initAttribute,
                    mapConfig: mapConfig,
                    initMap: initMap,
                    assignMethod: assignMethod
                }
            }();

            var init = function () {
                method.initAttribute();
                method.assignMethod();
            }();
        }
    };
});

Google map api service

testApp.service('googleMapApi', function googleMapApi($window, $q) {

    function loadScript() {
        console.log('loadScript')
        // use global document since Angular's $document is weak
        var s = document.createElement('script')
        s.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap'
        document.body.appendChild(s);
    }

    var deferred = $q.defer()

    $window.initMap = function () {
        deferred.resolve()
    }

    if ($window.attachEvent) {
        $window.attachEvent('onload', loadScript)
    } else {
        $window.addEventListener('load', loadScript, false)
    }

    return deferred.promise
});

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="TestApp">
<head>
    <title>Google Map</title>
    <link href="map.css" rel="stylesheet" />
    <script src="../../RefScript/jquery-2.1.1.js"></script>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <script src="mapController.js"></script>
</head>
<body data-ng-controller="mapController">
    <h2>Google Map</h2>
    <google-map param="googleMapArgs"></google-map>
    <input type="button" value="Mark in Map" data-ng-click="fnClick();" />
    <br />
    Search Address : <input type="text" data-ng-model="address" data-ng-style="{'width':googleMapArgs.width}" ng-model-options="{debounce:1000}" ng-change="fnSearchAddress();" />
    <br />
    <div class="tt-suggestion" style="white-space: nowrap; cursor: pointer;"
         data-ng-repeat="item in mapData | limitTo :10" data-ng-click="selectItem($index,item)">
        <p style="white-space: normal;">{{item.formatted_address}}</p>
    </div>

</body>
</html>

MapController.js

testApp.controller('mapController', function ($scope, $http) {
    $scope.googleMapArgs = {
        width: '50%',
        height: '50%',
        allowMultipleMark:false
    }

    $scope.fnClick = function () {
        $scope.googleMapArgs.method.setMark(51.508515, -0.125487, 'London', 'Just some content');
    }

    $scope.fnSearchAddress = function () {
        $http.get('http://maps.google.com/maps/api/geocode/json?address=' + $scope.address + '&sensor=false')
            .success(function (mapData) {
                $scope.mapData = mapData.results;
            });
    }

    $scope.selectItem = function (index, item) {
        $scope.googleMapArgs.method.setMark(item.geometry.location.lat, item.geometry.location.lng, item.formatted_address, item.formatted_address);
    }
});

The output of the above code is as below,