geochart regions clickable url

Question

私たちは本当に基本的なインタラクティブマップを当社のウェブサイトに埋め込みたいのですが、地域をクリックするとサイトの特定のページに移動します。私たちは、これは我々が 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); 
    } 

で作業しているマップがある

グーグルgeochartで領域を使用したいと思いますそして、我々は望む： ウェールズはwww.example.com/wales アイルランドへのリンクwww.example.com/irelandにリンクする など

助けてもらえますか？

感謝

Answer 1

が処理するためのいくつかの方法がありますが、キー

は心に留めておく'select'イベントを使用している、'select'イベントが発生し、両方の何かを選択し、選択解除されたときに、
ので確認しlength > 0

URLを保存するためにDataTableで列を使用することをお勧めし

はあなたホワイトハットchart選択

次の作業のスニペットを参照してください...

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>