ASP Snippets



Free Alerts

Your email will always be
private and will not be shared.

Follow us on twitter.

Zoom In | Zoom Out

Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Google Geomap Visualization API in ASP.Net

Author:Mudassar Khan

Part II - Drilldown Maps using Google Geomap in ASP.Net >>

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.



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=''></script>

<script src='' 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



public class Countries


    string _Country;

    int _Popularity;

    public string Country




            return _Country;




            _Country = value;




    public int Popularity




            return _Popularity;




            _Popularity = value;






Public Class Countries

    Private _Country As String

    Private _Popularity As Integer

    Public Property Country() As String


            Return _Country

        End Get

        Set(ByVal value As String)

            _Country = value

        End Set

    End Property


    Public Property Popularity() As Integer


            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


using System.Collections.Generic;

using System.Web.Script.Services;

using System.Web.Services;



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.


[ScriptMethod(ResponseFormat = ResponseFormat.Json)]


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;




<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']});


    function OnLoad() {


            type: "POST",

            url: "CS.aspx/CreateWorldMap",

            data: '{}',

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: DrawWorldMap





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.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);




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 Web Page

Using Google Geomap Visualization API in ASP.Net

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

You can download the sample source code in C# and VB.Net using the link below (25.32 kb)

Part II - Drilldown Maps using Google Geomap in ASP.Net >>

Posted: Aug 31 2009, 17:42 by Mudassar Khan | Comments (0) RSS comment feed |
Filed under: ASP.Net | C# | JQuery | VB.Net

Views: 6935
Page copy protected against web site content infringement by Copyscape

If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share


Community News

Web Hosting SpotLight


For consulting and work related queries click here.


Advertise with us. For more details click here.


Please provide your valuable suggesstions here.

This Site is hosted on Web Hosting