Google Visualization Api is very easy to use and effective. It has very well documentation, lots of examples. Google Visualization Api
It can work different data sources. Google docs as datasource is an another interesting point.
In this sample i used my georss formatted xml file as datasource. Json formatted data called by Jquery.Ajax from PageMethods .
You can check this article as my starting point
http://www.aspsnippets.com/post/2009/09/04/Drilldown-Maps-using-Google-Geomap-in-ASPNet.aspx
in this sample we need
for Countries; Country(string),Countrycode(string), Visit(number)
for Cities; lat(number), lon(number),Visit(number) and City(string)
Because of Cities located by latitude and longitude we don’t need to referance google map api. (if city names will be used, we need to add that)
these are my datatables that different from drilldown article:
for countries:
var data = new google.visualization.DataTable(); data.addRows(response.d.length); data.addColumn('string', 'Country'); data.addColumn('number', 'Visit'); for (var i = 0; i < response.d.length; i++) { data.setValue(i, 0, response.d[i].Country); data.setValue(i, 1, response.d[i].Visit); } |
for cities:
var data = new google.visualization.DataTable(); data.addColumn('number', 'LATITUDE', 'lat'); data.addColumn('number', 'LONGITUDE', 'lon'); data.addColumn('number', 'Visit', 'Visit'); data.addColumn('string', 'City', 'City'); data.addRows(response.d.length); for (var i = 0; i < response.d.length; i++) { data.setValue(i, 0, response.d[i].lat); data.setValue(i, 1, response.d[i].lon); data.setValue(i, 2, response.d[i].Visit); data.setValue(i, 3, response.d[i].City); } |
In api also we can create dataviews. You can hide and reorder columns or filter source datatable with dataviews. Below implementation for city datas.
var table = new google.visualization.Table(document.getElementById('table_div')); var dv = new google.visualization.DataView(data); dv.hideColumns([0, 1]); dv.setColumns([3, 2]) table.draw(dv, { showRowNumber: true }); |
In master(country), detail(cities) structure; country codes using as key so they should be right. Also Country names should be recognized by api. (example for Russia you need to use RU as country name, otherwise not shown on country map.)
Here is the link of my GeoMap Sample (Click on the countries for city details and click zoom out for back)
Here are screens
Country Level Visitors Map
City Level Visitors Map
). 
