Google Maps API - SPLessons

Chapter 14

Google Maps Services

Google Maps Services

The chapter below demonstrates about some of Google Maps services and following are the concepts covered.

  • Direction services.
  • Dragging Directions.
  • Maximum Zooming Imagery

Direction services

Google maps API provide direction services by which the user can get the direction for different locations or places.

The object DirectionsService, calculate the directions in Google Maps API and user can use the object DirectionRenderer for rendering the result or can handle the direction by self.

A multi-path directions can be returned using series of waypoints in Google Maps Services for directions. A polyline is used to display the directions on a map and in addition to it textual description can be added with <div> element. [Ex: ‘Turn left from Cambridge University’].

The Google Maps API provide access for direction services by calling the external server. So a call back method is used to execute the user request which process the result(s).

Following are the parameters for DirectionRequest object used in direction services.

Travel Modes

The Travel mode allow the user to select the mode of transport and calculate the directions for different transportation. Following are the travel modes supported by the Google Maps API.

The example below demonstrate the simple code for calculating the directions between two places or locations. A polyline is used to display the distance between two locations and markers are placed at the origin and destination. A dropdown box is created to select the starting and ending points.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="Hitech city, hyd">Hitech city</option>
      <option value="Shamshabad, hyd">Shamshabad</option>
      <option value="Secunderabad, hyd">Secunderabad</option>
      <option value="Charminar, hyd">Charminar</option>
      <option value="Nampally, hyd">Nampally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Khairatabad, hyd">Khairatabad</option>
      <option value="Begum Bazar, hyd">Begum Bazar</option>
      <option value="Sultan Bazar, hyd">Sultan Bazar</option>
      <option value="Afzal Gunj, hyd">Afzal Gunj</option>
      <option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
      <option value="Hyderguda, hyd">Hyderguda</option>
      <option value="Somajiguda, hyd">Somajiguda</option>
      <option value="Malakpet, hyd">Malakpet</option>
      <option value="Saidabad, hyd">Saidabad</option>
      <option value="Saroornagar, hyd">Saroornagar</option>
      <option value="Debirpura, hyd">Debirpura</option>
      <option value="Dilshuknagar, hyd">Dilshuknagar</option>
      <option value="Kothapet, hyd">Kothapet</option>
      <option value="Uppal, hyd">Uppal</option>
      <option value="Tank Bund, hyd">Tank Bund</option>
      <option value="Koti, hyd">Koti</option>
      <option value="Lb Nagar, hyd">Lb Nagar</option>
      <option value="Santhosh nagar, hyd">Santhosh nagar</option>
      <option value="Gachibowli, hyd">Gachibowli</option>
      <option value="Kukatpally, hyd">Kukatpally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Ameerpet, hyd">Ameerpet</option>
      <option value="Golkonda, hyd">Golkonda</option>
      <option value="Jubilee hills, hyd">Jubilee hills</option>
      <option value="Banjara hills, hyd">Banjara hills</option>
      <option value="Madhapur, hyd">Madhapur</option>
      <option value="Punjaguta, hyd">Punjaguta</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="Hitech city, hyd">Hitech city</option>
      <option value="Shamshabad, hyd">Shamshabad</option>
      <option value="Secunderabad, hyd">Secunderabad</option>
      <option value="Charminar, hyd">Charminar</option>
      <option value="Nampally, hyd">Nampally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Khairatabad, hyd">Khairatabad</option>
      <option value="Begum Bazar, hyd">Begum Bazar</option>
      <option value="Sultan Bazar, hyd">Sultan Bazar</option>
      <option value="Afzal Gunj, hyd">Afzal Gunj</option>
      <option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
      <option value="Hyderguda, hyd">Hyderguda</option>
      <option value="Somajiguda, hyd">Somajiguda</option>
      <option value="Malakpet, hyd">Malakpet</option>
      <option value="Saidabad, hyd">Saidabad</option>
      <option value="Saroornagar, hyd">Saroornagar</option>
      <option value="Debirpura, hyd">Debirpura</option>
      <option value="Dilshuknagar, hyd">Dilshuknagar</option>
      <option value="Kothapet, hyd">Kothapet</option>
      <option value="Uppal, hyd">Uppal</option>
      <option value="Tank Bund, hyd">Tank Bund</option>
      <option value="Koti, hyd">Koti</option>
      <option value="Lb Nagar, hyd">Lb Nagar</option>
      <option value="Santhosh nagar, hyd">Santhosh nagar</option>
      <option value="Gachibowli, hyd">Gachibowli</option>
      <option value="Kukatpally, hyd">Kukatpally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Ameerpet, hyd">Ameerpet</option>
      <option value="Golkonda, hyd">Golkonda</option>
      <option value="Jubilee hills, hyd">Jubilee hills</option>
      <option value="Banjara hills, hyd">Banjara hills</option>
      <option value="Madhapur, hyd">Madhapur</option>
      <option value="Punjaguta, hyd">Punjaguta</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 17.2400, lng: 78.4800}
  });
  directionsDisplay.setMap(map);

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
        async defer></script>
  </body>
