Calculate the distance between 2 locations and calculate a price - google-maps-api-3

Question

So basically I have this script (credits to 1stwebdesigner.com and geocodezip) which calculates the distance between 4 locations.
Location 1, location 2, location 3, location 4.
I now need to calculate the distance between location2 and location 3.
and also get that distance and display it and display a price according to this formula
0-10kms = $99,
11-20kms plus $5 per each additional km,
21 - 35kms plus $3.75 per each additional km,
36kms+ plus $3.50 per each additional km,
How do I go about this?
So far I have this (Credits to Rajaprabhu)
(Price Calculation based on the distance covered)
, problem 1 is, the formula is wrong for my situation and problem 2 is the formula isn't getting the distance from the previous calculation.
var request = {
origin:location2,
destination:location3,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
var distance = response.routes[0].legs[0].distance.text;
var duration = response.routes[0].legs[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "The one way Distance is: " + distance + "<br />";
dvDistance.innerHTML += "The one way Duration is: " + duration;
//calculate the one way price using the klms
var kms = distance;
var price_1 = (kms > 0) ? 3 : 0; kms = (kms > 0)? kms - 1 : 0;
var price_2 = (kms - 14) > 0 ? (14 * 1.60) : (kms * 1.60); kms = (kms-14)>0 ? kms - 14 : 0;
var price_3 = (kms - 15) > 0 ? (15 * 1.40) : (kms * 1.40); kms = (kms-15)>0 ? kms - 15 : 0;
var price_4 = (kms > 0) ? (kms * 1.20) : 0;
document.getElementById("displayprice").innerHTML = "the one way price is: " + (price_1 + price_2 + price_3 + price_4);
}
});
Stuck on the formula now.
1. anything over 35km gives a incorrect result.
2. 10km and under should really default to $99.
//calculate the one way price using the klms
var kms = distance;
console.log(kms);
var price_1 = (kms > 0) ? 99 : 0; kms = (kms > 0)? kms - 10 : 0;
var price_2 = (kms - 10) > 0 ? (10 * 5.00) : (kms * 5.00); kms = (kms-10)>0 ? kms - 10 : 0;
var price_3 = (kms - 20) > 0 ? (15 * 3.75) : (kms * 3.75); kms = (kms-20)>0 ? kms - 20 : 0;
var price_4 = (kms > 0) ? (kms * 3.50) : 0;

Answer 1

From the documentation:
google.maps.Distance object specification
A representation of distance as a numeric value and a display string.
Properties
text | Type: string | A string representation of the distance value, using the UnitSystem specified in the request.
value | Type: number | The distance in meters.
Your distance is a string: var distance = response.routes[0].legs[0].distance.text;
You should use the numeric value (in meters):
var distance = response.routes[0].legs[0].distance.value/1000;
proof of concept fiddle
code snippet:
var geocoder;
var map;
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
// Philadelphia, PA, USA (39.9525839, -75.16522150000003)
// Baltimore, MD, USA (39.2903848, -76.61218930000001)
var location1 = new google.maps.LatLng(40.7127837, -74.005941);
var location2 = new google.maps.LatLng(40.735657, -74.1723667);
var location3 = new google.maps.LatLng(39.9525839, -75.1652215);
var location4 = new google.maps.LatLng(39.2903848, -76.6121893);
function initialize() {
// create a new map object
// set the div id where it will be shown
// set the map options
var mapOptions = {
center: {
lat: 42,
lng: -72
},
zoom: 4
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// show route between the points
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin: location1,
waypoints: [{
location: location2,
}, {
location: location3,
}],
destination: location4,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
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 />";
summaryPanel.innerHTML += route.legs[i].duration.text + "<br />";
}
computeTotalDistance(response);
var request = {
origin: location2,
destination: location3,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var distance = response.routes[0].legs[0].distance.value / 1000;
var duration = response.routes[0].legs[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "The one way Distance (segment 2) is: " + distance + "<br />";
dvDistance.innerHTML += "The one way Duration (segment 2) is: " + duration;
//calculate the one way price using the klms
var kms = distance;
console.log(kms);
var price_1 = (kms > 0) ? 3 : 0;
kms = (kms > 0) ? kms - 1 : 0;
var price_2 = (kms - 14) > 0 ? (14 * 1.60) : (kms * 1.60);
kms = (kms - 14) > 0 ? kms - 14 : 0;
var price_3 = (kms - 15) > 0 ? (15 * 1.40) : (kms * 1.40);
kms = (kms - 15) > 0 ? kms - 15 : 0;
var price_4 = (kms > 0) ? (kms * 1.20) : 0;
document.getElementById("displayprice").innerHTML = "the one way price (segment 2) is: $" + (price_1 + price_2 + price_3 + price_4).toFixed(2);
}
});
} else {
alert("directions response " + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
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<br>total price is: $" + ((totalTime / 60).toFixed(2) * 2.1) + " dollars<br>saturday price is: $" + ((totalTime / 60).toFixed(2) * 2.35) + " dollars<br>sunday price is: $" + ((totalTime / 60).toFixed(2) * 2.6) + " dollars";
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="dvDistance"></div>
<div id="displayprice"></div>
<div id="total"></div>
<div id="directions_panel"></div>