Google Maps API Tutorial

© 2008, 2009 Mike Williams

 
Translate this page:

 

Icon Sprites

  This undocumented feature can be used to improve the page loading time in situations where you use several different custom icons.

On the left is a single image file that contains ten icon images. GIcon.sprite allows the individual icon images to be cropped out from that image and used as marker icons.

Here's an example

The syntax looks like this:

   var myicon = new GIcon();
   myicon.sprite = {image:"sprites.png", width:20, height:34, top:68, left:0}
  • image: the URL of the sprite file. Countermands any existing .image setting.
  • width: the width of the icon. Ignored if the icon already has a .iconSize setting.
  • height: the height of the icon. Ignored if the icon already has a .iconSize setting.
  • top: the vertical pixel position within the sprite file where this icon image starts.
  • left: (optional) the horizontal pixel position within the sprite file where this icon image starts.
It is possible to have sprites of different sizes in the same sprite file.

It is possible to use 2D arrays of icon images since v2.141, using "top" and "left" to specify the position.

Thanks to "Esa" for spotting the details of this feature.


 
Back to Mike's Homepage
Up to the start of this tutorial