Google Maps API

Google Maps has rapidly become the Internet's favorite online tool. So useful and popular, that many people have reverse-engineered Google's magic for their own purposes.

Google Maps is a service, but with the release of the official Google Maps API it's become more than that. On the face of it, Google Maps seems fairly simple. Type in an address and that area of the World is displayed on a map.


a draggable area displaying a map or satellite view
pushpins indicating a location, usually clickable
coloured lines indicating a path
Info Window
a cartoon-balloon message, usually in response to a marker click
Map Controls
may include zoom, pan, center and map type (map or satellite)


drag the map to view more
Map Type
switch between map and satellite views
type in a location to get a map centered on that area
general searches: "great sushi in New York", or "pizza"
driving directions between two locations can be produced
both map types can be viewed at various resolutions
Public API
documented routines show how to use on your web page

1. Google Maps service only, not available with Google Maps API.


Using the Google Maps site is fairly straight-forward, additional instructions are available. Using the Google Maps API for your own site requires signing up for a Google Maps API Key, more details can be found at the Google Map API site.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="">
    <title>Google Maps JavaScript API Example - simple</title>
    <script src=""
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">

    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.441944,-122.141944), 13);



a warning is shown if the key does not match the url
Close DIV
put your javascript after the map /div or use onload
Info Window
displays detail on clicked marker, may cause map scrolling
Map Size
large maps will take more time to load
the more markers, the longer the load time
are slow on browsers other than Explorer (at present)


Google will add advertising sometime in the future
Info Window
is a speedier replacement in the works?
how can user choose and click one from a cluster?


A Microsoft update of Internet Explorer has stopped Google Maps working for some people. When this happens, a gray rectangle appears where the map should be. This discussion covers what can happen, and steps to correct this issue. Systems with a proxy software installed may need to be bypassed for Google Maps to work.

The Google Map service approach provides a text list of the marker on the map. Clicking on one of these items brings up an info window tied to a marker. Unfortunately, most sites using the API do not include a list. How can user choose and click one marker from a cluster? It's basically a list of unlabeled links. PdMarker, a JavaScript library from Pixel Development, addresses these problems with hover effects such as marker graphic changes, and tooltips.

As mentioned above, Info Window can cover a good portion of your map and even force it to scroll. Another option would be to avoid using Info Window, moving the text and graphics from the Info Window to another area of the page. The page will respond quicker and the map won't move.

Google Map scripts won't work unless the API key matches the page's directory. For quicker development, define a second API key using a directory along the lines of http://localhost/mysite.


Pixel Development's JS library providing advanced GMap features
Virtual Google Earth
Explore the World, create maps (this site)
Photographs linked to a Google Map (this site)
Google Maps
Google's online map service
Been Mapped
list of interesting Google Maps locations
Maps Mania
blog about Google Maps
wikipedia article
Overlayed Maps
transparent overlayed maps
Find Housing
Find an apartment using Craig's List & Google Maps
blog of interesting finds
Google Moon
honoring the first manned Moon landing
What's Next?
blog on the future of mapping services