地面オーバーレイ

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

例を見る(groundoverlay-simple.html)

地面オーバーレイの除去

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

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

例を見る(overlay-remove.html)

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

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