Google Maps API: Total distance with waypoints

Question

I'm trying to calculate the total distance for a route with a single waypoint in it, but somehow my code only returns the distance to the first waypoint instead of the total distance.

Here's my code:

function calcRoute(homebase,from,to,via){
var start = from;
var end = to;
var wypt = [ ];
wypt.push({
            location:via,
            stopover:true});

var request = {
    origin:start,
    destination:end,
    waypoints:wypt,     
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.DirectionsUnitSystem.METRIC
};

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

    var distance = response.routes[0].legs[0].distance.text; 
    var time_taken = response.routes[0].legs[0].duration.text; 

    var calc_distance = response.routes[0].legs[0].distance.value; 
  }
});
}

Answer 1

The reason you only get the distance for legs[0] is because that is what your code is calculating. You need to sum up the distances of all the legs:

http://www.geocodezip.com/v3_GoogleEx_directions-waypoints_totalDist.html

code snippet:

 var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); calcRoute(); } google.maps.event.addDomListener(window, 'load', initialize); function calcRoute() { var request = { // from: Blackpool to: Preston to: Blackburn origin: "Blackpool,UK", destination: "Blackburn,UK", waypoints: [{ location: "Preston,UK", stopover: true }], optimizeWaypoints: true, travelMode: google.maps.DirectionsTravelMode.WALKING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById("directions_panel"); summaryPanel.innerHTML = ""; // For each route, display summary information. for (var i = 0; i < route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />"; summaryPanel.innerHTML += route.legs[i].start_address + " to "; summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; } computeTotalDistance(response); } else { alert("directions response " + status); } }); } function computeTotalDistance(result) { var totalDist = 0; var totalTime = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { totalDist += myroute.legs[i].distance.value; totalTime += myroute.legs[i].duration.value; } totalDist = totalDist / 1000. document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes"; }

 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas" style="float:left;width:70%;height:100%;"></div> <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> <div id="total"></div> </div>