Skip to content

Instantly share code, notes, and snippets.

@mvark

mvark/gist:7040359

Last active December 25, 2015 21:09
Show Gist options
  • Save mvark/7040359 to your computer and use it in GitHub Desktop.
Save mvark/7040359 to your computer and use it in GitHub Desktop.
Download ZIP
Sample shows how to highlight a Province within a Country (India) with Google GeoChart. Notes: http://mvark.blogspot.in/2013/10/how-to-highlight-province-within.html
Raw
gistfile1.html
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
//Based on this original sample - http://jsfiddle.net/asgallant/wwDyU/1/
function drawChartIN () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'INState');
var geochart = new google.visualization.GeoChart(document.getElementById('INchart_div'));
var options = {
region:"IN",
legend:"none",
width: 556,
height: 347,
resolution: 'provinces'
};
var INStateSelector = document.querySelector('#INState');
function updateChart () {
var index = this.selectedIndex;
var selectedState = this.options[index].value;
if (data.getNumberOfRows() > 0) {
data.removeRows(0, data.getNumberOfRows());
}
data.addRow([selectedState]);
geochart.draw(data, options);
}
if (document.addEventListener) {
INStateSelector.addEventListener('change', updateChart, false);
}
else if (document.attachEvent) {
INStateSelector.attachEvent('onchange', updateChart);
}
else {
INStateSelector.onchange = updateChart;
}
geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChartIN});
</script>
</head>
<body>
<div id="IN">
<div id="INStateSelect">
<h4>India - Spot the State (or UT)</h4>
<select id="INState">
<option value="" selected="selected">Select a State to show on map</option>
<option value='IN-AP'>Andhra Pradesh </option>
<option value='IN-AR'>Arunachal Pradesh </option>
<option value='IN-AS'>Assam </option>
<option value='IN-BR'>Bihar </option>
<option value='IN-CT'>Chhattisgarh </option>
<option value='IN-GA'>Goa </option>
<option value='IN-GJ'>Gujarat </option>
<option value='IN-HR'>Haryana </option>
<option value='IN-HP'>Himachal Pradesh </option>
<option value='IN-JK'>Jammu and Kashmir </option>
<option value='IN-JH'>Jharkhand </option>
<option value='IN-KA'>Karnataka </option>
<option value='IN-KL'>Kerala </option>
<option value='IN-MP'>Madhya Pradesh </option>
<option value='IN-MH'>Maharashtra </option>
<option value='IN-MN'>Manipur </option>
<option value='IN-ML'>Meghalaya </option>
<option value='IN-MZ'>Mizoram </option>
<option value='IN-NL'>Nagaland </option>
<option value='IN-OR'>Orissa </option>
<option value='IN-PB'>Punjab </option>
<option value='IN-RJ'>Rajasthan </option>
<option value='IN-SK'>Sikkim </option>
<option value='IN-TN'>Tamil Nadu </option>
<option value='IN-TR'>Tripura </option>
<option value='IN-UT'>Uttarakhand </option>
<option value='IN-UP'>Uttar Pradesh </option>
<option value='IN-WB'>West Bengal </option>
<option value='IN-AN'>Andaman and Nicobar Islands </option>
<option value='IN-CH'>Chandigarh </option>
<option value='IN-DN'>Dadra and Nagar Haveli </option>
<option value='IN-DD'>Daman and Diu </option>
<option value='IN-DL'>Delhi </option>
<option value='IN-LD'>Lakshadweep </option>
<option value='IN-PY'>Puducherry (Pondicherry) </option>
</select>
</div>
<div id="INchart_div"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment