Add draggable directions on Google Maps

In this example you will learn how draggable directions are added 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 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';  
} 

Add draggable directions 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>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>  
        <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 map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng 
  });  
  
  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('New Delhi, IN', 'Indore, IN', directionsService,  
      directionsDisplay);  
}  
  
function displayRoute(origin, destination, service, display) {  
  service.route({  
    origin: origin,  
    destination: destination,  
    waypoints: [{location: 'New Delhi, IN'}, {location: 'Indore, IN'}],  
    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>  
  </head>  
  <body>  
    <div id="map"></div>  
    <div id="right-panel">  
      <p>Total Distance: <span id="total"></span></p>  
    </div>  
   </body>  
</html>

See Live Example

Above example will produce following output