Google Maps

From Supernifty
Jump to: navigation, search

Tips for developing Google Maps with a large number of markers.


Supernifty recently developed a Google Maps application, showing all medallists from the 2008 Beijing Olympics, a map with around 2000 markers.

Drawing more than around 500 markers is too much for many browsers, and the naive approach of simply giving all markers to the Google Maps application results in undesirable behaviour:

  • the browser slows to a crawl (Firefox) or crashes (IE)
  • random data points are not displayed

You need to take a proactive approach as the Google Maps application does not deal with the issues arising from a large number of markers.

Don't use GeoRSS. Use KML.

I like the idea of using a standard format for the marker data. This enables the data to potentially be used in other applications.

GeoRSS though, is not recommended. Google Maps provides no control over how your GeoRSS file is loaded, so you can't layer it appropriately.

KML is better because you have the option of using EGeoXML to write a handler as each marker is loaded. Also, KML files can be used on Google Earth.

Use EGeoXML to load your points

EGeoXML parses KML files and provides a callback as each point is loaded. This allows you to layer the points, which prevents the browser from having to load too many points at once.

Layer your points and cluster

The trick to keeping things running smoothly is not to show all points at once. This means clustering, which can be implemented with layers.

The idea is to go through all points in the KML, adding points to the first layer. But if a new point already has a nearby point in the first layer, add it to the second layer. (A Python script is available to do this)

This way the first layer provides a representative view, and the second layer shows the rest. You only show the second layer when the user is sufficiently zoomed in.

Using MarkerManager, you can make layers that are only shown at a particular zoom level.

Differentiate similar points

If you have markers that have the exact same co-ordinates, only one will show. Google are apparently working on this problem, but in the meantime, something needs to be done.

You need to go through that KML file and move apart any identical co-ordinates. A Python script is available to do this. Note: this script is for GeoRSS format.


Google Maps with a few markers is simple, quick and painless.

Google Maps with many markers is surprisingly fiddly. This document provides one solution to the associated issues.

Please let me know if you need more details.