Display Text Directions with setPanel() on Google Maps

In this example you will learn how display text directions with setPanel() 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 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);  
    }  
  });  
}

Display Text Directions with setPanel() 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>Displaying text directions with <code>setPanel()</code></title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;
      }  
#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>  
        <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);  
  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>  
  </head>  
  <body>  
    <div id="floating-panel">  
      <strong>Start:</strong>  
      <select id="start" 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="end" 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="right-panel"></div>  
    <div id="map"></div>  
   </body>  
</html>

See Live Example

Above example will produce following output