</html>

The example below demonstrate the simple code for showing directions using different travel modes between two selected places or locations.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel modes in directions</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Mode of Travel: </b>
    <select id="mode">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 17.2400, lng:  78.4800}
  });
  directionsDisplay.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsDisplay);
  document.getElementById('mode').addEventListener('change', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var selectedMode = document.getElementById('mode').value;
  directionsService.route({
    origin: {lat: 17.3465, lng: 78.551}, 
    destination: {lat: 17.4454, lng: 78.3874},  
    travelMode: google.maps.TravelMode[selectedMode]
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
        async defer></script>
  </body>
</html>

Textual display for directions

Google Maps Services also provide textual display for directions in addition to polylines and markers by calling setPanel() on DirectionRenderer.

The direction information can be displayed using the div and the text directions are provided with language settings by which user can specify preferred language, using Language parameter while loading the API JavaScript.

The example below demonstrate the simple code for creating textual directions for the selected locations on a map using div panel.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Displaying text directions with <code>setPanel()</code></title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#right-panel select, #right-panel input {
  font-size: 15px;
}
#right-panel select {
  width: 100%;
}
#right-panel i {
  font-size: 12px;
}
      #right-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }
      #map {
        margin-right: 400px;
      }
      #floating-panel {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }
      @media print {
        #map {
          height: 500px;
          margin: 0;
        }
        #right-panel {
          float: none;
          width: auto;
        }
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <strong>Start:</strong>
      <select id="start">
      <option value="Hitech city, hyd">Hitech city</option>
      <option value="Shamshabad, hyd">Shamshabad</option>
      <option value="Secunderabad, hyd">Secunderabad</option>
      <option value="Charminar, hyd">Charminar</option>
      <option value="Nampally, hyd">Nampally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Khairatabad, hyd">Khairatabad</option>
      <option value="Begum Bazar, hyd">Begum Bazar</option>
      <option value="Sultan Bazar, hyd">Sultan Bazar</option>
      <option value="Afzal Gunj, hyd">Afzal Gunj</option>
      <option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
      <option value="Hyderguda, hyd">Hyderguda</option>
      <option value="Somajiguda, hyd">Somajiguda</option>
      <option value="Malakpet, hyd">Malakpet</option>  
      <option value="Saidabad, hyd">Saidabad</option>
      <option value="Saroornagar, hyd">Saroornagar</option>
      <option value="Debirpura, hyd">Debirpura</option>
      <option value="Dilshuknagar, hyd">Dilshuknagar</option>
      <option value="Kothapet, hyd">Kothapet</option>
      <option value="Uppal, hyd">Uppal</option>
      <option value="Tank Bund, hyd">Tank Bund</option>
      <option value="Koti, hyd">Koti</option>
      <option value="Lb Nagar, hyd">Lb Nagar</option> 
      <option value="Santhosh nagar, hyd">Santhosh nagar</option>
      <option value="Gachibowli, hyd">Gachibowli</option>
      <option value="Kukatpally, hyd">Kukatpally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Ameerpet, hyd">Ameerpet</option>
      <option value="Golkonda, hyd">Golkonda</option>
      <option value="Jubilee hills, hyd">Jubilee hills</option>
      <option value="Banjara hills, hyd">Banjara hills</option>
      <option value="Madhapur, hyd">Madhapur</option>
      <option value="Punjaguta, hyd">Punjaguta</option>
      </select>
      <br>
      <strong>End:</strong>
      <select id="end">
      <option value="Hitech city, hyd">Hitech city</option>
      <option value="Shamshabad, hyd">Shamshabad</option>
      <option value="Secunderabad, hyd">Secunderabad</option>
      <option value="Charminar, hyd">Charminar</option>
      <option value="Nampally, hyd">Nampally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Khairatabad, hyd">Khairatabad</option>
      <option value="Begum Bazar, hyd">Begum Bazar</option>
      <option value="Sultan Bazar, hyd">Sultan Bazar</option>
      <option value="Afzal Gunj, hyd">Afzal Gunj</option>
      <option value="san bernardino, hyd">Ma Saheba Ka Talab</option>
      <option value="Hyderguda, hyd">Hyderguda</option>
      <option value="Somajiguda, hyd">Somajiguda</option>
      <option value="Malakpet, hyd">Malakpet</option>
      <option value="Saidabad, hyd">Saidabad</option>
      <option value="Saroornagar, hyd">Saroornagar</option>
      <option value="Debirpura, hyd">Debirpura</option>
      <option value="Dilshuknagar, hyd">Dilshuknagar</option>
      <option value="Kothapet, hyd">Kothapet</option>
      <option value="Uppal, hyd">Uppal</option>
      <option value="Tank Bund, hyd">Tank Bund</option>
      <option value="Koti, hyd">Koti</option>
      <option value="Lb Nagar, hyd">Lb Nagar</option>
      <option value="Santhosh nagar, hyd">Santhosh nagar</option>
      <option value="Gachibowli, hyd">Gachibowli</option>
      <option value="Kukatpally, hyd">Kukatpally</option>
      <option value="Begumpet, hyd">Begumpet</option>
      <option value="Ameerpet, hyd">Ameerpet</option>
      <option value="Golkonda, hyd">Golkonda</option>
      <option value="Jubilee hills, hyd">Jubilee hills</option>
      <option value="Banjara hills, hyd">Banjara hills</option>
      <option value="Madhapur, hyd">Madhapur</option>
      <option value="Punjaguta, hyd">Punjaguta</option>
      </select>
    </div>
    <div id="right-panel"></div>
    <div id="map"></div>
    <script>
