JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id="map_canvas"></div>
JavaScript
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Projects'],
['Russia', 3],
['France', 2],
['Spain', 4]
]);
var options = {
dataMode: 'regions',
width: 834,
height: 521
};
var container = document.getElementById('map_canvas');
var chart = new google.visualization.GeoChart(container);
function myClickHandler(){
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
} else if (item.column != null) {
message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
}
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});