CODEWITHSUNDEEP
google-mapsgoogle-visualization
BENCT
BENCT

Reputation: 43

geochart regions clickable urls

We want to embed a really basic interactive map on our website, where clicking a region will take you to a specific page on our site. We would like to use the regions in google geochart

This is the map we are working with https://jsfiddle.net/tyvnfxf4/

      google.charts.load('current', {'packages':['geochart']});
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['England', 400],
      ['Wales', 300],
      ['Scotland', 400],
      ['Ireland', 600],

    ]);

    var options = {
      region: 'GB',

      resolution: 'provinces',
    };

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

    chart.draw(data, options);
  }

And we would want: Wales to link to www.example.com/wales Ireland to link to www.example.com/ireland etc

Can any help?

Many thanks

Upvotes: 3

Views: 3620

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

there are a number of ways to handle, but the key is using the 'select' event

keep in mind, the 'select' event is fired both when something is selected and de-selected,
so make sure length > 0

recommend using a column in the DataTable to store the URLs

use a DataView to hide the column from the chart

then get the URL based on the chart selection

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity', 'Domain'],
      ['England', 400, 'www.example.com/England'],
      ['Wales', 300, 'www.example.com/Wales'],
      ['Scotland', 400, 'www.example.com/Scotland'],
      ['Ireland', 600, 'www.example.com/Ireland'],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);

    var options = {
      region: 'GB',
      resolution: 'provinces'
    };

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

    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length > 0) {
        console.log(data.getValue(selection[0].row, 2));
        //window.open('http://' + data.getValue(selection[0].row, 2), '_blank');
      }
    });

    chart.draw(view, options);
  },
  packages:['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 600px; height: 500px;"></div>

Upvotes: 10

Related Questions