Sunday, August 29, 2010

Google Map API - A Powerful and Free way to add value for your web applications.


Google Maps is getting more popular as it is helping people to know the places and to get directions easily. Google is adding lot of information and satellite images of many places in the world to make the Google Map more useful.

And, it helps them to get directions from mobile phone also.

Google is taking steps to promote Google places ( formerly Local business center) which lists verified business addresses with more details (e.g business hours, phone number, website).

Almost all websites are now showing their office locations/addresses using Google Map.

Google Maps provides a highly responsive, intuitive mapping interface with embedded, detailed street and aerial imagery data.

Map controls can be embedded to give users full control over map navigation and the display of street and imagery data.

And, Google allows the Users to freely use Google Maps in their services.

i-e A Real Estate website can integrate Google Map in their real estate search results. The result location can be displayed in the Google Map so that the users can understand more about the search results.

Lot of similar services are developed using Google Map. You can refer this blog to know various applications/services that are developed using Google Map API.



Google is providing this API freely in different formats such Javascript, Flash, Static Maps and webservices.

For using this Google Map API, we need to get API key from Google. You can get API key from here.

You need to specify your domain name for getting this API key. And, you should have Google Account.

Note that Google map API is free only when you are going to keep your web application freely accessible to everyone. Otherwise you need to go for Google map premier version.

Currently Google is not showing any advertisements in the Map. But it reserve the rights to show advertisements in future.

And, there is no limitation in page view of Google Map. But there is a limitation (2,500 geocode requests in a 24 hour period from one ip address) in making geocode requests.

Geocode requests are required to convert the physical Address into the latitude and longitude points which can be used for showing the marker in the Map.

If you want to show the Google Map in your web application you can start with using javascript implementation of Google Map API.

We have created some simple sample pages to show the use of Google Map API.

We can start with just showing simple map.

You need to include below javascript code inside head section of your web page.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=apikey type="text/javascript"></script>


You have to replace the "apikey" with your actual Google map API key. (If you want to develop your web application from your local machine, even you can get Google map API key for "localhost" domain also. It will be very useful for doing development from your local machine)
And, below javascript function should be added.




GMap2 is the central class for creating Map inside the HTML container. (In this case div tag with "map" as id). This class is the version 2 class which is deprecated now. We need to use version 3.


setCenter() sets the map view to the given center. Optionally, also sets zoom level and map type. In this example "2" is the zoom level.

And, load function should be called from onLoad event of the body tag.


<body onLoad="load();" onunload="GUnload()">


And, Div tag should be specified at required location for showing the map.



<div id="map" style="height: 500px"></div><!--map Div-->


The next example is Google Map with one Marker.

Below piece of javascript code should be added to the load function.

var marker = new GMarker(new GLatLng(13.04, 80.17)); // chennai
map.addOverlay(marker);


GMarker marks a position on the map. It implements the GOverlay interface and thus is added to the map using the GMap2.addOverlay() method.

A marker object has a latlng, which is the geographical position where the marker is anchored on the map, and an icon. If the icon is not set in the constructor, the default icon G_DEFAULT_ICON is used.

After it is added to a map, the info window of that map can be opened through the marker. The marker object will fire mouse events and infowindow events.

The latitude "13.04" and longitude "80.17" point to Chennai. That's why Marker is showing Chennai in the sample map.


Next we will see how to change the color of the Marker using this example.

Below piece of javascript code should be added in the load() function to create marker with blue color.


var point =new GLatLng(13.04, 80.17);
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };

map.addOverlay(new GMarker(point, markerOptions));


The next example is for showing Markers with infowindow.

You will be seeing two markers on this map. You will be seeing different info window message when clicking on these markers.

It will be done by using below piece of javascript code.

var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,'<div style="width:240px">Some stuff to display in the First Info Window.<\/div>')
map.addOverlay(marker);

var point = new GLatLng(42.8487, -73.755);
var marker = createMarker(point,'Some stuff to display in the<br>Second Info Window')
map.addOverlay(marker);

function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}



GEvent.addListener registers an event handler (e.g info window opening function) for a custom event (e.g click) on the source object(i-e marker).

openInfoWindowHtml opens the map info window over the icon of the marker. The content of the info window is given as a string that contains HTML text.

If you want to show the infowindow when doing mouseover itself instead of on clicking, you have to replace the "click" with "mouseover" when calling addListener().


Next example is about showing tooltip for the marker.

If you want to show tooltip for the marker you need to use below piece of code.


