Google Map Integration Using AngularJS

In this blog , i will show you how to integrate google maps in angularjs

application without using angular map plugins.

1) Add Google API key as shown below:

<script src="https://maps.googleapis.com/maps/api/js?

libraries=places&key=APIKEY"></script>


2)HTML code for multiple maps in accordions:

<div class="container-fluid" style="margin-top: 80px;" ng-

controller="routemapController" ng-init="mapl()" >
  
<div class="panel-group" id="accordion"  >
   
 <div class="panel panel-info" align="center" ng-repeat="x in maploc">
      
<div class="panel-heading">
        
<div class="panel-title" >
        
  <div class="row">
            
<div class="col-md-3  col-sm-3">
            
  <p>Store Name: {{x.StoreName}}</p>// bind names from the servlet response 
           
 </div>
           
 <div class="col-md-3  col-sm-3" >
          
    <div ng-show="$parent.selectedIndex == $index">
          
    Distance:<span id="distance{{$index}}"></span>
           
     </div>
           
 </div>
           
 <div class="col-md-3  col-sm-3" >
          
    <div ng-show="$parent.selectedIndex == $index">
           
   Duration: <span id="duration{{$index}}"></span>
            
  </div>
           
 </div>
          
  <div class="col-md-3 col-xs-3 col-sm-3">
           
   <a href="#" data-target="#collapse_{{$index}}" data-toggle="collapse" 

data-parent="#accordion" ng-click="init2(maploc); 

$parent.selectedIndex=$index"> <i class="fa fa-map-marker fa-2x " aria-

hidden="true" data-toggle="tooltip" title="Show on Map" ></i></a>
           
 </div>
        
  </div>
      
  </div>
      
</div>
    
  <div id="collapse_{{$index}}" class="panel-collapse collapse" >
          
<div class="map-canvas" id="map-canvas{{$index}}"></div>
      
</div>
   
 </div>

</div>

</div>

3) Controller.js code to displaying maps dynamically by retrieving data

from DB using servlet response:

My_App.controller('routemapController', function($scope,$timeout,$http,

$localStorage) {

  var directionsDisplay = [];
  
var directionsService = [];
 
 var map = [];
 
 var coordinates;
 
 var distance=[];
  
var duration=[];

$scope.arrayOfObjects =[];
 
 var Latitude=$scope.Latitude;
  
var Longitude=$scope.Longitude;
  
$scope.mapl=function()

  {
  
  $localStorage.Latitude=x;   \\ Using angular local Storage we will store latitude and longitude of the response 

we get from the servlet response and display the same in the map 
    
 $localStorage.Longitude=y;\\ x,y=latitude and longitude values
    
$scope.Latitude = $localStorage.Latitude;
   
 $scope.Longitude= $localStorage.Longitude;
   
 $http.get("http://172.16.40.169:8990/Mouri_App/Search_sto

re1?Latitude=" +$scope.Latitude + "&Longitude="+ $scope.Longitude).

success(function(response) //servlet response url
   
 {
    
  $scope.maploc = response; // for displaying multiple accordions depending 

on the response we receive from DB 

    });
 
 };
 
$scope.init1=function(response){
  
 $scope.arrayOfObjects=angular.copy(response);// to copy the response in

 JSON format 
   
for (var i = 0; i <$scope.arrayOfObjects.length; i++){
     
 directionsService[i] = new google.maps.DirectionsService();
    
  directionsDisplay[i] = new google.maps.DirectionsRenderer();
     
var latitude =$scope.arrayOfObjects[i].Latitude;
    
 var longitude =$scope.arrayOfObjects[i].Longitude;
      
coordinates = new google.maps.LatLng(latitude, longitude);
     
 var mapOptions = {
        zoom: 15,
        center: coordinates
      };
    
  var numString = i.toString();
  
    var thisMapID = "map-canvas"+ numString ;
  
    map[i] = new google.maps.Map(document.getElementById(thisMapID),

 mapOptions);
     
 directionsDisplay[i].setMap(map[i]);
     
 $scope.calcRoute(i);
   
 }
 
  };
  

$scope.calcRoute=function(index){  // for getting the route map
   
 $scope.Latitude = $localStorage.Latitude;

    $scope.Longitude= $localStorage.Longitude;
    
var startingLocation = new google.maps.LatLng($scope.Latitude, 

$scope.Longitude);  
    
var request = {
      
origin: startingLocation,
      
destination: map[index].getCenter(),
      
travelMode: google.maps.TravelMode.DRIVING
   
 };
    
directionsService[index].route(request, function(response, status){
    
  if(status === google.maps.DirectionsStatus.OK){
       
//Display the directions:
       
 directionsDisplay[index].setDirections(response);
         
//Display the distance:
       
 document.getElementById('distance'+index).innerHTML = "";
       
 document.getElementById('distance'+index).innerHTML += 

response.routes[0].legs[0].distance.text ;
      
  // Display the duration:
    
    document.getElementById('duration'+index).innerHTML = "";
      
  document.getElementById('duration'+index).innerHTML += 

response.routes[0].legs[0].duration.text ;
   
   }
  
  });

  };

});

4)But using the above code there will be a delay in loding the map so you will have to add the below timeout functionality in controller.js to reduce the delay, and call the init1 method in this function for loading the map without delay.

$scope.init2= function(response){
 
 $scope.response = response;
  
$timeout(function () {     //timeout function for preventing delay in displaying 

the maps
   
 // in my case
   
 $scope.init1($scope.response);
 
   // OR this case:
  
  google.maps.event.trigger(map, 'resize');

  }, 1000);

};


5)Below are the screen shots for displaying mutliple maps:

i) Click on the map icon to display the map, distance and duration can only 
be shown when you are loading the map using show hide functionality

ii) Below is the map displayed for a particular location that we have got from 

DB along with the distance and location 

By implementing the above process you can achieve multiple google maps in 

accordions.

Thanks,

Lakshmi Alekhya Vaddi

Mouritech Pvt Ltd.



www.mouritech.com