So i put together this distance and rate calculator using google maps api, but since im not that great with javascript just yet, its all kind of pasted together, although it works just fine… im sure theres a better way to do this… heres the demo
http://tinyurl.com/bsvu5jn
(works in san diego only)
and heres the distance/rate calculator code
var geocoder, location1, location2, gDir;
function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
var drivingDistanceMiles = Math.round(drivingDistanceMiles*100)/100;
var drivingrate1 = Math.round((drivingDistanceMiles*3.00)+2.80);
var drivingrate2 = Math.round(((drivingDistanceMiles*3.00)+2.80)*1.15);
document.getElementById('results').innerHTML = '<strong>Driving Distance: </strong>' + drivingDistanceMiles + ' miles <br/><strong>Rate estimate: </strong> $' + drivingrate1 + ' to $' + drivingrate2+'<br/>';
document.getElementById('map').innerHTML = '<iframe src="distancemap.php?from='+ location1.address+'&to='+ location2.address+'" width="500" border="0" height="250" style="border:0px solid #fff; overflow:hidden">Browser not compatible. </iframe>';
document.getElementById('address').innerHTML = '<input type="text"style="display:none" name="pickup" value="'+ location1.address+'"><input type="text" name="dropoff" style="display:none" value=" '+ location2.address+'"/><input type="submit" value="submit" class="submit" />';
});
}
function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the first address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].address2.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the second address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
the reason i use iframes is to load another map that shows the route between the starting address and the ending address, heres the code
var map;
var gdir;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
setDirections("<?php echo $_REQUEST['from']; ?> san diego", "<?php echo $_REQUEST['to']; ?> san diego");
}
}
function setDirections(fromAddress, toAddress) {
gdir.load("from: " + fromAddress + " to: " + toAddress);
}
id like to learn how to just merge the two codes, anyone know how to do this?
thanks!
