地面オーバーレイ

プラットフォームを選択: Android iOS JavaScript
  1. はじめに
  2. 地面オーバーレイの追加
  3. 地面オーバーレイの除去

はじめに

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

オーバーレイのその他のタイプについては、地図上での描画をご覧ください。

地面オーバーレイの追加

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

TypeScript

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

let historicalOverlay;

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

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

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}

JavaScript

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 40.74, lng: -74.18 },
  });
  const imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}
サンプルを表示
// この例では、GroundOverlay を使用して地図上に画像を配置しています // ニュージャージー州ニューアークのアンティーク マップを表示します let historicalOverlay; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 40.74, lng: -74.18 }, }); const imageBounds = { north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655, }; historicalOverlay = new google.maps.GroundOverlay( "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg", imageBounds ); historicalOverlay.setMap(map); }
/* 常に地図の高さを明示的に設定して、地図を含む div * 要素のサイズを定義します。*/ #map { height: 100%; } /* 省略可: サンプルページをウィンドウ全体に表示します。*/ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Ground Overlays</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> <!-- Async script executes immediately and must be after any DOM elements used in callback. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly&channel=2" async ></script> </body> </html>

サンプルを試す

地面オーバーレイの除去

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

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

サンプルを表示