<div id="regions_div"></div>
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function selectHandler(reg) {
alert('あなたがクリックした国の国名コードは'+ reg.region + 'です。');
}
function drawRegionsMap() {
const codes = [
['Country', 'Name'],
['Germany', 'ドイツ'],
['United States', 'アメリカ'],
['Brazil', 'ブラジル'],
['Canada', 'カナダ'],
['France', 'フランス'],
['RU', 'ロシア'],
['JP', 'にほん']
];
const data = google.visualization.arrayToDataTable(codes);
const options = {
defaultColor:'#3cb371',
};
const chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
google.visualization.events.addListener(chart, 'regionClick', selectHandler);
chart.draw(data, options);
}
This Pen doesn't use any external CSS resources.