Pixel Development - Google Maps

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.

Parts

Map: a draggable area displaying a map or satellite view
Marker: pushpins indicating a location, usually clickable
Polylines: 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)

Features

Draggable: drag the map to view more
Map Type: switch between map and satellite views
Locate1: type in a location to get a map centered on that area
Search1: general searches: "great sushi in New York", or "pizza"
Directions1: driving directions between two locations can be produced
Zoom: 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.

How?

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.

Example

<!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>
    <title>Google Maps JavaScript API Example - simple</title>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=abcdefg"
      type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 300px; height: 300px"></div>
    <script type="text/javascript">
    //<![CDATA[

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

    //]]>
    </script>
  </body>
</html>

Notes

API Key: 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
Markers: the more markers, the longer the load time
Polylines: are slow on browsers other than Explorer (at present)

Issues

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

Caveats

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.

Resources

PdMarker: Pixel Development's JS library providing advanced GMap features
Virtual Google Earth: Explore the World, create maps (this site)
Gallery: 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: wikipedia article
Overlayed Maps: transparent overlayed maps
Find Housing: Find an apartment using Craig's List & Google Maps
Sightseeing: blog of interesting finds
Google Moon: honoring the first manned Moon landing
What's Next?: blog on the future of mapping services