以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

データレイヤ

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

概要

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

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

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

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

ポリゴンの描画

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

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

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

function initMap() {
  var 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.
  var 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.
  var 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.
  var 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])})
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var 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.
  var 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.
  var 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.
  var 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])})
}

例を見る

GeoJSON のロード

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

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

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

var 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');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var 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');
}

例を見る

GeoJSON のサンプル

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

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

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

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'});
});

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

スタイル オプション

地物のタイプによって、スタイリングに使えるオプションは異なります。たとえば、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();
});

例を見る

フィードバックを送信...

このページ
ドキュメントのフィードバック
Google Maps JavaScript API
Google Maps JavaScript API
サービスのフィードバック
ご不明な点がありましたら、Google のサポートページをご覧ください。