Introducing the Google Maps API - The Google Maps API in the Real World
(Page 4 of 4 )
Now I will build a small application that displays a map using the Google Maps API. It does the following:
Displays the map with Shimla (India) as its center.
Provides zoom and pan controls for navigation.
Provides a map type control to change between the three map types.
Handles the click event and display information window showing the current focus point upon a click on the map.
So let's get going. First the HTML setup:
<!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>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
The onload handler calls the load function which is as follows:
<!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>
<script src=http://maps.google.com/maps?file=api&v=2&key=[yourkey] type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
Place the key you received in place of [yourkey]. This sets up the link to the Google Maps API and declares the load function. Next comes creating the map instance and setting the center.
<!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>
<script src="http://maps.google.com/maps?
file=api&v=2&key=[yourkey]" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById
("map"));
map.setCenter(new GLatLng(31.122027,
77.111664), 13);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
Next we add the controls:
<!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>
<script src="http://maps.google.com/maps?
file=api&v=2&key=[yourkey]" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById
("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(31.122027, 77.111664),
13);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
The controls have to be added before setting the center. The last part is to handle the click event and show the current focus point on an information 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>
<script src="http://maps.google.com/maps?
file=api&v=2&key=[yourkey]" type="text/javascript">
</script>
<script type="text/javascript">
//<
