Million Marker Map

Tricking out the Google Maps API

How It Works

The million-marker map is a sandwich of two Google maps with a Flash 9 filling. When you invoke the map constructor by calling the enhance() method on your Google map, the code automatically adds an EMBED object and a second Google map with transparent tiles to the page DOM, and positions them so they lie directly over the original map's container div:

    ________________
   /               /    <- Google map with transparent tiles
  /   - - - - - - /-
 /  /            / /
/_______________/ /     <- Flash 9 layer
  / . - - - - - -/--
 /______________/  /
  /               /     <- Original, visible Google map
 /_______________/
 

This two map architecture solves the problem of how to display Google map controls, markers and info windows on top of the Flash map layer while simultaneously displaying map tiles underneath it. It should be possible to build an identical widget using just a single Google map, but this would require a more intimate coupling between the Flash layer and the Google map layering structure and other internals.

The two Google maps are wired together so that the top map acts as a controller for the bottom one. Move and zoom events from the transparent top map invoke the corresponding behaviors in the bottom map.

Map events, along with some mouse events from the container div, are also sent to the intermediate Flash layer so that it can keep itself properly positioned and synchronized with the visible map layer below it.

When you add a regular Google map marker, map control, polyline or other GMap feature to the enhanced map, the feature is placed on the top map, so that elements will appear properly stacked on top of the Flash content.

Similarly, when you try to programatically pan or zoom the Google map, the call gets redirected to the top controller map, and the new map state propagates down to the other two layers just as it would if you had panned or moved the map by hand.

Flash Markers

The special square markers are displayed on the middle Flash layer. The Google map is unaware of their presence.

When you click on a marker, Flash performs a search to find which marker corresponds to that part of the map, and then triggers an event on the Google map instance with the id and latitude/longitude of the appropriate marker.

The number of markers you can place on a map is limited in practice by bitmap regeneration time, and how many lat/long pairs Flash can fit in memory.

Markers on the Flash layer change size and opacity depending on the zoom level and the total number of markers, to try to maximize visibility.

Special Overlays

The Million-Marker Map includes one special overlay, the New York City subway map, as an example of how vector data can be incorporated into this kind of map extension. The subway overlay is sensitive to zoom level - unlike other Flash subway overlay implementations, it won't scale to absurd widths at high zoom levels.

This overlay behaves as a simple static addition to the underlying Google map, reproducing the effect of a custom tile layer without the need to render and serve a large number of static map tiles.