可視化: 地図

  1. 概要
  2. 名前のついた場所
  3. ジオコーディングされた地域
  4. マーカーのカスタマイズ
  5. マルチマーカー セットの追加
  6. マップのスタイル設定
  7. 読み込み中
  8. データ形式
  9. 構成オプション
  10. Methods
  11. イベント
  12. データポリシー

概要

Google マップグラフは、Google Maps API を使用して地図を表示します。データ値は、地図上にマーカーとして表示されます。データ値は座標（経度と緯度のペア）または住所です。指定されたすべてのポイントを含むように地図が拡大縮小されます。

地図を衛星画像ではなく線画にする場合は、代わりにジオチャートを使用します。

名前のついた場所

以下の図は、人口の上位 10 か国の地図で示されているように、名前でマーカーを配置する場所を表しています。

ユーザーがマーカーの 1 つを選択すると、国の名前と人口が含まれるツールチップが表示されます。これは、showInfoWindow オプションを使用したためです。また、ユーザーがマーカーの 1 つに一時的にカーソルを合わせると、「showTooltip」オプションを使用したため、「タイトル」のヒントも同じ情報で表示されます。HTML の全文は次のとおりです。 

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
    'packages': ['map'],
    // 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', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

ジオコーディングされた地域

緯度と経度でロケーションを指定することもできます。この場合、指定したロケーションよりも高速に読み込まれます。

上のグラフは、緯度と経度で 4 つの場所を特定しています。

データ
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);
完全な 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":["map"],
        // 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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

マーカーのカスタマイズ

マーカーは、ウェブ上の他の場所に配置することもできます。以下に、iconarchive.com の青いピンを使用した例を示します。

上のグラフでピンを選択すると、そのピンが傾きます。PNG、GIF、JPG がサポートされています。

データ
  var options = {
    icons: {
      default: {
        normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
        selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
    }
  };
完全な 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":["map"],
        // 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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var options = {
          icons: {
            default: {
              normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
              selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
            }
          }
        };

        var map = new google.visualization.Map(document.getElementById('map_markers_div'));
        map.draw(data, options);
      }

    </script>
  </head>

  <body>
    <div id="map_markers_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

複数のマーカー セットを追加する

デフォルトのマーカー セットに加えて、複数のマーカー セットを作成することもできます。

追加のマーカー セットを作成するには、icons オプションに ID を追加して、マーカー画像を設定します。次に、データテーブルに列を追加し、データテーブルの各行に使用するマーカーセットの ID を設定します（'default' または null を使用してデフォルトのマーカーを使用することもできます）。
オプション
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
完全な 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': ['map'],
      // 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 = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

      data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Scranton PA, United States',      'Scranton',   'green'],
        ['Washington DC, United States',    'Washington', 'pink' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],
        ['Buffalo NY, United States',       'Buffalo',    'blue' ],
        ['Baltimore MD, United States',     'Baltimore',  'pink' ],
        ['Albany NY, United States',        'Albany',     'blue' ],
        ['Allentown PA, United States',     'Allentown',  'green']
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

マップのスタイル設定

地図のビジュアリゼーションには、カスタム スタイルを設定する機能があり、1 つまたは複数のカスタム マップタイプを作成できます。

カスタムの地図タイプを定義するには、地図のスタイル オブジェクトを作成し、地図のオプションで ID（mapTypeId）の下に配置します。次に例を示します。 

  var options = {
    maps: {
      <map style ID>: <map style object>
    }
  };

カスタムのマップタイプは、割り当てたマップスタイル ID で後で参照できます。

地図のスタイル オブジェクトには、地図タイプのコントロールの表示名（mapTypeId と一致させる必要はありません）と、スタイルを設定する各要素のスタイル オブジェクトを含む styles の配列が含まれます。nameGoogle Maps API リファレンスには、カスタムのマップタイプを作成するための各種要素、対象物、スタイルタイプのリストが含まれています。

