マルティスープ
Staff Blog

2019.05.19

Maps JavaScript API の新機能・表示範囲制限

みなさん、こんにちは。

5月14日頃、Maps JavaScript API はのバージョンが「3.36」に更新されました。今回は、3.36で追加された表示範囲制限を試してみたので、解説していきます。なお、更新については以下のブログを参照ください。

https://maps.multisoup.co.jp/blog/4039/

表示範囲制限とは、指定した範囲内のみ地図を表示する機能で、GISソフトではよくある機能の1つです。

使い方は、至って簡単でマップ生成時のオプションに「restriction」を追加するだけです。

var map = new google.maps.Map(document.getElementById("map"), {
	zoom : 8,
	center:  new google.maps.LatLng(35.5, 139.5),
	restriction: {
		latLngBounds: {
			north: 36.0,
			south: 35.0,
			west: 139.0,
			east: 140.0
		},
		strictBounds: false
	}
});

設定可能な項目は以下の2つです。

以下は、strictBounds を false に設定したサンプルです。なお、true にすると 赤枠内の領域しか表示しなくなります。

この機能の用途としては、特定の範囲以外に地図を移動して欲しくないとき、特定の市区町村の範囲のみ表示したい、等でしょう？？

興味のある方は、是非お試しください。

バイ！