Google Maps

A community portal about Google Maps with blogs, videos, and photos. According to Wikipedia.org: Google Maps is a free web map server application and technology provided by Google that powers many map-based services including Google Maps, Google Ride Finder and embedded maps on third-party websites via the Google Maps API. It offers street maps, a route planner, and an urban business locator for numerous countries around the world.

Write an Article

RSS

How to calculate driving distance with Google Maps API

Written by briancray on

From: briancray.com

Once upon a time I wrote How to calculate distance with javascript and Google Maps API. This article showed my readers how to calculate the straight line distance between two addresses. It turns out that people really wanted the driving distance between two addresses. I get an e-mail about this about once a day.

Today I will finally provide the long–awaited much–anticipated tutorial: how to calculate driving distance between two addresses using javascript and google maps API.

What I’ve built for you here is a javascript/Google Maps-driven web app that will take two fuzzy locations/addresses, turn them into full addresses and coordinates, and calculate the driving distance in miles and kilometers between them. So again, input two fuzzy address and output full addresses and distance. Sounds like a win for the you and your users.

Let’s step through the code to see how I did it. If you don’t want to learn about the code, go ahead and see the end result with source code.

The HTML

The HTML is pretty basic, but there are a few things to note:

Change the google maps API key to your own. Mine will not work on your domain. If you don’t have one, grab your Google Maps API key for free.
The form submits to a function named and the body loads with a function named . We’ll build these in the next section.
The empty
element at the bottom of the HTML is used to output the results.
Advanced JS devs: This uses inline javascript events and javascript in the for the sake of simplicity. If you know how to move javascript externally, that is a better way to go.

<!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"/>
    <meta name="robots" content="noindex,follow" />
    <title>Calculate driving distance with Google Maps API</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" 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 -->
  </head>
  <body onload="initialize()">
    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <input type="text" name="address1" value="Address 1" />
        <input type="text" name="address2" value="Address 2" />
        <input type="submit" value="Search" />
      </p>
    </form>
    <p id="results"></p>
  </body>
</html>

Now let’s look at the javascript, where the real magic happens. We’ll look at the javascript in more detail than we did with the HTML.

Stepping through the Javascript

If you’d like skip the steps to the complete javascript code

First we’ll define global variables used in more than one function

var geocoder, location1, location2, gDir;

Next we’ll define our event which prepares the Google Maps API for our requests and prepares to calculate the distance. Here’s the steps it goes through:

Line 1 & 2: Assign Google’s geocoder (GClientGeocoder()) and Google’s directions API (GDirections()) to global variables
Line 3: Add a “load” even listener to the directions API. Which means, when Google finishes calculating the driving distance, the following steps are performed:
1. The driving distance is calculated from in miles and kilometers
2. The address and distance information is printed to the screen in to #results

function initialize() {
	geocoder = new GClientGeocoder();
	gDir = new GDirections();
	GEvent.addListener(gDir, "load", function() {
		var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
		var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
		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>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)';
	});
}

Next we’ll define , which is called when the user submits the form with the two fuzzy addresses. Here’s the steps it goes through:

Attempt to get the first location’s information from the Google Maps API;
Put the first location’s information including lat, lon, and full address into an object called ;
Attempt to get the second location’s information from the Google Maps API;
Put the second location’s information including lat, lon, and full address into an object called ;
Use Google’s directions API as to “load” the driving distance (which triggers the “load” event listener we defined above)

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

Completed Javascript

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 drivingDistanceKilometers = gDir.getDistance().meters / 1000;
		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>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)';
	});
}
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);
				}
			});
		}
	});
}

Advanced javascript developers: If you want to, feel free to put the above code into an external javascript file.

All of the source code together in one working file

<!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"/>
	<meta name="robots" content="noindex,follow" />
	<title>Calculate driving distance with Google Maps API</title>
	<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" 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, gDir;
	function initialize() {
		geocoder = new GClientGeocoder();
		gDir = new GDirections();
		GEvent.addListener(gDir, "load", function() {
			var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
			var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
			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>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)';
		});
	}
	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);
					}
				});
			}
		});
	}
	</script>
</head>
<body onload="initialize()">
	<form action="#" onsubmit="showLocation(); return false;">
		<p>
			<input type="text" name="address1" value="Address 1" />
			<input type="text" name="address2" value="Address 2" />
			<input type="submit" value="Search" />
		</p>
	</form>
	<p id="results"></p>
</body>
</html>

The end result

Your hard work has paid off! See the end result with source code

Google Terms of Service Warning: According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API.

Previous Article Next Article