注: カスタム mapTypeId は maps オプションの下に配置する必要があります。
オプション
      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };
完全な 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': ['map'],
      // 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 = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

カスタムのマップタイプを作成するだけでなく、マップタイプ コントロールで、ユーザーが表示できるマップを mapTypeIds オプションで指定できます。デフォルトでは、カスタムのマップタイプを含むすべてのマップタイプが、マップタイプのコントロールに表示されます。mapTypeIds オプションは、ユーザーに表示を許可するマップタイプの文字列の配列を受け入れます。これらの文字列は、デフォルトの地図スタイル（法線、衛星、地形、ハイブリッド）の事前定義された名前、または定義したカスタムのマップタイプのマップ スタイル ID のいずれかを参照する必要があります。mapTypeIds オプションを設定すると、この配列で指定したマップタイプのみが地図で利用可能になります。

また、このオプションを mapType オプションと組み合わせて使用すると、地図のスタイルをデフォルトに設定できますが、mapTypeIds 配列に含めないでください。これにより、その地図は初期読み込み時にのみ表示されます。

 
      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
        maps: {
          styledMap: {
            name: 'Styled Map',
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]},
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]},
              {featureType: 'road.highway', elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
          ]},
          redEverything: {
            name: 'Redden All The Things',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#fde0dd'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#67000d'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#67000d'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
          ]},
          imBlue: {
            name: 'All Your Blues are Belong to Us',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#c5cae9'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#023858'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#0288d1'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
          ]}
        }
      };

読み込み中

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

