Recent Tutorials and Articles
    Implementing Google Maps in AngularJS
    Published on: 2018-05-25 16:05:45
    Posted By: Sumit Sain

    This tutorial demonstrates how to implement Google Maps using AngularJs.

    We will be creating following three files in order to demonstrate the implementation of Google Maps in AngularJs -

    1. google-maps.html file for creating a Google Map.
    2. maps.css file for adding basic style to our Google Map.
    3. maps.js file containing AngularJs controller for our Google Map.

    This is how our project structure looks like -

    google-maps.html

    Here is how our HTML file google-maps.html looks like -

    google-maps.html
    <!DOCTYPE html>
    <html ng-app="mapsApp">
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/maps.css">
    <script
      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script
      src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
      <script type="text/javascript" src="js/maps.js"></script>
    </head>
    <body>
    <div ng-controller="MapCtrl">
        <div id="map"></div>
        <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
             <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
             <label id="names" >{{marker.title}}</label></a>
        </div>
    </div>
    </body>
    </html>
    
    

    Let's discuss some of AngularJs specific parts in the above HTML file. Specifically, here are the attributes that need attention -

    1. First we will add Google Maps library in script tag - <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
    2. Now we create a div element named "map" to hold the Map.
    3. orderBy - Orders a given (markers)array by the (title)expression predicate. It is ordered alphabetically for titles.
    4. ng-repeat - The ng-repeat directive instantiates a template once per item from a collection. Each template instance gets its own scope,
      where the given loop variable is set to the current collection item, and $index is set to the item index or key.
    5. ng-click - The ng-click directive allows you to specify custom behavior when an element is clicked.
    maps.css

    Next file to talk about is a css file that we have added to give our links and map a fine look. This is a simple CSS file without any angular or fancy stuff in it.

    maps.css
    body {
        font: bold 12px Arial;
         }
    a {
        text-decoration: none;
      }
    #map{
        height:500px; 
        width:500px; 
        box-shadow: 3px 3px 10px gray;
        }
    #repeat{ 
         display: inline;
         }
    #country_container { 
         width: 1000px; 
         margin: 13px 3px 3px 0px; 
         text-align: center; 
         width: 85px; 
         padding: 4px; 
         display: inline-table;  
         color: white; 
         background-color: black; 
         font-size: 12px; 
         cursor: pointer;
         border: 1px solid black; 
         border-radius:13px; 
         }
    #country_container:hover { 
         box-shadow: 0px 0px 10px black;
         background-color: gray; 
         border: 1px solid gray; 
         cursor: pointer; 
         }
    #names { 
         cursor: pointer; 
           }
    
    
    maps.js

    Finally, here is the javascript file containing the controller for our Google Map -

    maps.js
    //Data
    var cities = [
                  {
                      city : 'India',
                      desc : 'This is the best country in the world!',
                      lat : 23.200000,
                      long : 79.225487
                  },
                  {
                      city : 'New Delhi',
                      desc : 'The Heart of India!',
                      lat : 28.500000,
                      long : 77.250000
                  },
                  {
                      city : 'Mumbai',
                      desc : 'Bollywood city!',
                      lat : 19.000000,
                      long : 72.90000
                  },
                  {
                      city : 'Kolkata',
                      desc : 'Howrah Bridge!',
                      lat : 22.500000,
                      long : 88.400000
                  },
                  {
                      city : 'Chennai  ',
                      desc : 'Kathipara Bridge!',
                      lat : 13.000000,
                      long : 80.250000
                  }
              ];
    
              //Angular App Module and Controller
              var sampleApp = angular.module('mapsApp', []);
              sampleApp.controller('MapCtrl', function ($scope) {
    
                  var mapOptions = {
                      zoom: 4,
                      center: new google.maps.LatLng(25,80),
                      mapTypeId: google.maps.MapTypeId.TERRAIN
                  }
    
                  $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
                  $scope.markers = [];
                  
                  var infoWindow = new google.maps.InfoWindow();
                  
                  var createMarker = function (info){
                      
                      var marker = new google.maps.Marker({
                          map: $scope.map,
                          position: new google.maps.LatLng(info.lat, info.long),
                          title: info.city
                      });
                      marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
                      
                      google.maps.event.addListener(marker, 'click', function(){
                          infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                          infoWindow.open($scope.map, marker);
                      });
                      
                      $scope.markers.push(marker);
                      
                  }  
                  
                  for (i = 0; i < cities.length; i++){
                      createMarker(cities[i]);
                  }
    
                  $scope.openInfoWindow = function(e, selectedMarker){
                      e.preventDefault();
                      google.maps.event.trigger(selectedMarker, 'click');
                  }
    
              });
    
    

    In the above javascript file, there are a few things to note:

    1. We create a JavaScript object literal named "mapOptions" to hold a number of map properties.
    2. We create a JavaScript "map" object, passing it the div element and the map properties.
    3. Now we create a javascript object literal named "marker" in the function named "createMarker" to hold a number of marker properties
      and by the help of loop we will mark the position of cities in the map one by one.
    Webpage Output in Browser

    This is how the HTML code above will be displayed in a browser with Google Map and links.

    Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.

    Posted By: Sumit Sain
    Published on: 2018-05-25 16:05:45

    Comment Form is loading comments...