I have used google api for drawing the map
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'Delinquency Index', {type: 'string', role: 'tooltip'}],
['US-AL',2.00, 'Delinquency Index: 2.08'],
['US-AK',1.00, 'D I: 1.12'],
['US-AZ',1.50, 'D I: 1.51'],
['US-AR',1.50, 'D I: 1.66'],
['US-CA',1.25, 'D I: 1.45'],
['US-CO',1.00, 'D I: 1.09'],
['US-CT',1.50, 'D I: 1.91'],
['US-DE',2.50, 'D I: 2.69'],
['US-DC',2.00, 'D I: 2.31'],
['US-FL',2.00, 'D I: 2.10'],
['US-GA',2.00, 'D I: 2.13'],
['US-HI',1.25, 'D I: 1.41'],
['US-ID',0.50, 'D I: 0.72'],
['US-IL',1.50, 'D I: 1.63'],
['US-IN',1.00, 'D I: 1.13'],
['US-IA',0.50, 'D I: 0.81'],
['US-KS',1.00, 'D I: 1.20'],
['US-KY',1.50, 'D I: 1.92'],
['US-LA',1.50, 'D I: 1.71'],
['US-ME',1.50, 'D I: 1.66'],
['US-MD',2.00, 'D I: 2.03'],
['US-MA',1.50, 'D I: 1.64'],
['US-MI',1.25, 'D I: 1.28'],
['US-MN',0.50, 'D I: 0.91'],
['US-MS',2.00, 'D I: 2.00'],
['US-MO',1.50, 'D I: 1.60'],
['US-MT',0.50, 'D I: 0.78'],
['US-NE',0.50, 'D I: 0.76'],
['US-NV',1.50, 'D I: 1.89'],
['US-NH',1.25, 'D I: 1.29'],
['US-NJ',2.00, 'D I: 2.11'],
['US-NM',1.25, 'D I: 1.37'],
['US-NY',1.50, 'D I: 1.72'],
['US-NC',2.00, 'D I: 2.04'],
['US-ND',1.00, 'D I: 1.14'],
['US-OH',1.00, 'D I: 1.24'],
['US-OK',1.25, 'D I: 1.33'],
['US-OR',1.00, 'D I: 1.04'],
['US-PA',1.50, 'D I: 1.51'],
['US-RI',1.25, 'D I: 1.41'],
['US-SC',1.50, 'D I: 1.56'],
['US-SD',0.50, 'D I: 0.52'],
['US-TN',1.25, 'D I: 1.30'],
['US-TX',1.50, 'D I: 1.66'],
['US-UT',1.25, 'D I: 1.42'],
['US-VT',0.50, 'D I: 0.92'],
['US-VA',2.00, 'D I: 2.19'],
['US-WA',1.00, 'D I: 1.24'],
['US-WV',2.00, 'D I: 2.18'],
['US-WI',0.50, 'D I: 0.89'],
['US-WY',1.25, 'D I: 1.46']
]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {legend: 'none', width: 556, height: 347,region: 'US', resolution: 'provinces', colorAxis: {colors: ['green', 'white']}});
google.visualization.events.addListener(geochart, 'select', function() {
var selection = geochart.getSelection()[0];
var label = data.getValue(selection.row, 0);
alert(label);
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
Submit an article or tip