ansaurus

Question

Directions distance in Google Maps API v3

Answer 1

+3 A:

While it does not seem to be documented officially, it looks like you can traverse the response from the DirectionsService.route() method: response.trips[0].routes[0].distance.value, as in the following example:

<!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"&gt;&lt;/script&gt;
</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 request = {
       origin: 'Chicago', 
       destination: 'New York',
       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 + " meters";

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

         directionsDisplay.setDirections(response);
      }
   });
   </script> 
</body> 
</html>

Screenshot showing distance and duration:

Google Maps API v3 Directions Demo

Daniel Vassallo 2010-03-18 19:14:05

It is not working for me. I got an error "response.trips not defined". Upd. the answer - response.trips[i].routes[0].duration.value should beresponse.routes[i].legs[0].duration.value.

Malx 2010-06-24 16:03:45

@Malx: Thanks for the correction. I updated the answer. This is strange, because I'm sure I tested that example when I posted it. In fact, that's how I got the screenshot :)

Daniel Vassallo 2010-06-24 16:59:58

It is not strange - the API was changed. I found the answer on google groups.

Malx 2010-08-14 10:13:27

@Malx: Yep, I happened to notice it in the docs a few days a few days later. It is mentioned here: http://code.google.com/apis/maps/documentation/javascript/services.html#DirectionsResults :)

Daniel Vassallo 2010-08-14 10:40:32

ansaurus

tags:

views:

answers:

Directions distance in Google Maps API v3

related questions