Note: This software is no longer actively maintained and has several known issues. I hope that it still contains some good ideas that may help in your Google Maps projects.
TLabel allows you to embed any DOM object inside Google Maps. It's especially useful if you need to show an infoWindow but don't have enough content to fill it. A TLabel is only as large as it needs to be, and unlike the infoWindow, you can customize the look to your heart's content.
TLabel also enables you to define mouseover events for your map. Simply place a transparent label where you want the event, and handle the onmouseover event of your TLabel.
Download
Changelog
Usage
Example
Reference
Browser Support
Live Examples
FAQ
Contact
Legal
Download the tlabel.2.05.js file, place it on your server, and include it after you include the Google Maps API in your javascript. This server is, on very rare occasions, not available, so I recommend you don't include the file from here.
Warning! Version 2 of TLabel is not compatible with version 1 of Google Maps. When using TLabel v2, you must change the 'v=1' string to 'v=2' in the URL that calls the Google Maps API code into your page. As Google Maps v2 is still in testing, TLabel 2.0 is subject to change as the API code evolves.
There is no change in the way you use TLabel from v1 to v2. All changes are updates for compatibility with Google Maps v2.
| Version | Changes |
|---|---|
| 2.05 | Bugfix. Thanks to Tom Dvorak for spotting the problem. |
| 2.04 | Bugfix. Thanks to Chris Smith for spotting the problem. |
| 2.03 | Removed support for GMap() object. GMap2() is now required. |
| Modified some internals to use documented GMap methods. | |
| Removed TLabel branding from map. Please provide a link to this page when and where it's convenient for you. | |
| 2.01 | Added support for GMap2() object. Many thanks to Mike Williams for spot-on suggestions. |
| Changed documentation to suggest GLatLng points instead of GPoint points where appropriate. Either still works. | |
| 2.00 | Removed support for harder technique of defining only one anchor Lat/Lng. |
Constructor Description TLabel() Creates a new label instance. Takes no parameters.
The extension adds two methods to the GMap object:
GMap Method Description addTLabel(label) Adds the given label to the map. removeTLabel(label) Removes the given label from the map.
...and two externally useful TLabel methods:
Method Description setPosition(point) Sets the longitude and latitude of the label's anchor point. Takes a GLatLng object. (usage of GPoint objects for Lat/Lng is deprecated, but still works.) setOpacity(percentOpacity) Sets the desired opacity of the embedded image. percentOpacity is a number between 0 and 100 inclusive.
Property Description id (required) Specifies an id for the label element. This id must be unique for each label you embed. The id is exposed to the DOM, so you can dynamically adjust its style if you choose. anchorLatLng (required) The longitude and latitude where the anchorPoint will be pinned to the map. Takes a GLatLng object. (usage of GPoint objects for Lat/Lng is deprecated, but still works.) anchorPoint The point in your label object that will be pinned to anchorLatLng. anchorPoint accepts the following values: topLeft, topCenter, topRight, midRight, bottomRight, bottomCenter, bottomLeft, midLeft, or center. Default topLeft. markerOffset The (x,y) offset from anchorLatLng to account for marker size. Takes a GSize object. Default (0,0). content (required) The XHTML code defining the element you wish to embed. percentOpacity A number between 0 and 100 inclusive determining the opacity of the TLabel. Default 100.
The extension works in Windows IE6 and Firefox. I don't have other browsers or operating systems to test on, but there are reports that it works in the latest Opera as well.
Spacecraft Tracking uses TLabel to embed a transparent label which allows onmouseover events.
gFeedMap shows a blogger's location, along with neighboring blogs.
Q: How do I open a TLabel over a marker?
Just define it inside the 'click' event
while you're defining the marker. Unlike openInfoWindow, you still have to define anchorLatLng (just use the
same point variable you fed to the marker). The TLabel.markerOffset property can be used to move the anchorPoint
around, so if you want a label pointing at the side of the marker, you can do it.
Q: Where's the close button?
Remember that you are in charge of everything
that appears in the label, from the border to the background to the contents to the pointy bit. If you want a close button,
you'll have to make one and link it to the GMap.removeTLabel method.
Q: There's an error in TLabel / Can you help me implement TLabel?
The TLabel extension has not been maintained in
several years, so if you've read it recently, you know it better than I do. I have not kept up with the
development of the API, so I will likely be unable to help you.
Email: tmangan via gmail.com. Feedback is appreciated.
The TLabel extension and this documentation are copyright ©2005-2006 by Tom Mangan. Neither the extension nor this documentation is affiliated with Google.