I'm currently working on developing a unique clickable map using Google's GeoChart for a website. My goal is to make each country clickable so that users can be directed to separate web pages when they select different countries on the map. Additionally, I would like the color of the selected country to change in order to indicate its selection. If anyone could assist me with creating the JavaScript code to implement the select event, it would be greatly appreciated. Below is the code snippet I have managed to put together so far:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>