Ben Davis Ben Davis - 1 month ago 19
Javascript Question

Google maps api incorrect calculations

this is a little tricky one, that i have been at for a few hours now.

If the form is used with out waypoints, The "distance" and "cost" is calculated fine. How ever, if there is waypoints the calculation is only between the "start" address and the first waypoint. it completely ignores the destination and other way points.

var inputs = document.getElementById('start');
var autocompletes = new google.maps.places.Autocomplete(inputs, options);
var inpute = document.getElementById('end');
var autocompletee = new google.maps.places.Autocomplete(inpute, options);

directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}

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

}

function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
if (waypoints.value) {
var waypts = [];
var optionsArray = document.getElementById("waypoints").value.split('\n');
for (var i = 0; i < optionsArray.length; i++) {
if(optionsArray.length>0) {
waypts.push({
location:optionsArray[i],
stopover:true});
}
}
}
var distanceInput = document.getElementById("distance");
var costInput = document.getElementById("cost");

if (waypoints.value) {
var request = {
origin:start,
destination:end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
} else {
var request = {
origin:start,
destination:end,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
costInput.value = (2 * (response.routes[0].legs[0].distance.value / 1000));

}
});




}
</script>
</head>
<body onload="initialize()">
<div>

<p>
<label for="start">Pickup from: </label>
<input type="text" name="start" id="start" autocomplete="on" size="40"/>

<label for="end">Delivered to: </label>
<input type="text" name="end" id="end" autocomplete="on" size="40"/><BR>
Other Deliveries:<BR>
<textarea id="waypoints" name="waypoints" onclick="this.value='';" cols="10" rows="10">Address, Suburb, State
(Address is Optional)
New line for each address</textarea>
</p>
<p>
<div id="ins"></div>
</p>
<p>
<input type="submit" value="Calculate" onclick="if (waypoints.value == 'Address, Suburb, State\n(Address is Optional)\nNew line for each address') { waypoints.value=''}; calcRoute()" />
</p>
<p>
<label for="distance">Distance (km): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
<p>
<label for="cost">MAX cost: 1 standard item going direct</label>
<input type="text" name="cost" id="cost" readonly="true"/>
</p>
</div>
<div id="map_canvas" style="width:300px; height:200px;"></div>


I am aware :
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
costInput.value = (2 * (response.routes[0].legs[0].distance.value / 1000));
makes the calculations. But what i have doesnt calculate them all together.

Thank you

Answer

If you add waypoints, there are more than 1 element in response.routes[0].legs.

So the distance should be calculated as this

var totalDistance = 0;

response.routes[0].legs.forEach(function(leg) {
   totalDistance += leg.distance.value / 1000;
})

distanceInput.value = totalDistance;