データレイヤ

プラットフォームを選択: Android iOS JavaScript

Google マップのデータレイヤには、任意の地理空間データを格納するコンテナがあります。 データレイヤを使うと、カスタムデータを保存したり、Google マップ上に GeoJSON データを表示したりできます。

概要

データレイヤの詳細については DevBytes のこちらの動画をご覧ください。

Maps JavaScript API を使うと、マーカーやポリライン、ポリゴンなどのさまざまなオーバーレイを地図に表示できます。これらの各注釈データはスタイル情報と位置データを結び付けます。google.maps.Data クラスは任意の地理空間データを格納するコンテナです。これらのオーバーレイを追加する代わりに、データレイヤを使って任意の地理空間データを地図に追加する方法もあります。API はデフォルトで、データに含まれる点、線分、多角形などのジオメトリをマーカー、ポリライン、ポリゴンとして表示します。これらの対象物は通常のオーバーレイと同様にスタイル化することも、データセットに含まれる他のプロパティに応じたスタイリング規則を適用することもできます。

google.maps.Data クラスを使うと、次の処理が可能になります。

  • 地図上にポリゴンを描画する
  • GeoJSON データを地図に追加する
    GeoJSON はインターネット上の地理空間データの標準フォーマットです。Data クラスは、そのデータ表現内の GeoJSON 構造に従い、それによって GeoJSON データの表示が容易になります。loadGeoJson() メソッドを使うと、簡単に GeoJSON データのインポート、およびポイント、ライン ストリング、ポリゴンの表示ができます。
  • google.maps.Data を使って任意のデータをモデル化する
    実世界の大半のエンティティには、関連する他のプロパティがあります。たとえば、店には営業時間が、道路には走行速度が、ガールスカウトにはクッキーを売る担当部門があります。google.maps.Data を使うと、これらのプロパティをモデル化して、それに応じてデータをスタイル化できます。
  • データの表現方法を選択して、臨機応変に変更できる
    データレイヤを使うと、データのビジュアリゼーションとインタラクションに関する選択が行えます。たとえば、コンビニを表示する地図を見ているときに、乗車券を扱っている店だけを表示させることができます。

ポリゴンの図形描画

Data.Polygon クラスはポリゴンのワインディングを処理します。このクラスには、緯度と経度の座標として定義されている 1 つ以上の線形リングの配列を渡すことができます。最初の線形リングは、ポリゴンの外側の境界を定義します。複数の線形リングを渡した場合、2 番目以降の線形リングは、ポリゴンの内側のパス（穴）を定義するために使用されます。

次のサンプルでは、内側に 2 つの穴がある長方形のポリゴンを作成します。

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

GeoJSON の読み込み

GeoJSON はインターネット上で地理空間データを共有するための標準フォーマットです。軽量で可読性が高いため、共有と共同編集を行うには最適なフォーマットです。データレイヤを使うと、以下の 1 行のコードで GeoJSON のデータを Google マップに追加できます。

map.data.loadGeoJson('google.json');

各地図には map.data オブジェクトがあり、これは GeoJSON を含む任意の地理空間データのデータレイヤとして機能します。GeoJSON ファイルを読み込んで表示するには、data オブジェクトの loadGeoJSON() メソッドを呼び出します。以下のサンプルでは、地図を追加して、外部の GeoJSON データを読み込んでいます。

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

window.initMap = initMap;
index.js
サンプルを表示

サンプルを試す

GeoJSON のサンプル

このページで紹介しているサンプルの多くは、共通の GeoJSON ファイルを使用しています。以下のファイルでは、「Google」の 6 文字をポリゴンとしてオーストラリアの上に表示するよう定義しています。このファイルを自由にコピーまたは修正し、データレイヤの機能を確認してみましょう。

注: 別のドメインから json ファイルを読み込むには、そのドメインでクロスオリジン リソース シェアリングを有効にしておく必要があります。

「google.json」の文字の左にある小さな矢印マークをクリックすると、ファイルの全体が表示されます。

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

GeoJSON データのスタイル化

データの表示方法を指定するには Data.setStyle() メソッドを使います。setStyle() メソッドは、StyleOptions オブジェクト リテラルか、各対象物のスタイルを計算する関数のどちらかを受け取ります。

シンプルなスタイル規則

対象物をスタイル化するには、StyleOptions オブジェクト リテラルを setStyle() に渡すのが最も簡単な方法です。こうするとコレクションの各対象物に対して、1 つのスタイルが設定されます。なお、各対象物のタイプでレンダリングされるのは、利用可能なオプションのサブセットのみです。そのため、1 つのオブジェクト リテラルに含まれる異なる対象物タイプに対して、複数のスタイルを組み合わせることができます。たとえば、以下のコード スニペットでは、ポイント ジオメトリのみに作用するカスタム icon と、ポリゴンのみに作用する fillColor の両方を設定しています。

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

