Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Animated Markers

From API v2.59, the API supports animated GIFs as markers in all browsers

The techniques described on the rest of this page are no longer necessary

You may have noticed that the API accepts GIF images as markers, but that animated GIF icons don't work in IE. This is because the API loads the marker image with the "DXImageTransform.Microsoft.AlphaImageLoader" filter under IE, so that transparent PNG files are displayed correctly, and that filter doesn't handle animated GIFs.

This example shows three strategies for animating a marker.

The main v1 methods are no longer possible, so the only possibility is to use a third party extension.

The example shows three implementations of clickable animated markers using third party extensions. From left to right:

  1. Pure TLabel
    The contents of the TLabel are an animated GIF.
    addDomListener() is used on the TLabel div to catch mouse clicks and open an info window.
     
  2. TLabel plus GMarker
    The contents of the TLabel are an animated GIF.
    An invisible GMarker is plotted at the same location. The GMarker mouse target goes above the TLabel to catch the clicks and the GMarker shadow goes underneath.
     
  3. ELabel plus GMarker
    The contents of the ELabel are an animated GIF.
    An invisible GMarker is plotted at the same location. The GMarker mouse target goes above the ELabel to catch the clicks and the GMarker shadow goes underneath.
     
    ELabels overlap intelligently when the "overlap" property is set.
Back to Mike's Homepage
Up to the start of this tutorial