232 Part III — Google Map Hacks
However, the effect is more dramatic. An embedded image in a TLabelworks in the same
way as a text label, even using the same arrow structure. The effect is a simpler and cleaner way
of highlighting items on a map without going to the trouble of using the full GIconobject or
having to worry about developing an icon that has practical points for anchoring the image to
the map.Returning to the original goals outlined at the beginning of this chapter, using a photo or
image in this way can be a useful way of highlighting an object. For example, you can use a
picture of the object found at a location and accentuate it by embedding some text. Both text
and images can be used in an archaeological application for highlighting different elements
on a map.Building a TLabel Application
The sample application provides a very simple way for the user to highlight different items
on the map from an archaeological perspective. The interface is simple and straightforward —
the user clicks the map and then clicks a link to add an appropriate object, creating a TLabel
in the process. A number of different TLabels are available, including some basic user-
generated text labels and an image type that projects an image of a vase over a particular
location.The whole system works through an event handler that records the position when the user
clicks the map. When the user then chooses to create a point, the recorded map point is used as
the basis for the anchor point.In addition, you record all the points placed onto the map so that you can later hide and show
individual object groups. This will enable the user to control the interaction between different
objects placed onto the map.The preamble is the same as usual:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8”/><title>MCslp Maps Chapter 12, Ex 1</title>
<script src=”http://maps.google.com/maps?file=api&v=1&key=XXX”
type=”text/javascript”>
</script>
<script src=”tlabel.10.js” type=”text/javascript”></script>
<script type=”text/javascript”>For global variables, you need arrays to record the TLabels placed onto the map, the location
of the last clicked point, and the panels used to store and display information:
var map;
var index = 0;
var selpanel;