<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.gstatic.com/charts/loader.js