Implementation of Google Maps API 3.0

In this blog, I am describing the basics of Google API 3.0

Including API reference script:

The most important point for including API reference script is that API keys are not needed in v3 and greater. Therefore, no need to apply for API keys and obviously URI to API becomes shorter.

You just need to add reference script (given below) to your page.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

In referencing script, you just have to specify whether your device has sensor for determining your current location (like GPS) or not. If you don't have sensor, use 'sensor=false' and if you have sensor then use 'sensor=true'.

Creating a map:

Before API v3, the global variables were using letter capital 'G' to distinguish themselves from local variables (eg. GLatLng). But in v3 and later versions google.maps (e.g. google.maps.LatLng).

For map initialization, we need to call constructor of Map class. It takes 2 arguments one is reference of HTML element to insert map (I'm taking it as <div id="map_canvas"></div>) and other is options having set of properties.

//Create object of LatLng by passing coordinates to specify center of map var myLatlng = new google.maps.LatLng(95.1, 16.0);

//Create an object variable containing set of properties, to
//pass to the map
var myOptions = {

zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP

}

// Intializing map by calling constructor
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

There are lots of options for properties to pass to the map. But three of them are mandatory.

These are:

zoom: It is a number to set initial zoom level of the map

center: It sets center of the map by taking coordinates of type google.maps.LatLng

mapTypeId: It specifies initial type of map. It is an identifier of google.maps.MapTypeId class

Dropping markers and event handling for the map:

You can drop markers on map by passing objects of Map and LatLng to the constructor of class Marker. Also, these markers can have an info window that can contain user defined messages and you can handle events for appearing disappering of info window, using google.maps.event.addListener listner. In below example, I am passing a location name as 'london' and code find latlng for the location name (by using Geocoder class of API) and then it will drop marker on london in the map:

// Initializing variable with location name
var address = 'london';

// Creating new object of class Geocoder
var geocoder = new google.maps.Geocoder();

geocoder.geocode( { 'address': address}, function(results, status) {

// Get latlng for the given location name
var latlang = results[0].geometry.location;

// Set given location as center of the map
map.setCenter(latlang);

// Place marker
var marker = new google.maps.Marker({

map: map,
position: latlang

});

// Create info window. In content you can pass simple text or html code.
var infowindow = new google.maps.InfoWindow({

content: "<div>Hello!
World</div>",
maxWidth: 10

});

// Add listner for marker. You can add listner for any object.It is
// just an example in which I am specifying that infowindow will be
// open on marker mouseover
google.maps.event.addListener(marker, "mouseover", function() {

infowindow.open(map, marker);

});

});

Now when you will mouse over on marker, you will get an popup info window showing content "Hello! World".

Reference for details documentation: Google Maps API 3.0

---