Google Maps API Tutorial© 2006, 2007, 2008, 2009 Mike Williams |
Translate this page: |
Using the ELabel extensionThe 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. CSS Class StylesCreate 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" fileDownload it from here elabel.jsInclude it like <script src="elabel.js" type="text/javascript"></script> 3. Create some ELabel objectsE.g.var label = new ELabel(new GLatLng(44.3,-78.8), "Utopia", "style1");The parameters are:
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. NotesELabels 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 ELabelsWhen 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.
Using ELabel with MarkerManagerELabels 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 LabelsIf 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. BugsIE sometimes seems to return false information about the height of the ELabel contents. This causes the vertical positioning of the ELabel to be incorrect.Updatesv0.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 |