オーバーレイ画像

グラウンドオーバーレイの表示

ポリゴンは、任意のサイズの領域を表すオーバーレイとしては便利ですが、画像を表示することができません。地図上に表示したい画像がある場合は、GroundOverlay オブジェクトを使用します。 GroundOverlay のコンストラクタは、画像の URL と画像の LatLngBounds をパラメータとして指定します。画像が指定された境界線に沿って地図上にレンダリングされ、地図の投影を使用して調整されます。

コンストラクタ	説明
GroundOverlay(url:string, bounds:LatLngBounds, opts?:GroundOverlayOptions)	指定された画像 URL と LatLngBounds からグラウンドオーバーレイを作成します。画像は現在の境界に合わせて拡大/縮小され、現在の地図投影を使用して投影されます。

var newark = new google.maps.LatLng(40.740, -74.18);
 var imageBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(40.716216,-74.213393),
  new google.maps.LatLng(40.765641,-74.139235));
 var myOptions = {
 zoom: 13,
 center: newark,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 }
 var map = new google.maps.Map
   (document.getElementById("map_canvas"), myOptions);
 var oldmap = new google.maps.GroundOverlay(
  "https://legacy.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
   imageBounds);
 oldmap.setMap(map);

サンプルコード

サンプル.js 次の例では、地図上にニュージャージー州ニューアークの古い地図をオーバーレイとして表示します:

function initialize() {
  var newark = new google.maps.LatLng(40.740, -74.18);
  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(40.712216,-74.22655),
      new google.maps.LatLng(40.773941,-74.12544));
  var myOptions = {
    zoom: 13,
    center: newark,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map
  (document.getElementById("map_canvas"), myOptions);
  var oldmap = new google.maps.GroundOverlay(
      "https://legacy.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
      imageBounds);
  oldmap.setMap(map);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API グラウンドオーバーレイの表示</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>グラウンドオーバーレイ</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
</body>
</html>

表示例グラウンドオーバーレイの表示

Google Maps サンプル　>　グラウンドオーバーレイの表示

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

オーバーレイ画像

グラウンドオーバーレイの表示

サンプルコード

カテゴリー