Directions distance in Google Maps API v3

google-maps, javascript

Solution

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"></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 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:

Problem

I'm trying to work out how to use the Google Maps Directions Demo to get the distance from the successful directions. This is the code I have so far: ``` var googleMaps = { // HTML Nodes fromInput: google_maps_from, toInput: google_maps_to, // API Objects dirService: new google.maps.DirectionsService(), dirRenderer: new google.maps.DirectionsRenderer(), map: null, showDirections: function(dirResult, dirStatus) { if (dirStatus != google.maps.DirectionsStatus.OK) { //Here we'll handle the errors a bit better :P alert('Directions failed: ' + dirStatus); return; } else { //Get the distance here //onGDirectionsLoad(); } // Show directions googleMaps.dirRenderer.setMap(googleMaps.map); googleMaps.dirRenderer.setPanel(document.getElementById("directions")); googleMaps.dirRenderer.setDirections(dirResult); }, getSelectedTravelMode: function() { return google.maps.DirectionsTravelMode.DRIVING; }, getSelectedUnitSystem: function() { return google.maps.DirectionsUnitSystem.METRIC; }, getDirections: function() { var fromStr = googleMaps.fromInput; var toStr = googleMaps.toInput; var dirRequest = { origin: fromStr, destination: toStr, travelMode: googleMaps.getSelectedTravelMode(), unitSystem: googleMaps.getSelectedUnitSystem(), provideTripAlternatives: true }; googleMaps.dirService.route(dirRequest, googleMaps.showDirections); }, init: function() { googleMaps.map = new google.maps.Map(document.getElementById("map_canvas"), { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Show directions onload googleMaps.getDirections(); } }; // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', googleMaps.init); ``` I could do this just fine in v2, just having trouble working out the v3 equivalent.

Original source

Related problems