以上で完了です。

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

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

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

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

地面オーバーレイ

  1. はじめに
  2. 地面オーバーレイの追加
  3. 地面オーバーレイの除去

はじめに

オーバーレイは緯度と経度で表される座標に紐付いたマップ上のオブジェクトで、マップをドラッグしたりズームしたりすると連動して動きます。マップ上に画像を配置する場合、GroundOverlay オブジェクトを使えます。

その他のオーバーレイのタイプについては、マップ上に描画するをご覧ください。

地面オーバーレイの追加

GroundOverlay のコンストラクタでは、パラメータとして画像の URL およびその画像の LatLngBounds を指定します。画像がマップ上にレンダリングされます。その際、指定の領域に制約され、マップの投影法を使用して適合が行われます。

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<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 a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

例を見る(groundoverlay-simple.html)

地面オーバーレイの除去

マップからオーバーレイを除去するには、オーバーレイの setMap() メソッドを呼び出して null を渡します。このメソッドを呼び出してもオーバーレイは削除されないことに注意してください。マップからオーバーレイが除去されるだけです。オーバーレイを削除する場合は、オーバーレイをマップから除去して、そのオーバーレイ自体を null に設定します。

function removeOverlay() {
  historicalOverlay.setMap(null);
}

例を見る(overlay-remove.html)

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

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。