In this article I’m going to explain how to create
google Geomap with marker mode in ASP.NET.
A Geochart is a map of a country, a continent,
or a region with two modes:
ü The region mode
colorizes whole regions, such as countries, provinces, or states.
ü The marker mode
marks designated regions using bubbles that are scaled according to a value
that you specify.
A Geochart is rendered within the browser using SVG or VML.
Note that the map is not scrollable or draggable.
Loading:
The google.load package name
is "geochart"
google.load('visualization', '1', {'packages': ['geochart']});
The Geochart visualization class name
is google.visualization.GeoChart
var visualization = new google.visualization.GeoChart(container);
Markers Example:
A marker style map renders bubble-shaped markers at
specified locations with the color and size that you specify.
Try hovering over the cluttered markers around Rome, and a
magnifying glass will open to show the markers in more detail.
Note: the magnifying glass is not supported in Internet
Explorer version 8 or earlier.
Following
source code is used to create google Geochart with marker mode for specified
location population and area.
Designer source
code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization',
'1', { 'packages':
['geochart'] });
google.setOnLoadCallback(drawMarkersMap);
function
drawMarkersMap() {
var
data = google.visualization.arrayToDataTable([
['City',
'Population', 'Area'],
['Rome',
2761477, 1285.31],
['Milan',
1324110, 181.76],
['Naples',
959574, 117.27],
['Turin',
907563, 130.17],
['Palermo',
655875, 158.9],
['Genoa',
607906, 243.60],
['Bologna',
380181, 140.7],
['Florence',
371282, 102.41],
['Fiumicino',
67370, 213.44],
['Anzio',
52192, 43.43],
['Ciampino',
38262, 11]
]);
var
options = {
region: 'IT',
displayMode: 'markers',
colorAxis: { colors: ['green', 'blue']
}
};
var
chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Reference:
Follow
the link to know more details about
1.Configuration
options
2.Methods
3.Events
https://developers.google.com/chart/interactive/docs/gallery/geochart