function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 17.2400, lng: 78.4800}
  });
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('right-panel'));
  var control = document.getElementById('floating-panel');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
        async defer></script>
  </body>
</html>

Dragging Directions

Google Maps API provide Direction Dragging which allows the user to select the alternate route by clicking and dragging on a map.

By setting the draggable property to true the direction can be dragged on a map and only the transit directions cannot be dragged.

The example below demonstrate the simple code for dragging the direction between the two selected locations or places.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Draggable directions</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 63%;
        height: 100%;
      }
      #right-panel {
        float: right;
        width: 34%;
        height: 100%;
      }
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#right-panel select, #right-panel input {
  font-size: 15px;
}
#right-panel select {
  width: 100%;
}
#right-panel i {
  font-size: 12px;
}
      .panel {
        height: 100%;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <p>Total Distance: <span id="total"></span></p>
    </div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 17.2400, lng: 78.4800} 
  });
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });
  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });
  displayRoute('Lb nagar, hyd', 'Shamshabad, hyd', directionsService,
      directionsDisplay);
}
function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Lb nagar ringroad, hyd'}, {location: 'Shamshabad airport, hyd'}],
    travelMode: google.maps.TravelMode.DRIVING,
    avoidTolls: true
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}
function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap"
        async defer></script>
  </body>
</html>

Maximum zooming imagery

Various zooming levels are provide by Google Maps Services for viewing a map. The levels 0-18 gives the available roadmap imagery. For a remote locations at high zooming levels the satellite imagery may not available always, by using the MaxZoomService object user can know the maximum zooming level for a preferred location.

For more information about Zooming checkout Google Maps – Zoom.

Summary

  • The options for different travel modes changes i.e. when requesting the transit directions it avoids the options like waypoints, highways etc.
  • The waypoints are used to return the multi-path directions in Google Maps Services.

  • Copy the API key obtained from Google Maps API and paste using the JavaScript tag in the code for loading Maps.
  • Set the required Map Properties for better output.
  • Make sure the latitude and longitudes of the required location mentioned to be correct.