Thursday, April 19, 2012

Calculate distance - Distance Finder Tutorial

This tutorial demonstrates how to calculate distance  between two locations.
Try with your Google Map API key.

Demo          Download

Here is the complete source code.

[sourcecode language="javascript"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Calculate distance with Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_GOOGLE_MAP_API_KEY" type="text/javascript"></script>
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
<script type="text/javascript">

var geocoder, location1, location2;

function initialize() {
geocoder = new GClientGeocoder();
}

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};
calculateDistance();
}
});
}
});
}

function calculateDistance()
{
try
{
var glatlng1 = new GLatLng(location1.lat, location1.lon);
var glatlng2 = new GLatLng(location2.lat, location2.lon);
var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
var kmdistance = (miledistance * 1.609344).toFixed(1);
document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Address 2: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
}
catch (error)
{
alert(error);
}
}

</script>
</head>

<body onload="initialize()">

<form action="#" onsubmit="showLocation(); return false;">
<p>
<input type="text" name="address1" value="Address 1" class="address_input" size="40" />
<input type="text" name="address2" value="Address 2" class="address_input" size="40" />
<input type="submit" name="find" value="Search" />
</p>
</form>
<p id="results"></p>

</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->


[/sourcecode]

2 comments:

  1. Are you kidding me?

    1: Code does not work.
    2: The demo button does not work...
    3: Your entire HTML code is littered with anchor links in between EVERY SINGLE element.

    Sure, the JS looks good but with the total lack of any valid HTML, this is broken. And well beyond that...

    ReplyDelete
  2. Hi Aleks,
    Thank you for showing me the mistakes I have done. I have rearranged the messy code. I also included a demo.
    Don't forget that you need to include your Google Map API key to work the code properly.

    ReplyDelete

How to enable CORS in Laravel 5

https://www.youtube.com/watch?v=PozYTvmgcVE 1. Add middleware php artisan make:middleware Cors return $next($request) ->header('Acces...