A client who sells real estate wanted us to add interactive maps to his web site to showcase his listings. We immediately thought of using Google Maps. This seemed to be a good choice because it's free and popular. But for how long? Or what if Google decides to add advertisements on its maps? Of course, our client could always switch to another map provider, Yahoo Maps or Microsoft Virtual Earth, for instance, but at what cost?

Because Google, Yahoo, and Microsoft come with similar features, it occurred to us that a "portable" layer would let a web site switch from one map provider to another with a minimum change to source code. This is what I discuss in this article.

Most web sites that support interactive maps have similar features. If we want our portable layer to handle them, it should be able to:

• Create maps. A map is an image in an HTML page. All providers use the HTML SPAN tag and provide some JavaScript functions to initialize the content of this tag with a map.
• Set map modes. All map providers support at least three display modes: map (roads only), satellite (satellite imagery), or mixed (two previous modes combined).
• Set a position on the map. We need a method to show a specific position on the map. The map is centered on that position.
• Zoom in/out.
• Add/remove markers. The main interest in using interactive maps is to see one or several items' location. A marker is an icon that you place on the map for this purpose.
• Geocoding. Locations are usually stored as postal addresses. To place markers for those locations on a map, we need their coordinates (latitude/longitude). Converting a postal address to latitude/longitude coordinates is exactly what "geocoding" does.
• Display marker information. Clicking on markers should display some detailed information in a tooltip (customer details, a link to a given page, and so on).
• Delete maps. Map resources should be freed before unloading the page.

MyMap

MyMap is the portable API I created to display maps in a web site with either Google Maps, Yahoo Maps, or Microsoft Virtual Earth. Here is the pseudointerface of this API in JavaScript. Each function matches one of the aforementioned features.

void MyMapGeocode(address, callback);
void MyMapInitialize
    (mapname, lat, lng, zoom, mode);
Object MyMapAddMarker
    (lat, lng, markertype, info);
void MyMapRemoveMarker(marker);
void MyMapSetZoom(zoom);
void MyMapGoto(lat, lng);
void MyMapTerminate();

Table 1 shows the provider-specific object to use and the methods to call for each feature.

I've implemented this interface for each provider in the respective files mymap_google.js, mymap_yahoo.js, and mymap_vearth.js. (These files are available electronically; see "Resource Center," page 5). Your web application needs to include the appropriate file depending on your map provider.