Google Maps API Tutorial

© 2006, 2007 Mike Williams

 

Using the ELabel extension

The ELabel extension is implemented as a Custom Overlay, and therefore requires API v2.44.

ELabel allows you to place text labels or images or any other HTML elements on the map and have them move with the map, like marker and polyline overlays

Here's an example

In order to use ELabels you need to:

  1. Create CSS class styles for your labels. It is possible to run ELabels without them, but it's generally easier to use them.
  2. Include a copy of the "elabel.js" file. Please take your own local copy, don't hot link to my copy of the file.
  3. Create some ELabel objects.
  4. Use map.addOverlay() to add them to the map.

1. CSS Class Styles

Create CSS class styles for your ELabels to use. E.g.

    <style type="text/css">
    .style1 {background-color:#ffffff;font-weight:bold;border:2px #006699 solid;}
    </style>
You'll probably find it a lot easier to use pre-defined styles.
You'll usually want to include a background-color style setting, because the default is to have an invisible background.

2. Include a copy of the "elabel.js" file

Download it from here elabel.js

Include it like

    <script src="elabel.js" type="text/javascript"></script>

3. Create some ELabel objects

E.g. 
      var label = new ELabel(new GLatLng(44.3,-78.8), "Utopia", "style1");
The parameters are:
  1. a GLatLng() specifying the location.
  2. a html string to be used as the contents of the ELabel.
  3. (optional) a string containing a class name, corresponding to the class style you created in step 1.
  4. (optional) a GSize() specifying a pixel offset from the GLatLng(). Without this parameter, the bottom left corner of the ELabel will touch the location specified by the GLatLng
  5. (optional) an opacity percentage. If omitted, the ELabel will be 100% opaque.
  6. (optional) set this to true to cause ELabels to overlap intelligently. If omitted, the latest one to be addOverlay()ed will be on top.

4. Use map.addOverlay() to add them to the map.

And use map.removeOverlay() if you want to remove them.

map.clearOverlays() will also remove all the ELabels as well as any markers and polylines.

Notes

ELabels are placed above the markers and below the info window.

You can click markers that are underneath ELabels, even if the marker is 100% opaque.

You can click, double-click and drag parts of the map that are underneath ELabels.

You can use different style classes for different ELabels on the same map.

You don't need to keep a reference to your ELabels unless you want to removeOverlay() them or change their properties.

Manipulating ELabels

When an ELabel is not addOverlay()ed, you can change its properties directly. e.g.

    map.removeOverlay(label)
    label.pixelOffset=new GSize(20,10);
    map.addOverlay(label)
While a label is addOverlay()ed, the following methods can be used to modify its properties dynamically.
  • label.hide() : Makes the label invisible

  • label.show() : Makes the label visible if it was hidden

  • label.setContents(html) : changes the contents of the label.

  • label.setPoint(glatlng) : changes the location of the label.

  • label.setOpacity(number) : changes the opacity of the label.

Using ELabel with MarkerManager

ELabels work under the Open Source MarkerManager.

The Open Source MarkerManager can be obtained here http://code.google.com/p/gmaps-utility-library-dev/wiki/Libraries.

Now that the Open Source MarkerManager is available, I'm not going to be updating ELabels to work under new releases of the obfuscated GMarkerManager. The problem is that I need to know the internal name by which GMarkerManager requests the location of the overlays that it manages. MarkerManager uses overlay.getPoint(), but the obfuscated GMarkerManager changes the internal function name whenever the code is re-obfuscated.

MarkerManager can manage ELabels in the same way that it can manage GMarkers.

Here's an example that uses 1576 ELabels

Bugs

IE sometimes seems to return false information about the height of the ELabel contents. This causes the vertical positioning of the ELabel to be incorrect.

Updates

v0.2: 5 April 2006: ELabel.copy() fixed. The labels now get copied correctly into .showMapBlowup()'s.
(Thanks to "Jacob" for pointing out the problem)

v1.0: 7 April 2006: Lots of new methods added

v1.1: 31 Dec 2006: Works with GMarkerManager under API v2.67 to v2.71

v1.2: 25 Feb 2007: Works with GMarkerManager under API v2.67 to v2.75

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