CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
nagi
nagi

Reputation: 381

Google Maps API V3 : How to get multiple path distances using direction from a point A to point B

I can get only one driving distance from point A to point B using google map api v3.

Code:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Directions Complex</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
   <div id="map" style="width: 400px; height: 300px;"></div> 
   <div id="duration">Duration: </div> 
   <div id="distance">Distance: </div> 

   <script type="text/javascript"> 

   var directionsService = new google.maps.DirectionsService();
   var directionsDisplay = new google.maps.DirectionsRenderer();

   var myOptions = {
     zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

   var map = new google.maps.Map(document.getElementById("map"), myOptions);
   directionsDisplay.setMap(map);

var st=new google.maps.LatLng(51.7519, -1.2578);
var en=new google.maps.LatLng(50.8429, -0.1313);
   var request = {
       origin: st, 
       destination:en,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
   };

   directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {

         // Display the distance:
         document.getElementById('distance').innerHTML += 
            (response.routes[0].legs[0].distance.value)/1000 + "killo meters";
  alert((response.routes[0].legs[0].distance.value)/1000 + "killo meters");
         // Display the duration:
         document.getElementById('duration').innerHTML += 
            response.routes[0].legs[0].duration.value + " seconds";
  alert(  response.routes[0].legs[0].duration.value + " seconds");

         directionsDisplay.setDirections(response);
      }
   });

   </script> 
</body> 
</html>

enter image description here

But I want to get multiple or all possible driving distances using google map api v3. I want to get multiple distances like given below.

enter image description here

Upvotes: 1

Views: 3681

Answers (1)

Ian A
Ian A

Reputation: 6128

There is a provideRouteAlternatives options that can be specified with the directions request parameters to tell the DirectionsService to return multiple results. You can amend your request parameters as follows:

var request = {
    origin: st,
    destination: en,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    // Returns multiple routes
    provideRouteAlternatives: true
};

Your event handler for obtaining the directions can be modified to create a new DirectionsRenderer for each route as follows (ensure you set the correct route index each time, otherwise the DirectionsRenderer will render the first route in the response):

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        // Create a new DirectionsRenderer for each route
        for (var i = 0; i < response.routes.length; i++) {
            var dr = new google.maps.DirectionsRenderer();
            dr.setDirections(response);
            // Tell the DirectionsRenderer which route to display
            dr.setRouteIndex(i);
            dr.setMap(map);

            // Code ommited to display distance and duration
        }
    }
}

The code where you append the distance and duration will need to be brought into this for loop so it appends the distance and duration for each route. I've ommited this in the code snippet above but it is in the demo Fiddle below.

I've created a Fiddle to demonstrate this.

Upvotes: 2

Related Questions