Google Maps API - The Google Maps API in the Real World

Started by ganeshbala, Apr 18, 2008, 10:01 PM

Previous topic - Next topic
Go Down Pages1

ganeshbala

Apr 18, 2008, 10:01 PM
Google Maps API - The Google Maps API in the Real World

will build a small application that displays a map using the Google Maps API. It does the following:

   1. Displays the map with Shimla (India) as its center.
   2. Provides zoom and pan controls for navigation.
   3. Provides a map type control to change between the three map types.
   4. Handles the click event and display information window showing the current focus point upon a click on the map.

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&amp;v=2&amp;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="[url]http://maps.google.com/maps?[/url%]
file=api&amp;v=2&amp;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="[url]http://maps.google.com/maps?[/url%]
file=api&amp;v=2&amp;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="[url]http://maps.google.com/maps?[/url%]
file=api&amp;v=2&amp;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);

               GEvent.addListener(map,"click", function(){
                 map.openInfoWindow(map.getCenter(),
document.createTextNode(map.getCenter()));
               }
               );
             }

           }
</head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

That completes the application.
Go Up Pages1