GroundOverlay

2015/09/01

GroundOverlayクラスはオーバーレイを表示するためのクラスです。オーバーレイは、指定した境界いっぱいに画像を表示するものです。

構文

GroundOverlay( url:string, bounds:LatLngBounds|LatLngBoundsLiteral, opts?:GroundOverlayOptions )

パラメータ

url

string

画像ファイルのパス。

bounds

LatLngBounds | LatLngBoundsLiteral

境界(Bounding box)を表すLatLngBoundsクラスのインスタンス、またはLatLngLiteralオブジェクト。

opts

GroundOverlayOptions

オーバーレイのオプションとなるオブジェクト。

返り値

GroundOverlay

GroundOverlayクラスのインスタンス。このインスタンスにメソッドを実行したりイベントを設定してオーバーレイ画像を操作できる。

デモ

オーバーレイを作成するデモです。オプションについては、GroundOverlayOptionsオブジェクトをご参考下さい。

var groundOverlay = new google.maps.GroundOverlay(
	"./overlay.svg" ,
	new google.maps.LatLngBounds(
		new google.maps.LatLng( 35.708194, 139.808565 ) ,
		new google.maps.LatLng( 35.712280, 139.813619 )
	) , {
		map: map ,
	}
) ;

サンプルコード

インスタンスの作成

var groundOverlay = new google.maps.GroundOverlay(
	"./overlay.svg" ,
	new google.maps.LatLngBounds(
		new google.maps.LatLng( 35.708194, 139.808565 ) ,
		new google.maps.LatLng( 35.712280, 139.813619 )
	) , {
		map: map ,
	}
) ;

HTML

<!DOCTYPE html>
<html>
<head>
	<style>
#map-canvas {
	width: 600px ;
	height: 600px ;
}
	</style>
</head>
<body>
	<div id="map-canvas"></div>

	<script src="//maps.googleapis.com/maps/api/js?key={APIキー}"></script>
	<script>
var mapDiv = document.getElementById( "map-canvas" ) ;

// Map
var map = new google.maps.Map( mapDiv, {
	center: new google.maps.LatLng( 35.71, 139.8107 ) ,
	zoom: 11 ,
} ) ;

// GroundOverlay
var groundOverlay = new google.maps.GroundOverlay(
	"https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/GroundOverlay/overlay.svg" ,
	new google.maps.LatLngBounds(
		new google.maps.LatLng( 35.708194, 139.808565 ) ,
		new google.maps.LatLng( 35.712280, 139.813619 )
	) , {
		map: map ,
	}
) ;

// fit bounds
map.fitBounds( groundOverlay.getBounds() ) ;
	</script>
</body>
</html>

デモページを開く

オプション

GroundOverlayOptionsに指定できるプロパティの一覧です。

名前	説明
clickable	オーバーレイのクリックの有効、無効を調整する。
map	オーバーレイを設置する地図を指定する。
opacity	オーバーレイの不透明度を調整を指定する。

メソッド

名前	説明
getBounds()	オーバーレイの境界(Bounding box)を取得する。
getMap()	オーバーレイが設置されている地図を取得する。
getOpacity()	オーバーレイの不透明度を取得する。
getUrl()	オーバーレイの画像ファイルのパスを取得する。
setMap()	オーバーレイを地図に設置する。または地図から取り除く。
setOpacity()	オーバーレイの不透明度をセットする。

イベント

名前	説明
click	オーバーレイをクリックした時に発火するイベント。
dblclick	オーバーレイをダブルクリックした時に発火するイベント。

参考

Google Maps JavaScript API: GroundOverlay: Googleの公式リファレンス。