Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Using the ELabel extension

The ELabel extension is implemented as a Custom Overlay.

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.

The content of an ELabel can be as complex as you want. Here's an example of slightly more complex content.

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.

Markered Labels

If you try to place an ELabel alongside every marker, then you can get the the markers to overlap the markers sensibly and the labels to overlap the labels sensibly, but the labels and markers don't overlap each other sensibly.

What you can do is place an <img> of the marker inside the ELabel contents, so now the marker image and text acts as a single ELabel, and the intelligent overlapping works.

If you care about how the image looks in MSIE6, then you need to to add code to switch to using the AlphaImageLoader if the browser is MSIE. Or you could use a GIF image instead of a PNG.

If you want the markers to be clickable, then place an invisible GMarker at the same location. ELabels are not clickable, so the click drops through to the GMarker below it.

Here's an example.

Just for fun, I bump up the opacity of the label when the info window is open on the GMarker associated with it. You could do the same thing with mouseover and mouseout events on the GMarker.

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