242 Part III — Google Map Hacks
return;
}
if (newopacity > 100) {
return;
}
photo.setOpacity(newopacity);
opacity = newopacity;
}Finally, the HTML for the application interface provides a very simple way of changing the
map type and the opacity of the overlay:
</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>New Office Grand Plan</h1><div id=”message”> ;
Click Map for Info</div><br/>
<h1>Overlay Control</h1><a href=”#” onClick=”changeopacity(-10);”> ;
Reduce overlay</a> | <a href=”#” onClick=”changeopacity(10);” ;
>Increase overlay</a><br/>
<a href=”#” onClick=”map.setMapType(G_MAP_TYPE)”>Show Map</a> | ;
<a href=”#” onClick=”map.setMapType(G_SATELLITE_TYPE)”>Show Satellite</a> ;
| <a href=”#” onClick=”map.setMapType(G_HYBRID_TYPE)”> ;
Show Hybrid</a></td>
</tr>
</table>
</body>
</html>The initial application is shown in Figure 12-8.The TPhotoextension handles the positioning and zooming of the overlay onto the map.
Because the overlay is linked to specific latitude/longitude points, zooming out or moving the
map will move the overlay accordingly. You can see the effects in Figure 12-9.The overlay is also visible over any map type. For clarity, map type buttons have not been
added to the map itself. Instead a suite of external buttons controls the interface. Figure 12-10
shows the map and overlay, this time on the basic map instead of the satellite images.There are some problems with this map from the perspective of information. There are allo-
cated blocks on the map, but there is no information on what they are.TLabels of GMarkers
could be used to highlight the different areas. Instead, a solution that involves the map provid-
ing you with information and parsing it, rather than the other way around, offers a little more
flexibility.