Technical Overview: Google Maps

Google Maps is the most well known of the various mapping web services. With a rich JavaScript API, road maps, route planning, satellite images, and data plotting; Google Maps offers similar services and maps as Microsoft’s competing Virtual Earth service.

Google Maps should not be confused with Google’s other mapping product, Google Earth. Google Earth operates through a standalone executable or a control. In contrast, Google Maps is a JavaScript control that operates from within a web page or similar environment.

As an early AJAX application, Google Maps is often given as an example of the advantages of using AJAX (Asynchronous Javascript XML). Changes in map viewing parameters do not require the entire web page to be re-loaded. Instead, the data is seamlessly loaded in the background and cached. This results in a much improved user experience. For performance reasons, Google Maps uses JSON for data transfer and not the ‘traditional’ XML of AJAX.

The main Google Maps site is at The standard user interface includes road maps, satellite images, terrain maps, and traffic reports; although these are not available for all locations. This is what the standard user interface looks like:

Screenshot of Google Maps main user interface

Google provide the Google Maps API as a free service for non-commercial use, but reserve the right to display advertising at a future date. The Google Terms and Conditions should be consulted regarding commercial applications. The API allows Google Maps to be embedded in a web site, and requires a key. This key can be freely obtained from Google, but it allows Google to control over-use and request flooding. The API documentation can be found at .

The following simple example is based on the interactive distance calculator at This example searches for the start and end locations. If both are found, then the route is calculated and displayed on the map. Google Maps can provide the route directions, although they are not used in this example.

<html xmlns="">

<title>Google Maps Example</title>

    <script src=";v=2&amp;key=<INSERT YOUR KEY HERE>" type="text/javascript"></script>

    <script type="text/javascript"> 

// Create a directions object and register a map and DIV to hold the 
// resulting computed directions

    var map, directions, adsManager;
    var map = null;
    function handleErrors() {
	    var message = "An unknown error occurred.";

	    if (directions.getStatus().code == G_GEO_SUCCESS)
	    else if (directions.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
	    else if (directions.getStatus().code == G_GEO_SERVER_ERROR)
	        message = "A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.";
	    else if (directions.getStatus().code == G_GEO_BAD_REQUEST)
	        message = "The route request could not be successfully parsed.";
	    else if (directions.getStatus().code == G_GEO_UNKNOWN_DIRECTIONS)
	        message = "Could not find a route between those two locations.";
	    alert("Routing Error:\n" + message);
    function initialize() {
      map.addControl(new GLargeMapControl());
      directions = new GDirections(map); 

	GEvent.addListener(directions, "error", handleErrors);
      GEvent.addListener(directions, "load", function() {
			var dist = directions.getDistance();
			var tm = directions.getDuration();
			document.all.dresult.innerHTML = dist.html; 
			document.all.tresult.innerHTML = tm.html;

	   var sdir = document.forms[1].elements["mc_from"].value + " to " + document.forms[1].elements["mc_to"].value;	



<h3>Calculate an Individual Mileage</h3>

<!-- Search box -->
<div style="padding-top:5px; padding-bottom:0px; margin-top:5px; " >
<h4>Measure route...</h4>

<form method="get" action="initialize()">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px" style="padding-top:2px;margin-top:2px;">
<td>From:&nbsp;</td><td style="padding-top:5px;margin-top:5px;padding-bottom:5px;margin-bottom:5px" >&nbsp;<input type="text" value="" name="mc_from" size="70"  />&nbsp;</td>
<tr >
<td>To:&nbsp;</td><td style="padding-top:5px;margin-top:5px;padding-bottom:5px;margin-bottom:5px" >&nbsp;<input type="text" value="" name="mc_to" size="70" onKeyDown="if(event.keyCode==13) initialize();" />&nbsp;</td>
<td align="right">
<input type="button" value="Find Distance" onclick="initialize()" />


<p>Calculated Route Distance: <span id="dresult" style="font-weight:bolder">(not set)</span><br/>
Calculated Route Travel Time: <span id="tresult" style="font-weight:bolder">(not set)</span>

<div id="map_canvas" style="width: 80%; height: 400px; padding-bottom:40px; float:left; border: 1px solid black;"></div>



All of the calls to Google Maps are contained in the initialize() and handleErrors() JavaScript functions. initialize() creates the map, and calculates the route. Note that the distance and travel time results are extracted using an un-named embedded function attached to the ‘load’ event.

With active competition from Microsoft’s Virtual Earth, Google Maps continues to see regular improvements in functionality, the API, and data coverage. This active competition will continue to strengthen both products for at least the next year or so. This can only be a good thing.

Surely Google Maps is not the only service that can spot your location. SpyMeSat mobile app offers on-demand access to satellite imagery archives thanks to satellites that take photos of any possible location.

Leave a Reply