将地区网址添加到Geochart

Question

I am creating a map using Google Geochart and need a listener so that when the user clicks on a region it loads a given URL.

My code is:

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

  function drawVisualization() {
   var data = google.visualization.arrayToDataTable([
    ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
    ['US', 20, '<a href="http://www.ipfa.org/council/branches/39/ipfa-americas/">Test</a>'],
    ['Canada', 20, 'http://www.ipfa.org/council/branches/106/ipfa-canada/'],
    ['GB', 20, 'http://www.ipfa.org/council/branches/52/ipfa-uk/'],
   ]);

   var chart = new google.visualization.GeoChart(document.getElementById('visualization'));

   google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    var row = selection[0].row;
    var url = data.getValue(row, 3);
    window.open(url);
   });

    chart.draw(data, {
     width: 800,
     height: 600,
     tooltip: {
      isHtml: true
     }
    }
   );
  }

The URL listener works on another map I use, what am I doing wrong to not work on this one?

Answer 1

There are two issues. First, you are using the wrong index to reference your URLs; they are in column 2, not column 3 (which doesn't exist):

var url = data.getValue(row, 3);

Second, one of your URL's (for the US) is an anchor tag, which won't work if passed to the window.open call. If you want anchor tags in the tooltips, set the value of the cell to the URL and formatted value of the URL column to the anchor tag:

['US', 20, {v: 'http://www.ipfa.org/council/branches/39/ipfa-americas/', f: '<a href="http://www.ipfa.org/council/branches/39/ipfa-americas/">Test</a>'}]

I would also suggest testing for the length of the selection array, because it is possible for the selection array to be empty if the user clicks a region twice in a row (the second click deselects the region), which would cause this line to throw an error:

var row = selection[0].row;

I suggest using this instead:

var selection = chart.getSelection();
if (selection.length) {
    var url = data.getValue(selection[0].row, 2);
    window.open(url);
}