Google Maps : get route, Km, and … price
Question
I think I am in a project which is probably too much for me, but I thought you could put me in the right direction.
We are trying to have a form where the user will write a starting point and an ending one, as seen in the Google Maps examples ( http://code.google.com/apis/maps/documentation/examples/directions-advanced.html ), in order to output a map, the route in it, and the number of kilometers between the two points.
The thing is that we need to "translate" those Km into $.
I think this could be easily done, but we will have too some variables, like the number of passengers (a dropdown menu to select).
How on earth can I combine that ? Should I write a special form, use some PHP ? I'm lost here. How could I do it ?
Say that 1 km = 100$ and every extra person beyond the first one will add 100$ to that price.
So 20 Km with 2 persons = 300$
1- Can I embedd some variable into the Google code ?
2- How would be the form to call for it ?
Thanks very much for your help.
Google Code
var map; var gdir; var geocoder = null; var addressMarker; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); gdir = new GDirections(map, document.getElementById("directions")); GEvent.addListener(gdir, "load", onGDirectionsLoad); GEvent.addListener(gdir, "error", handleErrors); setDirections("San Francisco", "Mountain View", "en_US"); } } function setDirections(fromAddress, toAddress,locale) { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); }
function handleErrors(){ if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) alert("No corresponding geographic location could be found forone of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\\nError code: " + gdir.getStatus().code); else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY) alert("The HTTP q parameter was either missing or had no value. Forgeocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\\n Error code: " + gdir.getStatus().code);
// else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong // alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_KEY) alert("The given key is either invalid or does not match the domainfor which it was given. \\n Error code: " + gdir.getStatus().code);
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) alert("A directions request could not be successfully parsed.\\nError code: " + gdir.getStatus().code);
else alert("An unknown error occurred."); }function onGDirectionsLoad(){ // Use this function to access information about the latest load() // results.
// eg // document.getElementById("getStatus").innerHTML= gdir.getStatus().code; // and yada yada yada... }
2 answers
solution1
3 2015-07-02 17:36:43
Full code for you:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Distance Calculator</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#map_canvas {
height:500px;
}
</style>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var start = document.getElementById("start");
var end = document.getElementById("end");
var autocompletePickpUp = new google.maps.places.Autocomplete(start);
var autocompleteDelivery = new google.maps.places.Autocomplete(end);
var uk = new google.maps.LatLng(51.511035, -0.132315);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: uk
}
//testing
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
autocompletePickpUp.bindTo('bounds', map);
autocompleteDelivery.bindTo('bounds', map);
}
function calcRoute() {
var startValue =start.value;
var endValue = end.value;
var distanceInput = document.getElementById("distanceKm");
var distanceMl = document.getElementById("distanceMl");
var price = document.getElementById("price");
var request = {
origin:startValue,
destination:endValue,
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;
distanceMl.value = response.routes[0].legs[0].distance.value * 0.000621371;
price.value = distanceMl.value * 2.50;
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" />
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distanceInKm">Distance (km): </label>
<input type="text" name="distanceKm" id="distanceKm" readonly="true" />
</p>
<p>
<label for="distanceInMiles">Distance (ML): </label>
<input type="text" name="distanceMl" id="distanceMl" readonly="true" />
</p>
<p>
<label for="price">Price: </label>
<input type="text" name="price" id="price" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
paste this in a html doc, and test it. I'm getting the values in KM > convert it in Miles > and get a price in £.
I just did that now, and it is not 100% func but you get the idea.
To calc your passengers you just need to get this :
<div class="form-group">
<label>Table</label>
<select class="form-control required" name="kitchen_table" id="kitchen_table">
<option value="" selected>Quantity</option>
<option value="0">0</option>
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
<option value="40">4</option>
</select>
</div>
<div class="live_quote">
<p>Your total is: <span id="total_quote"></span> </p>
</div>
and get the values to print it :
$('select').change(function(){
var total = 0;
$('select :selected').each(function() {
total += Number($(this).val());
});
$("#total_quote").html(total);
})
AGAIN: you may have some erro's, but it is func, you can get an idea and guide from there.
solution2
1 2009-10-05 09:59:38
In your onGDirectionsLoad() function, you can get the distance in km with
gdir.getDistance().meters/1000
I assume you don't need me to tell you how to perform rounding, if necessary, multiply it by $100 and add the extra passenger fees.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.