Google Map API V3 tutorial

Every one on web know Google map,Best mapping from google .But some know about the google map API and it’s very easy to use.

It’s 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 .
Some of the the advantages I noticed include

You need only develop a map it can run on android phones,website,iphone
and speed .
Other advantages we discuss later in this article.

For those who are beginner with google map go with v3 and those who want to switch from v2 this is the best time.because google map is in Labs and when it become full fledged you can go your study parallel.

About the API

Google map API is available to you in javascirpt 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 codeglob.blogspot.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 a API key for the Map API V3.

How to setup

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 ,ie area in webpage usually used <div>

So create a div and give a id for the div

Eg:

<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.

Eg: We have an object car and it have some properties like color,tyre,type,make,model etc we can create a Javascript object of car like this

Car
{
color:red;
tyre:4;
make: Hyundai;
model:i-20
};

like this in Map Api uses some javascript objects. To access object property just call it like

alert(Car.color);

Map initialization

Map uses latitude longitude value( a particular point in map) .Setting initial latitude and longitude is like this

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

To initialize map we need to call the contructer 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 otions.Map options is given in the format of JSON. .
So we create a options object having the folloging format
//Properties of the map
Options
{
zoom:16;//map has 0-19 zoom levels
center:latlng;// previously declared Latitide Longitude variable
mapTypeId: google.map.MapTypeId.ROADMAP;// Google map Type
};

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 maps.google.Map(document.getElementById(‘map’),options);

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

Complete sample code for Google map Initialization

Adding marker and Info Window to the map


var marker= new google.maps.Marker({
position: new google.maps.LatLng(9.099761549253056,76.5246167373657),
title: "Hello Testing",
clickable: true,
map: map
});


var infiwindow = new google.maps.InfoWindow(
{
content: “Hello"

});


google.maps.event.addListener(marker,'mouseover',function(){
infiwindow.open(map,marker);
});
google.maps.event.addListener(marker,'mouseout',function(){
infiwindow.close(map,marker);
});

Here is the sample complete code for this article

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Google Map Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<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(9.931544168615512,76.27632894178791);
var opt =
{
center:latlng,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan:false,
navigationControl:true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
var map = new google.maps.Map(document.getElementById("map"),opt);
var marker= new google.maps.Marker({
position: new google.maps.LatLng(9.931544168615512,76.27632894178791),
title: "CodeGlobe",
clickable: true,
map: map
});


var infiwindow = new google.maps.InfoWindow(
{
content: " I am here! "

});


google.maps.event.addListener(marker,'mouseover',function(){
infiwindow.open(map,marker);
});
google.maps.event.addListener(marker,'mouseout',function(){
infiwindow.close(map,marker);
});


}
function test(event)
{

alert( event.latLng.lat());
alert(event.latLng.lng());

}
</script>
<style type"text/css">
#map{
width:500px;
height:500px;
float:left;
position:absolute;
left:300px;
top:200px;

}
</style>
</HEAD>

<BODY onload="initialize();">
<div id="map" >

</div>
</BODY>
</HTML>

If you have any problem implementing google map API please mail me: irshadcp at gmail dot com