Web Authoring
  Home arrow Web Authoring arrow Page 4 - Introducing the Google Maps API
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
WEB AUTHORING

Introducing the Google Maps API
By: A.P.Rajshekhar
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 12
    2007-06-06

    Table of Contents:
  • Introducing the Google Maps API
  • More Google Maps API Functions
  • Using the Google Maps API, Step By Step
  • The Google Maps API in the Real World

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    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.

       · In this discussion I have introduced basics of Google Map APIs.
     

    WEB AUTHORING ARTICLES

    - Yahoo Pipes: Worth a Look
    - Completing an EAR
    - Building and Deploying an EAR
    - New Nuke Security Sentinel: Worth Taking a C...
    - Administering Your CMS-Based Web Site
    - What You Need to Know Before Using a CMS
    - Introducing the Google Maps API
    - An Overview of the Yahoo User Interface Libr...
    - Basic configuration of osCommerce, concluded
    - Basic configuration of osCommerce, continued
    - Basic configuration of osCommerce
    - Deploying your Site with PHPEclipse, continu...
    - Deploying your Site with phpEclipse
    - Macromedia Captivate Review
    - Macromedia and Adobe Planning to Tie the Knot







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek