可視化: Geomap

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  7. イベント
  8. データポリシー
  9. Notes

概要

ジオマップは、国、大陸、地域のマップで、特定の地域に色と値が割り当てられます。値はカラースケールで表示され、地域のオプションのホバーテキストを指定できます。地図は、埋め込み Flash プレーヤーを使用してブラウザ内にレンダリングされます。地図はスクロールやドラッグはできませんが、ズームできるように設定できます。

例

ここでは、地域の表示スタイルを使用する例と、マーカーの表示スタイルを使用する例の 2 つを示します。

リージョンの例

地域スタイルでは、地域全体（通常は国）が、割り当てた値に対応する色で塗りつぶされます。コードで options['dataMode'] = 'regions' を割り当てて、地域スタイルを指定します。

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

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

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</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': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

読み込んでいます

google.charts.load パッケージ名は "geomap" です。

  google.charts.load('current', {'packages': ['geomap']});

Geomap 可視化クラス名は google.visualization.GeoMap です。

  var visualization = new google.visualization.GeoMap(container);

データ形式

2 つのアドレス形式がサポートされており、それぞれサポートされる列数と各列のデータ型が異なります。テーブル内のすべてのアドレスは、どちらか一方を使用する必要があります。異なるタイプを混在させることはできません。

  • 形式 1: 緯度/経度の位置情報。この形式は、dataMode オプションが「マーカー」の場合にのみ機能します。この形式を使用する場合は、Google マップ JavaScript を含める必要はありません。ロケーションは 2 つの列と、省略可能な 2 つの列で入力されます。
    1. [数値、必須] 緯度。正の数値は北、負の数値は南を表します。
    2. [数値、必須] 経度。正の数値は東、負の数値は西を表します。
    3. [数値、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される数値。4 列目を使用する場合、この列は必須です。
    4. [文字列、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される追加の文字列テキスト。
  • 形式 2: 住所、国名、地域名、地域、米国の大都市圏コード。この形式は、dataMode オプションを「マーカー」または「地域」に設定した場合に使用できます。ロケーションは 1 つの列と、オプションの列（2 つ）に入力されます。
    1. [文字列、必須] 地図上の場所。以下の形式を使用できます。
      • 具体的な住所（「1600 Pennsylvania Ave」など）。
      • 国名を文字列（「イギリス」など）、大文字の ISO-3166 コード、またはそれと同等の英語テキスト（「GB」や「イギリス」など）で指定します。
      • 大文字の ISO-3166-2 地域コード名、またはそれと同等の英語テキスト（「US-NJ」や「New Jersey」など）。注: リージョンを指定できるのは、dataMode オプションが「regions」に設定されている場合のみです。
      • 大都市圏の市外局番。さまざまなリージョンを指定するために使用される 3 桁の大都市圏コードで、米国のコードのみがサポートされています。電話番号は市外局番とは異なります。
    2. [数値、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される数値。3 列目を使用する場合、この列は必須です。
    3. [文字列、省略可] ユーザーがこの地域にカーソルを合わせたときに表示される追加の文字列テキスト。

注: 1 つのマップに表示できるエントリは最大 400 件です。DataTable または DataView が 400 を超える行を保持している場合は、最初の 400 行のみが表示されます。最速のモードは、場所が ISO コードで指定される dataMode='regions' と、緯度/経度エントリを含む dataMode='markers' です。最も遅いモードは、文字列アドレスを持つ dataMode='markers' です。

重要: DataTable には、使用する列の前に任意の列をすべて含める必要があります。たとえば、緯度/経度のテーブルを指定し、列 1、2、4 のみを使用する場合は、DataTable で列 3 を定義する必要があります（値を追加する必要はありません）。

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

構成オプション

名前 タイプ デフォルト 説明
region string 'world'

地図上に表示する領域。（周辺のエリアも表示されます）。国コード（大文字の ISO-3166 形式）か、次のいずれかの文字列を指定します。

  • world - （全世界）
  • us_metro - （米国、大都市圏）
  • 005 -（南アメリカ）
  • 013 -（中央アメリカ）
  • 021 -（北米）
  • 002 -（アフリカ全域）
  • 017 - （中央アフリカ）
  • 015 - （北アフリカ）
  • 018 - （南アフリカ）
  • 030 - （東アジア）
  • 034 - （南アジア）
  • 035 - （アジア/太平洋リージョン）
  • 009 -（オセアニア）
  • 145 - （中東）
  • 143 - （中央アジア）
  • 151 - （北アジア）
  • 154 - （北ヨーロッパ）
  • 155 - （西ヨーロッパ）
  • 039 - （南ヨーロッパ）

Geomap では、スクロール動作やドラッグ動作は有効ではなく、ズーム動作が制限されています。基本的なズームアウトを有効にするには、showZoomOut プロパティを設定します。
dataMode string 'リージョン'

地図上に値を表示する方法。次の 2 つの値がサポートされています。

  • regions - 領域全体を適切な色で色付けします。このオプションは、緯度/経度の住所では使用できません。 リージョンの例をご覧ください。
  • markers - 領域の上にドットを表示します。色とサイズが値を示します。マーカーの例をご覧ください。
width string '556 ピクセル' ビジュアリゼーションの幅。単位を指定しない場合、デフォルトの単位はピクセルです。
height string '347 ピクセル' ビジュアリゼーションの高さ。単位を指定しない場合、デフォルトの単位はピクセルです。
colors 0xRRGGBB の RGB 数値の配列 [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] ビジュアリゼーションの値に割り当てるカラー グラデーション。少なくとも 2 つの値が必要です。グラデーションには、すべての値と計算された中間値が含まれます。最も明るい色が最小値、最も暗い色が最大値になります。
showLegend boolean true true の場合、地図の凡例を表示します。
showZoomOut boolean false true の場合、zoomOutLabel プロパティで指定されたラベルのボタンを表示します。このボタンをクリックしても、zoomOut イベントがスローされる以外は何も行われません。ズームを処理するには、このイベントをキャッチして region オプションを変更します。showZoomOut を指定できるのは、region オプションがワールドビューよりも小さい場合のみです。ズームイン動作を有効にする 1 つの方法は、regionClick イベントをリッスンし、region プロパティを適切な地域に変更して、地図を再読み込みすることです。
zoomOutLabel string 'ズームアウト' ズームボタンのラベル。

メソッド

メソッド 戻り値の型 説明
draw(data, options) なし 地図を描画します。描画が完了する前に戻ることができます（drawingDone() イベントを参照）。
getSelection() 選択要素の配列 getSelection() の標準実装。選択した要素は行です。このメソッドは、dataMode オプションが「regions」の場合にのみ機能します。選択できるのは、値が割り当てられているリージョンのみです。
setSelection(selection) なし 標準の setSelection() 実装。1 つの選択を行の選択として扱い、複数の行の選択をサポートします。値が割り当てられているリージョンのみを選択できます。

イベント

名前 説明 プロパティ
error グラフのレンダリング中にエラーが発生したときに呼び出されます。 id、message
select

値が割り当てられている地域をユーザーがクリックすると呼び出されます。選択された内容を確認するには、getSelection() を呼び出します。dataMode オプションが「regions」に設定されている場合にのみ使用できます。

注: 一定の制限により、ブラウザでページにファイル（select「file://」）を使用します。サーバー（例:"http://www").

 なし
regionClick

地域がクリックされたときに呼び出されます。「地域」と「マーカー」の両方の dataMode で機能します。 ただし、マーカーモードでは、「region」オプションに割り当てられた特定の国についてはスローされません（特定の国がリストされている場合）。

注: 一定の制限により、ブラウザでページにファイル（regionClick「file://」）を使用します。サーバー（例:"http://www").

 region という単一プロパティを持つオブジェクト。このプロパティは、クリックされた領域を表す ISO-3166 形式の文字列です。
zoomOut

ズームアウト ボタンがクリックされたときに呼び出されます。ズームを処理するには、このイベントをキャッチして region オプションを変更します。

注: 一定の制限により、ブラウザでページにファイル（zoomOut「file://」）を使用します。サーバー（例:"http://www").

 なし
drawingDone ジオマップの描画が完了すると呼び出されます。 なし

データポリシー

店舗は Google マップによってジオコーディングされます。ジオコーディングを必要としないデータは、どのサーバーにも送信されません。データポリシーについて詳しくは、Google マップ利用規約をご覧ください。

注

ウェブサーバーの URL（例: http://www.myhost.com/myviz.html）ではなく、ブラウザ内のファイルの場所（例: file:///c:/webhost/myhost/myviz.html）からアクセスした場合は、Flash のセキュリティ設定により、この設定（およびすべての Flash ベースの可視化）が正しく機能しない可能性があります。通常、これはテスト上の問題です。この問題は、Macromedia のウェブサイトに記載されている方法で解決できます。