GoogleのGeochartを使ってみた

Visualization: Geochart - Google Charts — Google Developers
のサンプルコードをhtmlファイルに張り付けるだけで、世界地図の表示、作成したテーブルに応じたグラフを作成することができます。

サンプルコード

<html>
  <head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geochart']});
   google.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var options = {};

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  };
  </script>
  </head>
  <body>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

動作イメージ

f:id:saj_kz:20140223180140p:plain

google.visualization.arrayToDataTableで設定した地域に色づけがされます。

クリックした地域名をalertで表示する

次に、GeoChartにイベントを設定して、クリックされた地域名をalertで表示してみます。addListenerを以下のように設定します。

google.visualization.events.addListener(chart, 'regionClick', selectHandler);

で、作成したchart(世界地図)に対してregionClickイベントを追加します。regionClickイベントは、世界地図の地域をクリックした際に呼び出されるイベントです。
その他の使用できるイベントについては、Visualization: Geochart - Google Charts — Google Developersの「Events」項を参照してみて下さい。
regionClickイベントが呼び出されると、第3引数で登録したselectHandlerメソッドが実行されます。selectHandlerメソッドの第1引数には、クリックした国の地域コードが ISO-3166の形式でセットされており、以下の実装例では、reg.regionで地域コードが取り出せます。日本をタッチすると"JP", ロシアなら "RU" がalertで表示されます。

selectHandlerの実装例：

function selectHandler(reg) {
  console.log(reg);
  alert(reg.region);
}

これらを最初のサンプルコードに組み込みます。

regionClickを追加したコード

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);

    		google.visualization.events.addListener(chart, 'regionClick', selectHandler);

    		function selectHandler(reg) {
    		  console.log(reg);
    		  alert(reg.region);
    		}
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

動作例

クリックした地域の地域コードがalertで表示される。
※動作しない場合はF5での再読み込み後に、試してみて下さい。

使用するデータ、イベントを工夫すれば色々できそうです！