はじめに

Google Charts を利用すると様々なグラフを簡単に描画することができます。

例えば・・・・・・

Histogram(ヒストグラム)
Geo Chart(地図グラフ)
Line Chart(折れ線グラフ)
Candlestick Chart(箱ひげ図)

などがあります。

参照
公式ホームページ

今回はその中でも、GeoChartsと呼ばれる地図の描画方法について紹介します。

記述方法

全コードは以下の通りです。

geoCharts.html

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: プロジェクトのmapsApiKeyを取得する必要があります。
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.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('regions_div'));
        //地図を描画する
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

解説

上記のソースコードを上から解説していきます。

1. htmlで地図の描画領域を設定する

google chartsで地図を描画するためhtmlの<body>タグ内に領域を設定します。要素を特定するためにidをつけておきます。今回はregions_divと言うid名をつけています。

class名を指定して、getElementByClassNameで要素を特定しようとすると、うまく描画されません。詳しく原因を知りたい場合は以下をチェックしてみてください。
getElementsByClassNameとgetElementByIdの返り値の違い

<html>
 <!-- ..... -->
 <body>
     <div id="regions_div" style="width: 900px; height: 500px;">
     //ここに地図が表示される
     </div>
 </body>
</html>

2.Google chartsの読み込み

google.charts.load関数でバージョンやパッケージを読み込みます。

第一引数にはgoogle Chartsのバージョン
第二引数にはパッケージ(packages)

を読み込みます。
今回は、google Chartsの最新バージョンを使用するので第一引数には'current',グラフはGeo Chartを使いたいので、第二引数にはgeochartを指定します。

  google.charts.load('current', {
    'packages': ['geochart'],
    // Note: プロジェクトのmapsApiKeyを取得する必要があります。
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
  });

3.読み込み後のコールバック関数を指定する

google.charts.setOnLoadCallbackでコールバック関数を指定することで、地図を描画します。
今回はdrawRegionMapと言う関数名を指定しています。

google.charts.setOnLoadCallback(drawRegionsMap);

この関数はsetOnLoadCallback関数が呼ばれる前に定義しておく必要があります。

4.描画関数を作成する

地図を描画するための描画関数を作成します。今回は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.getElementByClassName('regions_div'));

  chart.draw(data, options);
}

arrayToDataTable(twoDArray, opt_firstRowIsData)
- 第一引数：twoDArray
- 二次元配列で指定する。opt_firstRowIsDataがfalseであれば、最初の行がヘッダーとして表示される。
- 第二引数：opt_firstRowIsData
- デフォルトがfalse。trueにすると全ての行をデータをみなします。
google.visualization.class_name(dom_element)
- visualization classを指定してインスタンスを返す必要がある
- 今回はGeoChart
- 第一引数：dom_element
  - 描画するためのDOMを指定します。
  - 1.で設定したDOMを指定する
draw(data[, options])
- 第一引数:data
  - 地図を表示するためデータ(DataTable)
  - 今回で言うと、dataをさす
- 第二引数:options
  - 地域名や表示モードの設定を行うことができます。
  - 例えば、日本だけを描画したいときなどに使います。

さいごに

今回は、Google ChartsのGeo Chartの基本的な描画方法について紹介しました。
次回は、応用的な描画について書いていこうと思います。

何か疑問点などありましたら、どしどしコメントお願いします🙇‍♂️

参考

https://developers.google.com/chart/interactive/docs/gallery/geochart#core

Google Chartで地図を表示してみた！