In this article I am explaining how to use Google Geomap which is part of the Google Visualization API in an ASP.Net Application. Google Geomap is a nice tool to display geographical statistics through interactive Flash maps
In this example I’ll make use of jQuery to asynchronously load the map with statistical data.
Perquisites
Download jQuery Library using the following link.
Download jQuery
Now add the following scripts to the head section of your Web page or Master Page.
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABCDEFG' type='text/javascript'></script>
Note: The API key is not required on localhost but when you upload it on server you’ll need to get one from Google otherwise it won’t work
Creating a DTO Class
Now I’ll create a DTO (Data Transfer Objects) Class called Countries whose object will store the statistical data for that country
C#
public class Countries
{
string _Country;
int _Popularity;
public string Country
{
get
{
return _Country;
}
set
{
_Country = value;
}
}
public int Popularity
{
get
{
return _Popularity;
}
set
{
_Popularity = value;
}
}
}
VB.Net
Public Class Countries
Private _Country As String
Private _Popularity As Integer
Public Property Country() As String
Get
Return _Country
End Get
Set(ByVal value As String)
_Country = value
End Set
End Property
Public Property Popularity() As Integer
Get
Return _Popularity
End Get
Set(ByVal value As Integer)
_Popularity = value
End Set
End Property
End Class
Populating the Data for Map
Now I’ll populate the data for the Map. First you’ll need to import the following namespaces
C#
using System.Collections.Generic;
using System.Web.Script.Services;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Web.Script.Services
Imports System.Web.Services
Next I have created a simple method that creates a List array of the Country class objects and returns the List array.
C#
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
[WebMethod]
public static List<Countries> CreateWorldMap()
{
List<Countries> countries = new List<Countries>();
countries.Add(new Countries());
countries[0].Country = "India";
countries[0].Popularity = 3000;
countries.Add(new Countries());
countries[1].Country = "United States";
countries[1].Popularity = 2500;
countries.Add(new Countries());
countries[2].Country = "Russia";
countries[2].Popularity = 2100;
countries.Add(new Countries());
countries[3].Country = "Canada";
countries[3].Popularity = 1700;
countries.Add(new Countries());
countries[4].Country = "United Kingdom";
countries[4].Popularity = 1600;
countries.Add(new Countries());
countries[5].Country = "France";
countries[5].Popularity = 1200;
return countries;
}
VB.Net
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
<WebMethod()> _
Public Shared Function CreateWorldMap() As List(Of Countries)
Dim countries As New List(Of Countries)()
countries.Add(New CountriesVB())
countries(0).Country = "India"
countries(0).Popularity = 3000
countries.Add(New CountriesVB())
countries(1).Country = "United States"
countries(1).Popularity = 2500
countries.Add(New CountriesVB())
countries(2).Country = "Russia"
countries(2).Popularity = 2100
countries.Add(New CountriesVB())
countries(3).Country = "Canada"
countries(3).Popularity = 1700
countries.Add(New CountriesVB())
countries(4).Country = "United Kingdom"
countries(4).Popularity = 1600
countries.Add(New CountriesVB())
countries(5).Country = "France"
countries(5).Popularity = 1200
Return countries
End Function
As you’ll notice I have declared the method as static (shared in VB.Net) so that it can be accessed using jQuery library. The jQuery AJAX function will simply call this function and receive the List array as JSON Array client side. Refer below to see how it works
Calling the Server side function using jQuery
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(OnLoad);
function OnLoad() {
$.ajax({
type: "POST",
url: "CS.aspx/CreateWorldMap",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: DrawWorldMap
});
}
</script>
As you’ll notice above I am calling OnLoad() function when the Google API is loaded. This function simply makes an AJAX call to the CreateWorldMap function which returns the List Array back to it. Once the response is received the success method DrawWorldMap is called which draws the Google Geomap using the statistical data received from the server.
Note: for more information on calling server side methods using jQuery refer my previous article using the link below
Check UserName Availability in ASP.Net using JQuery
Drawing the Google Geomap
<script type='text/javascript'>
function DrawWorldMap(response) {
var data = new google.visualization.DataTable();
data.addRows(response.d.length);
data.addColumn('string', 'Country');
data.addColumn('number', 'Popularity');
for (var i = 0; i < response.d.length; i++) {
data.setValue(i, 0, response.d[i].Country);
data.setValue(i, 1, response.d[i].Popularity);
}
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
}
</script>
Above I am accepting the response as parameter the response object contains the JSON Array. Next I am creating Google Visualization DataTable Object and creating two columns Country and Popularity. Country is a necessary column it will have either Country Code or Country Name which in case if incorrect the data for that entry will not be shown. Other parameters can be anything.
Then I am looping through the response object and adding rows in the datatable that we have created. Next a container object is created which is nothing much object reference of the HTML DIV Control which will act as a canvas for our map. Finally the draw method is called which simply renders the map in the map_canvas DIV.
<div id='map_canvas'></div>
Note: For this article I have used Visual Studio 2008. In order to use this functionality in Visual Studio 2005 you have to install AJAX Extensions and Add ScriptManager to the page. Also instead of response.d you’ll have to check for response for the returned values
The figure below displays the Google Geomap Visualization World Map being displayed on the asp.net Web Page
You can download the sample source code in C# and VB.Net using the link below
GoogleGeoMaps.zip (25.32 kb)