Wavfact / ELabel

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.

ELabel.js for Google Maps API V3

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.

Use

new ELabel({
latlng: new google.maps.LatLng(41.700346,-86.238899),
label: “Foo”,
classname: “labelclass”,
offset: 0,
opacity: 100,
overlap: true,
clicktarget: false
});

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.
3. Create some ELabel objects and add them to the map.

Styles

I’m using the following:

.label {font-size:9px; text-align:center; color:#222; text-shadow:0 0 5px #fff; font-family:Helvetica, Arial, sans-serif;}

Include the script

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

Create some ELabel objects

  var label = new ELabel(new google.maps.LatLng(41.700346,-86.238899), "My Custom Label", "label");
  label.setMap(map);

The parameters are:

1. a LatLng() 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.

Changelog

• v3.0.2 (2010-12-08)
  • ADD: Add target object (clicktarget) when clicking on the label (checks for and requires jQuery)
• v3.0.1 (2010-12-08)
  • CHANGE: Change passed-in parameters an object
• v3.0.0 (2010-11-31)
  • FIX: Re-write for Google Maps v3

Original ELabel Attribution

This Javascript was originally provided by Mike Williams
Community Church Javascript Team
http://www.bisphamchurch.org.uk/
http://econym.org.uk/gmap/
http://econym.org.uk/gmap/elabel.htm

This work is licenced under a Creative Commons Licence
http://creativecommons.org/licenses/by/2.0/uk/

Version 0.2 the .copy() parameters were wrong
version 1.0 added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
version 1.1 Works with GMarkerManager in v2.67, v2.68, v2.69, v2.70 and v2.71
version 1.2 Works with GMarkerManager in v2.72, v2.73, v2.74 and v2.75
version 1.3 add .isHidden()
version 1.4 permit .hide and .show to be used before addOverlay()
version 1.5 fix positioning bug while label is hidden
version 1.6 added .supportsHide()
version 1.7 fix .supportsHide()
version 1.8 remove the old GMarkerManager support due to clashes with v2.143