I am trying to display a map using google's 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.

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.

• javascript
• google-visualization
• dom-events

• Are you trying to get your myClickHandler when the user clicks on a region? Search for "enableRegionInteractivity" in the GeoChart docs url you pointed above. – Amar Commented Jan 24, 2014 at 18:00
• Are you also by any chance trying to show just Russia, France and Spain in the map without the other countries? – Amar Commented Jan 24, 2014 at 18:01
• It says its enabled by default on region mode, plus I still dont know how to pick up these firing events. No there will be other countries (most of them), this is just a test. – holmeswatson Commented Jan 27, 2014 at 9:41

1 Answer 1

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/