Home arrow Web Authoring arrow Page 4 - Introducing the Google Maps API
WEB AUTHORING

Introducing the Google Maps API


Maps are becoming ubiquitous in web applications. They are being used as an effective and non-intrusive way of gathering geo-specific data from the user or to present geo-specific information to the user -- for example, for tracking reports of shipments. However even two years ago, embedding a map within an application was a specialized area that required a good understanding of Geographical Information Systems (GIS). This changed with the arrival of Google Maps and its corresponding set of APIs, known as the Google Maps API.

Author Info:
By: A.P.Rajshekhar
Poor Best
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
June 06, 2007
TABLE OF CONTENTS:
  1. · Introducing the Google Maps API
  2. · More Google Maps API Functions
  3. · Using the Google Maps API, Step By Step
  4. · The Google Maps API in the Real World

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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:

  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.

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&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="http://maps.google.com/maps?
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="http://maps.google.com/maps?
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="http://maps.google.com/maps?
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. In just a few lines it does a lot. This was just a teaser of what the Google Maps API can do. In future articles I will discuss advanced features such as communicating with servers and geo-encoding. Till then....


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
WEB AUTHORING ARTICLES

- Top WordPress Plugins for Social Media
- How to Install WordPress on WAMPP
- More of the Best Wordpress Plugins for Comme...
- Top Wordpress Plugins to Fight Spam
- More of the top Drupal modules for SEO
- Top Drupal Modules for SEO
- More Top Wordpress Plugins for SEO
- Website Optimization Tips
- Backup and Restore a Drupal Website and Data...
- 5 Best Web Font Services
- Web Font Embedding Services
- Joomla Site Administration
- Create PHP Pages that Use WordPress Templates
- Top Joomla Extensions for Social Networking
- Drupal Modules for Site Navigation
Find More Web Authoring Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials