Javascript onClick function for google's GeoChart
There are a couple of things you need to do. First, since your function myClickHandler
references the object chart
, its needs to be in the same scope as chart
, so you have to move it inside drawMap
. Second, you need to create a 'click'
event handler for the chart that uses the myClickHandler
function. Here's what the code should look like:
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});
jsfiddle: http://jsfiddle.net/asgallant/6dP28/
Related videos on Youtube
holmeswatson
Computer Science graduate, Raspberry Pi and Arduino enthusiast
Updated on October 17, 2022Comments
-
holmeswatson over 1 year
I am trying to display a map using google's geochart https://developers.google.com/chart/interactive/docs/gallery/geochart
The map displays the data and specified countries fine, but I can't work out how assign a link onClick to each specific country, or even get any onClick function for the countries.
This link describes the Events 'regionClick' and 'select', which sounds like part of what I need, though I'm not sure how these will trigger my link function...Im new to javascript. With 'select' there seems to be a method to 'getSelected'
<scripts type='text/javascript'> google.load('visualization', '1', {'packages': ['geomap']}); google.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Projects'], ['Russia', 3], ['France', 2], ['Spain', 4] ]); var options = {}; options['dataMode'] = 'regions'; options['width'] = '834px'; options['height'] = '521px'; var container = document.getElementById('map_canvas'); var chart = new google.visualization.GeoChart(container); chart.draw(data, options); }; function myClickHandler(){ var selection = chart.getSelection(); 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); } </script>
Any help or direction appreciated.