Hack 54. Add a Nicer Info Window to Your Map with TLabel

Callouts, info windowsanything that can fit on a web pagecan fit on a map.

The early Google Maps hacks share a similar affliction: they suffer from red pushpin syndrome. Sometimes the pushpins are green. You can create custom icons, but they are a bit of a challenge, and then you just get a different little symbol.

What you (might) want is the ability to customize the map with unique info windows, images, callouts, and anything else that strikes your fancy. Tom Mangan created the TLabel extension to allow you to embed any DOM object (anything that can appear on a web page) on a Google Map. Figure 6-8 shows Tom's canonical example from the TLabel page at http://gmaps.tommangan.us/tlabel.html, with a Google satellite image of two U.S.

Air Force SR-71 Blackbirds and a U-2 spy plane at the Blackbird Air Park, in Palmdale, CA. (For the curious, this is at 34.602975 N, 118.085926 W.)

Figure 6-8. SR-71s at the Blackbird Air Park, with TLabel annotations

Callouts identify each plane. The numbers are links to sites that have more information on each plane. There is also a thumbnail image that was taken from ground level. The image has a tool tip that reads "Click for larger." Surprisingly, clicking on that link leads to a larger image of that thumbnail.

6.5.1. Using TLabel

The TLabel page is at http://gmaps.tommangan.us/tlabel.html. There is a link to a JavaScript file, currently http://gmaps.tommangan.us/tlabel.19.js, but check for the current version. Copy that file onto your own server and include it after you include the Google Maps API.

Now, create some objects! You control the TLabel object by creating a new object and then setting the properties. There is a demo of some TLabel tricks at http://mappinghacks.com/projects/gmaps/brc_tlabel.html. Here is code to create a label, as shown in Figure 6-9:

	var label = new TLabel();
	label.id = 'mail_box';
	label.anchorLatLng = new GPoint (-119.226396, 40.768080);
	label.anchorPoint = 'bottomLeft';
	label.content = 'Mail Box';
	label.percentOpacity = 85;
	map.addTLabel(label);

Figure 6-9. Black Rock City, annotated with TLabels

First, the code declares the variable named label to hold the newly created TLabel object. Next, we set the id of the TLabel. The id is vital! It must be unique. It is easy, and catastrophic, to end up with a duplicate label (where catastrophic means it doesn't work). The anchorLatLng is a GPoint object, i.e., the location where this object is anchored to the earth. The anchorPoint defines which part of the content will touch the anchor lat and long.

In this case, bottomLeft means that the bottom-left corner of our marker hits the point in the anchorLatLng. The choices are topLeft, topCenter, topRight, midRight, bottomRight, bottomCenter, bottomLeft, midLeft, or center. The default is topLeft. The content can be anything that can fit on a web page! In this case, we use the words "Mail Box." Table 6-1 summarizes these properties.

Once you have created the TLabel object and set the properties, there are four useful methods: add the object to your map with map.addTLabel(label), remove it with map.removeTLabel(label), move it around with label.setPosition(GPoint), or change its opacity (100% means you can't see through it at all) with label.setOpacity(percentage).

Table 6-1. Useful properties of the TLabel object

Property	Description
id	Specifies an ID for the label object. This ID is required and must be unique for each label you embed. The ID is exposed to the DOM, so you can dynamically adjust the label's style if you choose.
anchorLatLng	The longitude and latitude where the anchorPoint will be pinned to the map. Takes a GPoint object.
anchorPoint	The point on your embedded object that will be pinned to anchorLatLng. anchorPoint accepts the following values: topLeft, topCenter, topRight, midRight, bottomRight, bottomCenter, bottomLeft, midLeft, and center. The default is topLeft.
content	The XHTML code defining the element you wish to embed.
percentOpacity	A number between 0 and 100 inclusive, determining the opacity of the image. Default is 100, i.e., completely opaque.

You can replace the content with something more elaborate. This implements an onMouseOver event; so moving the mouse over the image pops up more information (i.e., a tool tip).

	label.content = '';

It is all a question of controlling what is in the content variable. You can put the whole thing into one string or split it across lines. If you split it, you need to remember to terminate each line of a multiline section with a quote or you'll get an "unterminated string literal" message.

Check out Tom's site at http://gmaps.tommangan.us/ for more nifty hacks.

written with assistance from Tom Mangan