Google Maps API: Do The Mapster Mash

Javascript API brings customizable map content and cartographic personal experssion to web designers everywhere

1320051108PDXGooglemap.jpgA Google Map rendered in the author’s web space, which went up in just a few minutes thanks to the Google Maps API

In early October, Googleâ„¢, no stranger to innovation and buzz, made the applications programming interface (API) to its Google Maps service free and available to the public for the very first time. Since then, even though it’s officially beta, it’s swept the country (and parts of the world).

What the Google Maps API provides is direct access to all the features Google Maps provides–zooming, positioning, display, control, and information–at the hands of anyone who takes the time to learn the API. The illustration accompanying (viewable on the author’s public webspace here (view opens in a new window))

How and Where

The Google Maps API allows web designers to embed Google Maps in thier pages, but that’s not all; the API allows the addtion of markers, info windows, polylines, icons, and other informational layers, delivering into the hands of the designer complete and comprehensive customization. It’s in Javascript, and Google recommends standards-compliant XHTML (with the DOCTYPE tag) for best compatiblity across browsers.

To start, one must obtain a free Google Maps key from the Google Maps API website ( The key is a randomly generated character string which identifies the URI–in this case, the directory where the web code resides–to Google Maps, enabling the API to be used there (note that one must get a Google Account to use this service, as the map key is linked to the Account).

Once the key is generated, all that’s required for a designer to access the API is to embed it in the following tag:

<script src=”” type=”text/javascript”></script>

replacing the “abcdefg” after the “key=” with the map key Google provided.

Actual maps are generated by then embedding API script in the html file. The heart of the example given in the Google API online Documentation uses the following command to draw a 300 x 300 pixel centered on Palo Alto at approximately the intersection of El Camino Real and Embarcadero Road, at a zoom factor of 4:

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById(“map”));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

All that’s required to recenter the map is to change the latitude and longitude in the “map.centerAndZoom” command. Here it’s 122.141944 degress west, 37.441944 north, about the center of Palo Alto. For my Portland display, all that was needed was to alter those numbers to -122.68 and 45.5, respectively. The resulting map can be panned about with the same impugnity that any other Google map can be. To add the ubiquitous control buttons, the map.AddControl command is used.

All this is documented in the highly excellent API Online Documentation, which is best read from the front on in. It starts with the very basics and builds up gradually. Absolute beginners and those who are unfamiliar with the process of coding may find thier eyes glazing over, but the API should be understandable after a little study by anybody who has written HTML by hand or can understand code, and the path to getting a basic map embedded can be less than 15 minutes for the moderately code-savvy. It even includes cut and paste boilerplate code, so the curious of any stripe could put something up right away (as I did).

Why? Do the Mapster Mash

The extensive customizability of content provided by the API has opened up a world of creativity to the web designer who learns its ways. Almost anything, that comes in database form can be customized to be displayed on a Google Map one can embed in thier web page.

They available on subjects that range from the sublime to the gross, and they are called mashups. Essentially what mashup means is to take base content, add your own information, mash them together, and–voilá–the resulting display is an informative masterpiece. Or, at least entertaining.

The mashup mob even has a blog devoted to making them all easy to find. From the unofficial Google Mashup directory Google Maps Mania (link opens in a new window) one can find informational bonanzas, including:

This list merely scratches the surface.

The Google Maps API has made the online map accessable to anyone with the sufficient drive (and perhaps, in some cases, insanity) to present wide, wonderful, and sometimes wierd, content, limited only by the imagination.

What would you put on a map, if you could?