Add Direction Service on Google Maps

In this example you will learn how to add directions service on google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

function calculateAndDisplayRoute(directionsService, directionsDisplay) {  
  directionsService.route({  
    origin: document.getElementById('Source').value,  
    destination: document.getElementById('Destination').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);  
    }  
  });  
}

Add Direction Service on Google Maps Example

<!DOCTYPE html>  
<html>  
  <head>  <!-- www.techstrikers.com -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
    <meta charset="utf-8">  
    <title>Add Directions service</title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;
        width: 99%;
      }  
#floating-panel {  
  position: absolute;  
  top: 0px;  
  left: 25%;  
  z-index: 5;  
  background-color: #fff;  
  padding: 0px;  
  border: 1px solid #999;  
  text-align: center;  
  font-family: 'Roboto','sans-serif';  
  line-height: 0px;  
  padding-left: 10px;  
}  
    </style>  
        <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"  
        async defer></script>  
        <script>  
function initMap() {
  var lat_lng = {lat: 22.08672, lng: 79.42444};
  var directionsService = new google.maps.DirectionsService;  
  var directionsDisplay = new google.maps.DirectionsRenderer;  
  var map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng  
  });  
  directionsDisplay.setMap(map);  
  
  var onChangeHandler = function() {  
    calculateAndDisplayRoute(directionsService, directionsDisplay);  
  };  
  document.getElementById('Source').addEventListener('change', onChangeHandler);  
  document.getElementById('Destination').addEventListener('change', onChangeHandler);  
}  
  
function calculateAndDisplayRoute(directionsService, directionsDisplay) {  
  directionsService.route({  
    origin: document.getElementById('Source').value,  
    destination: document.getElementById('Destination').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>  
  </head>  
  <body>  
    <div id="floating-panel">  
    <b>Source: </b>  
    <select id="Source" onchange="calcRoute();">  
      <option value="Mumbai, in">Mumbai</option>  
      <option value="New Delhi, in">New Delhi</option>  
      <option value="Kolkata, in">Kolkata</option>  
      <option value="Chennai, in">Chennai</option>  
      <option value="Indore, in">Indore</option>  
      <option value="Hyderabad, in">Hyderabad</option>  
      <option value="Pune, in">Pune</option>  
      <option value="Bhopal, in">Bhopal</option>  
      <option value="Ahemdabad, in">Ahemdabad</option>  
      <option value="Jaipur, in">Jaipur</option>  
      <option value="Bengluru, in">Bengluru</option>    
    </select>  
    <b>Destination: </b>  
    <select id="Destination" onchange="calcRoute();">  
      <option value="Mumbai, in">Mumbai</option>  
      <option value="New Delhi, in">New Delhi</option>  
      <option value="Kolkata, in">Kolkata</option>  
      <option value="Chennai, in">Chennai</option>  
      <option value="Indore, in">Indore</option>  
      <option value="Hyderabad, in">Hyderabad</option>  
      <option value="Pune, in">Pune</option>  
      <option value="Bhopal, in">Bhopal</option>  
      <option value="Ahemdabad, in">Ahemdabad</option>  
      <option value="Jaipur, in">Jaipur</option>  
      <option value="Bengluru, in">Bengluru</option>  
    </select>  
    </div>  
    <div id="map"></div>  
   </body>  
</html>

See Live Example

Above example will produce following output