articles

Home / DeveloperSection / Articles / Google Map API

Google Map API

AVADHESH PATEL 6965 29-Sep-2012

Google Maps (formerly Google Local) is a web mapping service application and technology provided by Google, that powers many map-based services, including the Google Maps website, Google Ride Finder, Google Transit, and maps embedded on third-party websites via the Google Maps API. It offers street maps, a route planner for traveling by foot, car, bike, or public transport and an urban business locator for numerous countries around the world. Google Maps satellite images are not updated in real time; they are several months or years old.

Its great news that Google released new version of Google Map API version 3.
The previous version will continue (V3).Nevertheless as a beginner to Google Map API I recommend Version 3 because it has great added advantage over Version 2.

You need only develop a map it can run on android phones, website, iphone and speed.
<![if !supportLineBreakNewLine]>
<![endif]>

About the API
Google Map API is available to you in JavaScript language .You can integrate it with any of your server side programming like PHP,ASP.net JSP etc .
The previous version of API used a unique key for each user they want to use map in their application
For example if www.xyz.com want to use Google Map API v2 we have to sign up for the API using the site URL and Google account, a unique key is generated for you website.
Things have changed here is the happy news .You don’t need to use an API key for the Map API V3.
How to setup Google Map
We already told that MAP API is JavaScript API. We need to add reference in our webpage.

<script type=”text/JavaScript” src=”http://maps.google.com/maps/apis/js?sensor=false”>

</script>

By doing this you added the reference to Google map API in your webpage.
Only thing you remember when referencing to Google Map is setting the sensor parameter
sensor = true/false this tells the Map API whether you are using GPS sensor or not.
Next we look at the how we can initialize the Map
Map needs a canvas to draw, i.e. area in webpage usually used <div>
So create a div and give a id for the div, e.g:

<div id=”map”></div>


inorder to specify the width and height of the div specify a css style in page in style tag or external css file.

<style type=”text/css”>

#map
{
height:300px;
width:300px;
}
</style>

API v3 use JSON (JavaScript Object Notation) for creating object . It’s easy when we use JavaScript object to set values.
Map initialization
Map uses latitude longitude value (a particular point in Map). Setting initial latitude and longitude is like this

// Syntax

 
var latlng = new google.maps.LatLng(‘latitude value’,’longitude value’);
 
//Example
 
var latlng = new google.maps.LatLng(25.445522,81.812911);


To initialize Map we need to call the constructer of the class Map in Google Map API. It takes two arguments one is the canvas that we need to draw the map HTML element .We already told that we setup div named Map for showing Map. And the second argument is the Map options. Map options are given in the format of JSON.
So we create an options object having the following format

//Properties of the map

var option =
{
    center:latlng, // previously declared Latitude Longitude variable
    zoom:1, //map has 0-19 zoom levels
    mapTypeId: google.maps.MapTypeId.ROADMAP, // previously declared Latitude Longitude variable
 };

 

Google Map Support four types of Maps
ROADMAP
HYBRID
SATELITE
TERRAIN

Next we call the constructer by passing the values to initialize the map.

var map = new google.maps.Map(document.getElementById("map"), Options);

 

Then the map is visible to you when you browse the page in browser.

Adding marker and Info Window to the Map

var marker= new google.maps.Marker

            (
                {
                   position: new google.maps.LatLng(25.445522,81.812911),
                   title: "MindStick Branch",
                   clickable: true,
                   map: map
                }
             );

 

Display popup message on ‘mouseover’event on map pushpin

var infiwindow = new google.maps.InfoWindow

            (
              {
                content: "MindStick Branch: Lukarganj, <br> Allahabad, Uttar Pradesh, India "
              }
             );


Open and close popup message over ‘mouseover ‘and ‘mouseout’ event

google.maps.event.addListener(marker,'mouseover',function()

{
      infiwindow.open(map,marker);
}
);
            google.maps.event.addListener(marker,'mouseout',function()
{ infiwindow.close(map,marker);
}
);
Complete Code 
<head runat="server">

    <title>Mindstick Location</title>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
 
    <script type="text/javascript">
    function initialize()
    {
      var latlng = new google.maps.LatLng(25.445522,81.812911);
        var opt =
        {
            center:latlng,
            zoom:1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            var map = new google.maps.Map(document.getElementById("map"),opt);
            var marker= new google.maps.Marker
            (
                {
                   position: new google.maps.LatLng(25.445522,81.812911),
                   title: "Mindstick Location",
                   clickable: true,
                   map: map
                }
             );
 
            var infiwindow = new google.maps.InfoWindow
            (
              {
                content: " MindStick: Lukarganj, Allahabad, Uttar Pradesh, India "
              }
             );
 
            google.maps.event.addListener(marker,'mouseover',function()
{ infiwindow.open(map,marker);
}
);
            google.maps.event.addListener(marker,'mouseout',function()
{ infiwindow.close(map,marker);
}
);
}
    </script>
 
    <style type="text/css">
        #map
        {
            width: 800px;
            height: 400px;
            float: left;
            position: absolute;
            left: 300px;
            top: 100px;
        }
    </style>
</head>
<body onload="initialize();">
    <form id="form1" runat="server">
    <div id="map">
    </div>
    </form>
</body>

 Screen Shot

Google Map API

Multiple Pushpins in Google Map API
<head id="Head1" runat="server">

    <title>Mindstick Location</title>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
 
    <script type="text/javascript">
    function initialize()
    {
      var latlngBranch = new google.maps.LatLng(25.445522,81.812911);
        var opt =
        {
            center:latlngBranch,
            zoom:1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            var map = new google.maps.Map(document.getElementById("map"),opt);
 
            //Added first pushpin
            var markerBranch= new google.maps.Marker
            (
                {
                   position: new google.maps.LatLng(25.445522,81.812911),
                   title: "MindStick Branch",
                   clickable: true,
                   map: map
                }
             );
 
            var infiwindowBranch = new google.maps.InfoWindow
            (
              {
                content: "MindStick Branch: Lukarganj, <br> Allahabad, Uttar Pradesh, India "
              }
             );
 
            google.maps.event.addListener(markerBranch,'mouseover',function()
                                            {
                                                infiwindowBranch.open(map,markerBranch);
                                            }
                                          );
            google.maps.event.addListener(markerBranch,'mouseout',function()
                                            {
                                                infiwindowBranch.close(map,markerBranch);
                                            }
                                          );
            // Added second pushpin
            var markerHeadOffice= new google.maps.Marker
            (
                {
                   position: new google.maps.LatLng(37.545105,-122.270815),
                   title: "MindStick Head Office",
                   clickable: true,
                   map: map
                }
             );
 
            var infiwindowHeadOffice = new google.maps.InfoWindow
            (
              {
                content: " MindStick Head Office: 969 - G Edgewater Blvd,<br>Suite 793,Foster City, CA 94404 USA "
              }
             );
 
            google.maps.event.addListener(markerHeadOffice,'mouseover',function()
                                            {
                                                infiwindowHeadOffice.open(map,markerHeadOffice);
                                            }
                                          );
            google.maps.event.addListener(markerHeadOffice,'mouseout',function()
                                            {
                                                infiwindowHeadOffice.close(map,markerHeadOffice);
                                            }
                                          );
    }
    </script>
 
    <style type="text/css">
        #map
        {
            width: 560px;
            height: 300px;
            float: left;
            position: static;
            left: 400px;
            top: 100px;
        }
    </style>
</head>
<body onload="initialize();">
    <form id="form1" runat="server">
    <div id="map">
    </div>
    </form>
</body>

 Screen Shot

Google Map API



Updated 07-Sep-2019
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By