JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<select id="state">
<option value="" selected="selected">Select a state to highlight</option>
<option value="US-AK">Alaska</option>
<option value="US-AZ">Arizona</option>
<option value="US-HI">Hawaii</option>
</select>
<div id="chart_div"></div>
JavaScript
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'State');
var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {
region:"US",
legend:"none",
width: 556,
height: 347,
resolution: 'provinces'
};
var stateSelector = document.querySelector('#state');
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) {
stateSelector.addEventListener('change', updateChart, false);
}
else if (document.attachEvent) {
stateSelector.attachEvent('onchange', updateChart);
}
else {
stateSelector.onchange = updateChart;
}
geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChart});