Monday, March 8, 2010

Integrating Google Maps in your Website (How to Integrate Tutorial)

Kathiravan Manoharan 9:47:00 PM Google Maps Integration No comments :

How to integrate Google Maps in your website?

Signup for an API key in google maps API

Go to the following url: http://code.google.com/apis/maps/signup.html and get yourself registered for an Maps API key. This is nothing but a license to use the Google maps API

Example:
ABQIAAAAHLY5qiALaGI-Ym3cp9yyRRSJ5qBkngbYM3DN8sv7BfNjk0qNDBQSGIFS_CiEwsAFlnDdARNhqV6JuQ
I have used the API key of www.example.com for reference

Two of integrating Google Maps:
1. Static Map (Non JS/Javascript Version)
2. Dynamic Map (JS/Javascript Version)

1. Static Map using http://maps.google.com/maps/api/staticmap

This will just show the map and location. This will not have the zoom control, move and explore options.
This can be done using iframe, image tags
This is the easiest way of integrating Google maps into your website, if your intention is to just show the map & location
This doesn't require a maps API key

Example:
    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
     <head>
      <title>Google Maps - Example - http://kathyravan.blogspot.com</title>
     </head>

     <body>
      <img src="http://maps.google.com/maps/api/staticmap?center=Chennai&zoom=14&size=400x400&sensor=false" />
     </body>
    </html>

Explanation:
The following will display the map in your webpage:

<img src="http://maps.google.com/maps/api/staticmap?center=Chennai&zoom=14&size=400x400&sensor=false" />
or
<iframe frameborder="0" width="450" height="450px" src="http://maps.google.com/maps/api/staticmap?center=Chennai&zoom=14&size=400x400&sensor=false"></iframe>

center - the location or address that needs to be shown. For more information http://code.google.com/apis/maps/documentation/staticmaps/#Locations
zoom - the level of zoom (i.e. city view, street view, etc.,). Refer http://code.google.com/apis/maps/documentation/staticmaps/#Zoomlevels for more information
sensor - indicate whether your application is using a "sensor" (such as a GPS locator) to determine the user's location. For more information, http://code.google.com/apis/maps/documentation/staticmaps/#Sensor

2. Dynamic Maps using the JS API

This will show the map and location along with the other map controls like zoom, search, etc.,

Example:

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
     <head>
      <title>Google Maps - Example - http://kathyravan.blogspot.com</title>
      <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAHLY5qiALaGI-Ym3cp9yyRRS75UplwgUc6IbZ6zdmptEzBp-yhxQfuYo0de54HQH7ToX-isT7ge4kZg&sensor=false" type="text/javascript"></script>
      <script language="javascript">
        function initialize() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("addressmap"));
            map.setCenter( new GLatLng(13, 80.2100), 11 );
            map.addControl(new GSmallMapControl());

            // For MARKER in the MAP
            var marker = new GMarker( new GLatLng(13, 80.2100) );
            map.addOverlay(marker);

            //For Position refer the following URL
            // http://www.gorissen.info/Pierre/maps/googleMapLocation.php?lat=12.234080&lon=10.942383&setLatLon=Set

          }
        }
      </script>

     </head>

    <body onload="initialize()" onunload="GUnload()" height="100%">
      <div id="addressmap" style="height: 400px; width: 400px;"></div>
     </body>
    </html>

Pls refer the following url to generate Langtitude and Longtitude points:

http://www.gorissen.info/Pierre/maps/googleMapLocation.php?lat=12.234080&lon=10.942383&setLatLon=Set

Reference for Maps API:

Working Example for Google Maps API:
http://www.maskitchen.in/contact-us.html