Geochart Regionen anklickbare URLs

Question

Wir möchten eine wirklich einfache interaktive Karte auf unserer Website einbetten, wo Sie durch Klicken auf eine Region auf eine bestimmte Seite unserer Website gelangen. Wir möchten, dass die Regionen in google GeoChart verwenden

Dies ist die Karte arbeiten wir mit 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); 
    } 

Und wir wollen: Wales verlinken auf www.example.com/wales Irland auf www.example.com/ireland verlinken usw.

Kann mir helfen?

Vielen Dank

Answer 1

gibt es eine Reihe von Möglichkeiten, zu handhaben, aber der Schlüssel ist mit dem 'select' Ereignisse

im Auge zu behalten, das 'select' Ereignis ausgelöst wird, sowohl wenn etwas ausgewählt und abgewählt,
so stellen Sie sicher, length > 0

im DataTable unter Verwendung einer Säule empfehlen die URLs speichern

eine DataView verwenden Sie die Spalte aus der Tabelle

dann erhalten Sie die URL auf der Grundlage der chart Auswahl

siehe folgende Arbeits Schnipsel ...

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>