ここで示した例で使用されているものをそのままコピーするのではなく、プロジェクト用に独自のmapsApiKeyを取得する必要があります。詳細については、読み込み設定をご覧ください。

      google.charts.load("current", {
        "packages":["map"],
        // 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.visualization.Map です。短縮された名前（Map）は JavaScript Map クラスと競合するため、chartType: 'Map' を指定しても、ChartWrapper はこのパッケージを自動的に読み込みません。代わりに chartType: 'google.visualization.Map' を指定することもできます。

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

データ形式

次の 2 つの代替データ形式がサポートされています。

  1. 緯度 / 経度ペア - 最初の 2 列は、それぞれ経度と緯度を示す数値にする必要があります。オプションの 3 番目の列には、最初の 2 つの列で指定された場所を表す文字列が入ります。
  2. String address - 最初の列は、アドレスを含む文字列にします。この住所はできる限り完全なものにする必要があります。オプションの 2 番目の列には、最初の列の位置を表す文字列が入ります。文字列アドレスの読み込みは、特に住所が 10 を超えると遅くなります。

注: 緯度/経度のペアでは、特に大規模なデータの場合、地図の読み込みがはるかに速くなります。大規模なデータセットには、このオプションを使用することをおすすめします。住所を緯度経度地点に変換する方法については、Google Maps API をご覧ください。マップには、最大 400 個のエントリを表示できます。データが 400 行を超える場合、最初の 400 行のみが表示されます。

設定オプション

名前
enableScrollWheel

true に設定すると、マウスのスクロール ホイールを使用したズームインとズームアウトが可能になります。

型: boolean
デフォルト: false
アイコン

一連のカスタム マーカーを保持します。各マーカー セットには、normal と selected のマーカー画像を指定できます。default オプションを使用してデフォルト セットを設定できます。また、一意のマーカー ID を設定してカスタム マーカー セットを設定することもできます。

var options = {
  icons: {
    default: {
      normal:   '/path/to/marker/image',
      selected: '/path/to/marker/image'
    },
    customMarker: {
      normal:   '/path/to/other/marker/image',
      selected: '/path/to/other/marker/image'
    }
  }
};
タイプ: オブジェクト
デフォルト: null
LineColor

showLine が true の場合、線の色を定義します。例: 「#800000」。

型: string
デフォルト: デフォルトの色
LineWidth

showLine が true の場合、線の幅をピクセル単位で定義します。

タイプ: 数値
デフォルト: 10
maps.<mapTypeId>

カスタムのマップタイプのプロパティを含むオブジェクト。このカスタムのマップタイプには、カスタム マップタイプに指定した mapTypeId がアクセスします。作成されたカスタム マップタイプごとに新しい mapTypeId を指定する必要があります。各カスタム マップタイプには、次の 2 つのプロパティを含める必要があります。

  • name: スタイル付き地図タイプの表示名
  • style: スタイル付き地図タイプのスタイル オブジェクトを含む配列
タイプ: オブジェクト
デフォルト: null
maps.<mapTypeId>.name

useMapTypeControl が true に設定されている場合に、地図のコントロールに表示される地図の名前。

型: string
デフォルト: null
maps.<mapTypeId>.styles

カスタムのマップタイプのさまざまな要素のスタイル オブジェクトを保持します。

各スタイル オブジェクトには featureType、elementType、stylers の 1 ～ 3 個のプロパティを含めることができます。featureType と elementType を省略すると、スタイルは地図のすべての対象物 / 要素に適用されます。

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

各種の対象物、要素、スタイラの詳細については、マップのドキュメントをご覧ください。

タイプ: 配列
デフォルト: null
mapType

表示する地図の種類。有効な値は、「normal」、「terrain」、「satellite」、「hybrid」、カスタムマップタイプの ID（存在する場合）です。

型: string
デフォルト: 'hybrid'
mapTypeId

地図タイプのコントロール（useMapTypeControl: true）を使用している場合、この配列で指定された ID が、地図タイプのコントロールに表示される唯一のマップタイプになります。このオプションを設定しない場合、地図の種類のコントロールはデフォルトで、標準の Google マップの地図タイプのコントロール オプションと、使用可能なカスタムのマップタイプのすべてになります。

タイプ: 配列
デフォルト: null
情報ウィンドウ

true に設定すると、ユーザーがポイント マーカーを選択したときに、場所の説明が別のウィンドウに表示されます。このオプションは、バージョン 45 まで showTip という名前でした。showTooltip もご覧ください。

型: boolean
デフォルト: false
ショーライン

true に設定すると、すべての地点を通る Google マップのポリラインが表示されます。

型: boolean
デフォルト: false
ツールチップを表示

true に設定すると、マウスがポイント マーカーの上に配置されたときに、位置の説明がツールチップとして表示されます。このオプションは、バージョン 45 まで showTip という名前でした。なお、現時点では HTML はサポートされていないため、ツールチップには未加工の HTML タグが表示されます。

型: boolean
デフォルト: false
useMapTypeControl を使用する

ユーザーが [地図、衛星、ハイブリッド、地形] を切り替えられるようにする地図タイプのセレクタを表示する。useMapTypeControl を false に設定する（デフォルト）場合、セレクタは表示されず、タイプは mapType オプションによって決まります。

型: boolean
デフォルト: false
zoomLevel

地図の最初のズームレベルを示す整数。0 は完全にズームアウトし（世界全体）、19 は最大ズームレベルです。（Google Maps API のズームレベルをご覧ください）。

タイプ: 数値
デフォルト: 自動

メソッド

メソッド
draw(data, options)

地図を描画します。

戻り値の型: なし
getSelection()

標準の getSelection() 実装。選択要素はすべて行要素です。複数選択した行を返すことができます。

戻り値の型: 選択要素の配列
setSelection(selection)

標準の setSelection() 実装。すべての選択エントリを行の選択として扱います。複数行の選択がサポートされます。

戻り値の型: なし

イベント

名前
error

グラフのレンダリング中にエラーが発生しました。

プロパティ: ID、メッセージ
select

標準の選定イベント

プロパティ: なし

データポリシー

地図は Google マップに表示されます。データポリシーについて詳しくは、Google マップの利用規約をご覧ください。