252 Part III — Google Map Hacks
HTML Wrapper
The HTML for the application obviously provides the visual interface to the main components
of the application, including the encapsulation of the main Google Maps window:
<!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 13, Ex 1</title>
<script src=”http://maps.google.com/maps?file=api&v=1&key=XXX”
type=”text/javascript”>
</script><script type=”text/javascript”>
...
</script>
</head>
<body onload=”onLoad()”><div id=”map” style=”width: 800px; height: 600px”></div>
<table width=”100%” cellspacing=”5” cellpading=”0” border=”0”>
<tr valign=”top”>
<td width=”33%”><h3>Controls</h3>
<a href=”#” onClick=”newroute()”>New route</a><br/>
<a href=”#” onClick=”startRoute()”>Start recording route</a><br/>
<a href=”#” onClick=”endRoute()”>Stop recording route</a><br/>
<a href=”#” onClick=”clearLastPoint()”>Clear last point</a><br/>
<a href=”#” onClick=”clearRoute()”>Clear current route</a><br/>
<a href=”#” onClick=”showroutelist()”>List saved routes</a><br/>
<a href=”#” onClick=”delroute()”>Delete current route</a></td><td width=”33%”><h3><div id=”message”>Messages</div></h3>
<div id=”infopanel”></div></td>
<td width=”33%”><h3>Route information</h3>
<input type=”hidden” id=”routeid” value=”0” size=”10”>
<b>Name</b><br/> <input type=text id=”routetitle” size=”40”/><br/>
<b>Description</b><br/> <textarea id=”routedesc” rows=10 ;
cols=40></textarea><br/>
<a href=”#” onClick=”saveroute()”>Save route</a></td>
</tr>
</table>
</body>
</html>The HTML is used to create a four-panel layout. The main panel at the top is the one used to
hold the Google Map. The table at the bottom holds three columns of equal width. The first
holds the links that control the application, a space for a message, and the current route record-
ing status. The middle panel is a generic information window, used to hold items such as the
list of existing routes. The last panel holds a simple form used to hold route details for use
when saving and editing routes.You can see a sample of the layout in Figure 13-1, showing the application in its initial state.