Archive for February, 2008

Google Maps: Many Markers Slow in IE6

February 1, 2008

Synopsis: Detect IE 6 in script and use GIFs for custom marker images instead of PNGs.

Working on implementing a Google Maps-based search that updates markers as you zoom or pan: Interactively placing and removing more than 50 markers (custom ones or the default) on a Google map using their API makes Internet Explorer 6 grind to a halt–even on a fast computer. Some have identified a caching problem, but even if that’s solved, your visitors will probably experience an awful slowness rendering lots of markers, if they use IE 6. It turns out that this has to do with how the PNG-format-based markers are displayed by Internet Explorer: Google Maps uses the “filter/AlphaImageLoader” hack, since PNGs are not directly supported by that browser. Any other browser renders several hundred markers just fine (and fast). The AlphaImageLoader filter is apparently putting a serious damper on IE’s rendering performance.

The “Workaround”

The only way to not to use PNGs for map markers is, well, not to use them. The following discussion assumes that you know how to create custom map markers. I highly suggest not using icon shadows, because avoiding them cuts the number of transparent images to “paint” in half, which is going to help all browsers. For IE6, we simply select a GIF image instead of a PNG. The entire custom marker definition could thus look like this (JavaScript fragment):

// one way to detect IE6 and IE6 only
var is_ie6 = (
	window.external &&
	typeof window.XMLHttpRequest == "undefined"

// define custom marker
base_icon = new GIcon();
base_icon.image = is_ie6 ?
	"/media/images/map_icon_ie6.gif" :
base_icon.transparent = null; // don't use transparency mask
base_icon.shadow = null; // don't use shadow image
base_icon.iconSize = new GSize(16, 15); // icon size matches image
base_icon.shadowSize = null; // self-explanatory
base_icon.iconAnchor = new GPoint(8, 7); // *center* of the icon
base_icon.infoWindowAnchor = new GPoint(8, 7);
base_icon.infoShadowAnchor = null;
// this marker can now be placed on the map
marker_options = { icon:base_icon };
marker = new GMarker(new GLatLng(_lat, _lng), marker_options);

One place to see this in action is on the map search for LamongeRE (which is now defunct).