• 小
  • 中
  • 大

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

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


参考先:Google Maps JavaScript API V3>GroundOverlay

コンストラクタ説明
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(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);

サンプルコード

サンプル.js 次の例では、地図上にニュージャージー州ニューアークの古い地図をオーバーレイとして表示します:
参照先は:Googleコード>Google Maps JavaScript API V3 オーバーレイ>グラウンド オーバーレイ


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.GroundOverl
ay(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


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