function createMarker(point,html) {

// === marker with tooltip ===
var marker = new GMarker(point, {title:"Tooltip"});
// ===========================
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}



We may want to show labels for Markers immediately after loading the page. You can refer this sample map. It can be done using some third party function.


You can download such a thrid-party code from here.

And include it in the head section of your page.




And, below piece of the code should be included in the load() function.


// An ELabel with all optional parameters in use
var label = new ELabel(point, "samplename", "style2", new GSize(-40,0), 60 );
map.addOverlay(label);

// An ELabel with no classname
var label = new ELabel(new GLatLng(43.82589,-79.10040), '<div style="background-color:#ccccff;border:2px solid black">Unitedstates<\/div>', null, new GSize(6,-30), 75);
map.addOverlay(label);



Normally we will be requiring to show multiple markers based on several addresses.

i-e we need to get geocode corresponding to many addresses and show the them on the Map with details.

The below HTML code is used for specifying the addresses and the details need be displayed with Markers.








Below javascript code should be used to read the addresses from these hidden fields and display them on the Map.


<script type="text/javascript" src="elabel.js"></script><!--label script-->
<script type="text/javascript">
var map;
var geocoder;
var loopvar=0;

function initialize(){
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map_canvas'));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//map.setCenter(new GLatLng(26.90099125,3.14216095), 0);
var multipoints="";
var no_of_contact=document.getElementById('noOfcontact').value;
for (var i = 0; i < no_of_contact; i ) {
var hidden_name="number_locations" i;
var addr=document.getElementById(hidden_name).value;

geocoder = new GClientGeocoder();

// Retrieve location information, pass it to addToMap()


geoloc=geocoder.getLocations(addr,addToMap);

}


}
}

function addToMap(response)
{

// Retrieve the object
place = response.Placemark[0];

// Retrieve the latitude and longitude
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);

var phonenumber="num" loopvar;

var phonenumber=document.getElementById(phonenumber).value;
details=phonenumber "-" place.address
map.addOverlay(createmarker(point,details));
map.setCenter(new GLatLng(20.0, -10.0), 2);
loopvar ++;
}

function createmarker(point,details)
{

//create lable
var stuff = '<div style="padding: 0px 0px 8px 8px; background: url(images/point_bottom.png) no-repeat bottom left;"><div style="background-color:#0099FF; border-color:#0033FF; color:#FFFFFF; padding: 2px;"><b> ' details '<\/b><\/div><\/div>';

var label = new ELabel(point, stuff, null, null,65 ); // call the label
map.addOverlay(label);

// Create a marker
var marker = new GMarker(point);
GEvent.addListener( marker, 'mouseover', function() {
marker.openInfoWindowHtml(details);
});

return marker;
}

</script>



This code reads the addresses one by one using id of the hidden field.

GClientGeocoder class is used to communicate directly with Google servers to obtain geocodes for user specified addresses.

getLocations method of GClientGeocoder class performs a geocode, the conversion of a human-readable address into a latitude/longitude pair. getLocations() sends a request to the Google geocoding service, asking it to parse the given address and handle the response in the given callback.

As this method requires a call to a Google server, you must also pass a callback method (e.g addToMap())to handle the response. This response will contain a Status code, and if successful, one or more Placemark objects.

Note that addToMap is a callback method. So, we can not expect it to be called one by one within the "for" loop.

You can refer the sample map created using this code.

All these samples are based on javascript API. Similarly you can use Flash API also.

And, if you want you can use static maps also.

Do you have an interesting and useful idea/plan to create an web application using Google Map? And, don't know how to implement them?

We can help you to complete your web application cost effectively. You can contact me (rajamanickam.a@gmail.com) for outsourcing any web development project.

Recently our Team has successfully done a web application for tracking mobile phones on the Google map. Contact me if you want us to develop similar application for you.

You can get latest updates about Google Map from Goolge map official blog.


More Articles...
You can bookmark this blog for further reading, or you can subscribe to our blog feed.

2 comments:

Google Earth said...

Now its very easy, to use this apps and gaget to our blogs or site many poeple use Google Maps and Google Earth like tools, also Sketchup to edit and create a 3D Modeling

Vijay said...

Thanks for sharing this tips. Where, I have learned about Google maps. You may also learn about some interesting things in Google Maps. How to Styled Maps or Customize colors in Maps? For More info: http://www.labstech.org/styled-maps-google-maps-2014-06-26/

Search This Blog