Code: Google Visualization & Google Maps using GeoCoding

Flash & JavaScript examples of using markers & geocoding on Maps.
I've never been a big fan of Flash, given that that's what dominates the web design animation spectrum.
Agreed that you can make things look much cooler very easily using Flash, while achieving the same UI using JavaScript may take 10 times the effort. But this should change over time with the development of HTML5's canvas element.
With Google's Visualization Geomap API you can get the nice map interface that you've seen in Google Analytics.
But the Maps API is lighter and you can move it around & zoom using the mouse.

Google Visualization Geomap API

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Google Visualization Geomap API</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['geomap']});
var population =
[
['Mumbai',13830884],['Delhi',12565901],
['Bangalore',5438065],['Kolkata',5138208],
['Chennai',4616639],['Hyderabad',4068611],
['Ahmedabad',3959432],['Pune',3446330],
['Surat',3344135],['Kanpur',3221435],
['Jaipur',3210570],['Lucknow',2750447],
['Nagpur',2447063],['Patna',1875572],
['Indore',1854930],['Thane',1807616],
['Bhopal',1792203],['Ludhiana',1740247],
['Agra',1686976],['Pimpri Chinchwad',1637905]
];
google.setOnLoadCallback(function()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'Population');
data.addRows(population);
var geomap = new google.visualization.GeoMap(document.getElementById('geomap'));
geomap.draw(data, {width:'500px',height:'500px',region:'IN',dataMode:'markers',showLegend:false});
});
</script>
</head>
<body>
<div id="geomap" style="width:500px;height:500px;"></div>
</body>
</html>

JavaScript

Google Visualization in Browser

Google Maps & Geocoder

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Google Maps and GeoCoder API</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('maps', '3', {"other_params":"sensor=true"});
var population =
[
['Mumbai','13,830,884'],['Delhi','12,565,901'],
['Bangalore','5,438,065'],['Kolkata','5,138,208'],
['Chennai','4,616,639'],['Hyderabad','4,068,611'],
['Ahmedabad','3,959,432'],['Pune','3,446,330'],
['Surat','3,344,135'],['Kanpur','3,221,435']
];
var map;
google.setOnLoadCallback(function()
{
var point = new google.maps.LatLng(24.046464, 81.342773);
var options =
{
zoom:5,
center:point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("geomap"), options);
geocoder = new google.maps.Geocoder();
for (var i = 0; i < population.length; i++)
{
geocoder.geocode({'address':population[i][0]}, createMarker(i));
}
});

function createMarker(i)
{
return function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
var infowindow = new google.maps.InfoWindow({ content: "<div><h3>Population of " + population[i][0] + "</h3><p>" + population[i][1] + "</p></div>" });
var marker = new google.maps.Marker(
{
position:results[0].geometry.location,
map:map,
title:population[i][1]
});
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
}
}
</script>
</head>
<body>
<div id="geomap" style="width:650px;height:800px;"></div>
</body>
</html>

JavaScript

Google Maps

Limitations with Visualization API :

A maximum of 400 entries (markers)
Much slower if the data format is an address instead of a Latitude/Longitude pair
If you are targetting India, Maps is the better way to go as the Visualization API has cut off a major portion of the J&K !

Limitations with Google Maps :

Geocoder has a limit of 2500 requests per day, and looks about like 10 requests at a time.
Need to center the map and adjust zoom level manually to show withing the bounding div. Visualization API does this automatically by specifying region:'IN'

In both cases, storing Latitude/Longitude pairs offline and then geo-locating the same renders a whole lot faster.

Code

Google Visualization & Google Maps using GeoCoding

Limitations with Visualization API :

Limitations with Google Maps :

0 comments: