236 Part III — Google Map Hacks
The HTML Interface
Finally, here is the HTML that contains the map, links, and input box for controlling and
overlaying information and entities on the map. The layout is similar to previous examples; the
map is on the left and the control interface is on the right:
</script>
</head>
<body onload=”onLoad()”>
<table cellspacing=”15” cellpadding=”0” border=”0”>
<tr valign=”top”>
<td><div id=”map” style=”width: 800px; height: 600px”></div></td>
<td><h1>Overlay Selection</h1><div id=”selections”></div>
<form action=”#”><b>Entity title</b>: ;
<input type=”text” size=”20” id=”entityname”></form><br/>
<a href=”#” onClick=”addpoint(‘vase’)”>Add Vase</a> | ;
<a href=”#” onClick=”hidepoints(objectfinds)”>Hide Vase</a> ;
| <a href=”#” onClick=”showpoints(objectfinds)”>Show Vases</a><br/>
<a href=”#” onClick=”addpoint(‘object’)”>Add Object</a> | ;
<a href=”#” onClick=”hidepoints(objectfinds)”>Hide Objects</a> ;
| <a href=”#” onClick=”showpoints(objectfinds)”>Show Objects</a><br/>
<a href=”#” onClick=”addpoint(‘trench’)”>Add Trench</a> ;
| <a href=”#” onClick=”hidepoints(trenchs)”> ;
Hide Trenchs</a> | <a href=”#” onClick=”showpoints(trenchs)”> ;
Show Trenchs</a><br/>
<a href=”#” onClick=”addpoint(‘ruin’)”>Add Ruin</a> | ;
<a href=”#” onClick=”hidepoints(ruins)”>Hide Ruins</a> | ;
<a href=”#” onClick=”showpoints(ruins)”>Show Ruins</a><br/>
</td>
<td><h1>Map Control</h1><div id=”mapcontrols”></div></td>
</tr>
</table>
</body>
</html>The Application in Use
The application starts out with a blank map, waiting for the user to click a point and create a
suitable label, as shown in Figure 12-3.Clicking a point and then clicking the Add Vase link creates a vase label on the map. Two have
been generated in Figure 12-4.Other elements can be added to the map accordingly. Figure 12-5 shows a variety of different
entities added to the map.You can see that the labels are created and even overlap, but the opacity, set at 50 percent, helps
to make the elements on the map more readable. This is one of the reasons why the system also
includes the facility to hide groups of objects, as shown in Figure 12-6, where the vases have
been hidden from the map.