In this article I will explain with an example, how to use Google Geomap Visualization API in ASP.Net using C# and VB.Net.
This article makes use of Google Visualization API to display geographical statistics data.
HTML Markup
The following HTML Markup consists of:
DIV – For displaying geographical statistics data.
<div id='map_canvas'></div>
jQuery Plugin Implementation
Inside the HTML Markup, following
jQuery and
Google Map loader JS files are inherited.
1. jquery-3.7.1.js
2. loader.js
Calling the Server side function using jQuery
When the Google API is loaded, the OnLoad function is called.
Inside the
OnLoad function, a
jQuery AJAX call is made to the
CreateWorldMap WebMethod which returns the List Array.
Once the response is received, DrawWorldMap function is called inside the Success event handler.
DrawWorldMap
Inside the DrawWorldMap function, an object of Google Visualization DataTable is created and two columns Country and Popularity are added to it.
Note: The Country column is a necessary because it will have either Population Code or Country Name which in case if incorrect the data for that entry will not be shown.
Then, a FOR loop is executed through the response object and rows will be added in the DataTable.
Next, the HTML DIV which will act as a canvas for map is referenced and GeoChart is initialized.
Finally, the draw method is called which simply renders the map in the HTML DIV.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(OnLoad);
function OnLoad() {
$.ajax({
type: "POST",
url: "Default.aspx/CreateWorldMap",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: DrawWorldMap
});
}
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 geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
}
</script>
Public Class
The public class consists of the following properties.
C#
public class Country
{
public string Country { get; set; }
public int Popularity { get; set; }
}
VB.Net
Public Class Country
Public Property Country As String
Public Property Popularity As Integer
End Class
Namespaces
You will need to import the following namespace.
C#
using System.Web.Services;
VB.Net
Imports System.Web.Services
WebMethod [PageMethod]
Inside this
WebMethod, a generic List of the
Country class object is created and Country name and population details are added to the respective properties.
Finally, a generic List of the Country class object is returned.
C#
[WebMethod]
public static List<Country> CreateWorldMap()
{
List<Country> Country = new List<Country>();
Country.Add(new Country());
Country[0].Country = "India";
Country[0].Popularity = 3000;
Country.Add(new Country());
Country[1].Country = "United States";
Country[1].Popularity = 2500;
Country.Add(new Country());
Country[2].Country = "Russia";
Country[2].Popularity = 2100;
Country.Add(new Country());
Country[3].Country = "Canada";
Country[3].Popularity = 1700;
Country.Add(new Country());
Country[4].Country = "United Kingdom";
Country[4].Popularity = 1600;
Country.Add(new Country());
Country[5].Country = "France";
Country[5].Popularity = 1200;
return Country;
}
VB.Net
<WebMethod>
Public Shared Function CreateWorldMap() As List(Of Country)
Dim countries As New List(Of Country)()
countries.Add(New Country())
countries(0).Country = "India"
countries(0).Popularity = 3000
countries.Add(New Country())
countries(1).Country = "United States"
countries(1).Popularity = 2500
countries.Add(New Country())
countries(2).Country = "Russia"
countries(2).Popularity = 2100
countries.Add(New Country())
countries(3).Country = "Canada"
countries(3).Popularity = 1700
countries.Add(New Country())
countries(4).Country = "United Kingdom"
countries(4).Popularity = 1600
countries.Add(New Country())
countries(5).Country = "France"
countries(5).Popularity = 1200
Return countries
End Function
Screenshot
![Google Geomap Visualization API in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