使用可能なスタイルと対象物の組み合わせについては、スタイル オプションをご覧ください。

以下のサンプルでは、StyleOptions オブジェクト リテラルを使って、複数の対象物に対してストロークを設定し、色を付けています。各ポリゴンのスタイルが同じである点に注意してください。

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

宣言型のスタイル規則

マーカーやポリラインなどの多数のオーバーレイのスタイルを更新したい場合、通常は、地図上の各オーバーレイを繰り返し処理して、スタイルを個別に設定する必要があります。データレイヤを使うと、宣言的に規則を設定して、それをデータセット全体に適用することが可能です。データまたは規則が更新されると、すべての対象物に自動でスタイリングが適用されます。スタイルのカスタマイズには、対象物プロパティを使います。

たとえば、以下のコードセットでは、ASCII 文字セットにおける各文字の位置を調べて、google.json 内の各文字の色を設定しています。ここでは、データとともに文字の位置をエンコードしています。

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

スタイルの削除

適用したスタイルを削除する場合は、setStyles() メソッドに空のオブジェクト リテラルを渡します。

// Remove custom styles.
map.data.setStyle({});

こうすると指定したすべてのカスタム スタイルが削除され、対象物はデフォルトのスタイルで表示されるようになります。今後、対象物をレンダリングしたくない場合は、StyleOptions の visible プロパティを false に設定します。

// Hide the Data layer.
map.data.setStyle({visible: false});

デフォルト スタイルのオーバーライド

基本的にスタイリング規則は、データレイヤ内のすべての対象物に適用されますが、 指定の対象物に対して特別なスタイリング規則を適用することもできます。試しに、ある対象物をクリックしたときにハイライト表示になるようにしてみましょう。

特別なスタイリング規則を適用するときは、overrideStyle() メソッドを使用します。setStyle() で指定済みのグローバル スタイルに加えて、overrideStyle() メソッドで変更したプロパティもすべて適用されます。たとえば、以下のコードはポリゴンがクリックされたときに、塗りつぶしの色のみ変更します。その他のスタイルは何も設定していません。

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

オーバーライドしたスタイルをすべて削除するには、revertStyle() メソッドを呼び出します。

スタイル オプション

対象物のタイプによって、スタイリングに使えるオプションは異なります。 たとえば、fillColor はポリゴン ジオメトリに対してのみレンダリングされ、icon はポイント ジオメトリにのみ表示されます。詳しくは、StyleOptions のリファレンス ドキュメントをご覧ください。

すべてのジオメトリに使用可能

  • clickable: true なら、対象物はマウスイベントやタッチイベントを受け付けます。
  • visible: true なら、対象物が表示されます。
  • zIndex: zIndex の順で、すべての対象物が地図上に表示されます。つまり、この値が大きい対象物は、値が小さいものよりも前面に表示されます。マーカーは必ず、ライン ストリングやポリゴンよりも前面に表示されます。

ポイント ジオメトリに利用可能

  • cursor: マウスカーソルを重ねたときのカーソル表示。
  • icon: ポイント ジオメトリに対して表示するアイコン。
  • shape: ヒット検出に使うイメージマップの定義。
  • title: ロールオーバー テキスト。

ライン ジオメトリに利用可能

  • strokeColor: ストロークの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • strokeOpacity: ストロークの不透明度（0.0～1.0 で指定）。
  • strokeWeight: ピクセル単位のストローク幅。

ポリゴン ジオメトリに利用可能

  • fillColor: 塗りつぶしの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • fillOpacity: ストロークの不透明度（0.0～1.0. で指定）。
  • strokeColor: ストロークの色。名前付き拡張色を除くすべての CSS3 色に対応します。
  • strokeOpacity: ストロークの不透明度（0.0～1.0 で指定）。
  • strokeWeight: ピクセル単位のストローク幅。

イベント ハンドラの追加

対象物は mouseup や mousedown などのイベントに応答します。イベント リスナーを追加すると、ユーザーが地図上のデータとインタラクションを行えるようになります。以下は、マウスオーバー イベントを追加して、マウスカーソルの下にある対象物情報を表示するサンプルです。

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

データレイヤ イベント

以下のイベントは、どのジオメトリ タイプでも共通して利用できます。

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

これらのイベントについて詳しくは、google.maps.data クラスのリファレンス ドキュメントをご覧ください。

外観を動的に変更する

データレイヤにスタイルを設定するには、各対象物のスタイルを計算する関数を google.maps.data.setStyle() メソッドに渡します。この関数は対象物のプロパティが更新されるたびに呼び出されます。

以下のサンプルでは、対象物の isColorful プロパティを更新するために、click イベントに対してイベント リスナーを追加しています。プロパティが設定されるとすぐに、対象物のスタイリングが更新され、変更内容が反映されます。

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});