Hacking Google Maps and Google Earth (ExtremeTech)

230 Part III — Google Map Hacks

Table 12-1 (continued)

Property Required Description

anchorPoint No The point on the label that will be used as the

reference point for pinning the label to the map.

Possible values are topLeft, topCenter,

topRight, midRight, bottomRight,

bottomCenter, bottomLeft, midLeft,

or center. The default value is topLeft,

meaning the top-left corner of the label will be

pinned to the lat/long on the map.

markerOffset No The offset (using a GSizeobject) of the label in

relation to a GMarkerobject, if you are using a

GMarkerand TLabelobject together.

content Yes The XHTML code that will be displayed within

the label.

percentOpacity No The starting opacity for the label, using a

number from 0 (completely transparent) to 100

(completely opaque). You can separately set this

value using the setOpacity()method to the

TLabelobject.

For example, you can create a simple TLabelusing the following code:

var label = new TLabel();

label.id = ‘label’;

label.anchorLatLng = lastpoint;

label.anchorPoint = ‘topRight’;

label.content = ‘<div>Content</div>’;

label.percentOpacity = 50;

It is generally a good idea to be specific about the style of the text (using standard XHTML

markup) that you use in the contentproperty, particularly with respect to the background

color (which sets the color of the label) and the size of the font, which affects the appearance

of the label, especially when combined with an arrow pointer.

Adding an Arrow Pointer

By default, a TLabelis just a bare box with XHTML contents. You will probably want to add

an arrow that links the lat/lng point that you are using to the label itself. To do this, you need

to create the arrow and then use the XHTML to incorporate the image and offset the image

from the rest of the text as a background image. Figure 12-2 demonstrates this process in

more detail.