Travel Modes Direction in Google Maps

In this example you will learn how add travel modes in directions in 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) {  
  var selectedMode = document.getElementById('mode').value;  
  directionsService.route({  
    origin: {lat: 20.39623, lng: 77.85009},    
    destination: {lat: 22.39623, lng: 80.85009},    
   
    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);  
    }  
  });  
}  

Travel Modes Direction in 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 Travel Modes in Directions</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: 10px;  
  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 directionsDisplay = new google.maps.DirectionsRenderer;  
  var directionsService = new google.maps.DirectionsService;  
  var map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng  
  });  
  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: 20.39623, lng: 77.85009},    
    destination: {lat: 22.39623, lng: 80.85009},    
   
    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>  
  </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>  
  </body>  
</html>

See Live Example

Above example will produce following output