Google Maps API Tutorial

Translate this page:

GIcon.label

This feature allows you to build your icon from a background image plus a foreground label. Prior to the introduction of this feature, if you wanted to have markers with different letters and different background colours, you had to create a separate icon image for each combination.

There's an example here.
Observe the way that the marker background and label are fetched separately when the images are not in cache (use shift-reload to see the effect if the images are already in your cache).

The syntax is a bit weird. The GIcon.label is an object of unnamed class that must have the following properties:

url string The URL of the image to be used as a label.

anchor GLatLng() or GPoint() The position offset of the label image relative to the main image.

size GSize() The pixel size of the label image

If you use a GLatLng() for the anchor the parameters are (down, right), but if you use a GPoint() the parameters are (right, down).

The easiest way to set things up is to have the label be the same size as the icon image and set the anchor to GPoint(0,0), but it's more efficient to make the label smaller and use the size and anchor parameters to position it.

You can set the GIcon.label directly, like this

   var Icon = new GIcon();
   Icon.label = {"url":"overlay.png",
                 "anchor":new GPoint(4,4),
                 "size":new GSize(12,12)};

or you can use the new additional parameter of the GIcon() constructor, like this

   var mylabel = {"url":"overlay.png",
                  "anchor":new GPoint(4,4),
                  "size":new GSize(12,12)};
   var Icon = new GIcon(G_DEFAULT_ICON, "marker.png", mylabel);

Potential Pitfalls

Using a GIcon.label interferes with the click processing of markers that don't have a .transparent or .imageMap, because the label image would then be the top image in the stack. Therefore, if you use GIcon.label on a clickable label you must set up a .transparent and a .imageMap.

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