飴屋

GMAPS/表示領域の限定

ここでは地図の表示領域を限定する方法を解説します。
Google Mapsの魅力の一つには、地図を通して世界中を旅することが
ありますが、自分のページや会社のページにGoogle Mapsを掲載
する場合、必ずしも全世界の情報が必要とは限りませんよね。
自分の住んでいる町内さえ表示できれば十分だし、むしろあまり
遠くに移動されても困るっていうときに、表示領域を限定する必要が
でてきます。

var NORTH_LAT_LIMIT = 35.64251021188608;
var SOUTH_LAT_LIMIT = 35.62144235909199;
var EAST_LNG_LIMIT = 139.90728378295898;
var WEST_LNG_LIMIT = 139.86419677734375;

上は東京ディズニーリゾートを囲む領域の座標(経度、緯度)情報を
定数に入れています。上から移動の北限、南限、東限、西限の
緯度もしくは経度を指定しています。この範囲に限定して地図を動かす
ことができるようにするには以下のような方法があります。

var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map,"moveend",function() {
bnd = map.getBounds();
if (bnd.getNorthEast().lat()>NORTH_LAT_LIMIT)
map.panTo(new GLatLng(map.getCenter().lat()-bnd.getNorthEast().lat()+NORTH_LAT_LIMIT,map.getCenter().lng()));
if (bnd.getNorthEast().lng()>EAST_LNG_LIMIT)
map.panTo(new GLatLng(map.getCenter().lat(),map.getCenter().lng()-bnd.getNorthEast().lng()+EAST_LNG_LIMIT));
if (bnd.getSouthWest().lat()<SOUTH_LAT_LIMIT)
map.panTo(new GLatLng(map.getCenter().lat()-bnd.getSouthWest().lat()+SOUTH_LAT_LIMIT,map.getCenter().lng()));
if (bnd.getSouthWest().lng()<WEST_LNG_LIMIT)
map.panTo(new GLatLng(map.getCenter().lat(),map.getCenter().lng()-bnd.getSouthWest().lng()+WEST_LNG_LIMIT));
});

一行目では、地図のオブジェクトを作成しています。
二行目のGEventのメソッドaddListenerを使用して、地図のオブジェクトと「moveend」イベントを関連付けています。最初の引数に指定した地図オブジェクト上で、二番目に指定したイベントが発生したときに、三番目に指定した関数を実行するといった具合です。指定することのできるイベントは以下の通りです。

addmaptype
新しいmaptypeが追加されたときに発生します。(maptypeは自分で作れます)
removemaptype
maptypeが削除されたときに発生。
click
地図がクリックされたときに発生。マーカーがクリックされたときも発生。
movestart
地図の移動開始時に発生。
move
地図の移動中に連続的に発生。
moveend
地図の移動完了後に発生。
zoomend
地図のズームレベル変更後に発生。
maptypechanged
maptype変更後に発生
infowindowopen
情報パネル表示時に発生。
infowindowclose
情報パネルが閉じられたときに発生。
addoverlay
マーカーなどが追加されたときに発生。
removeoverlay
マーカーなどが削除されたときに発生。
clearoverlays
マーカーなどがクリアされたときに発生。
mouseover
マウスが地図上に入ったときに発生。
mouseout
マウスが地図上から出たときに発生。
mousemove
マウスが地図上を移動したときに発生。
dragstart
地図上でドラッグを開始したときに発生。
drag
地図上でドラッグ中に連続的に発生。
dragend
地図上でドラッグが終了したときに発生。

三行目では表示されている地図の境界オブジェクトを取得しています。このオブジェクトは、現在表示中の領域の四隅の緯度、経度の情報を持っているので、この情報を参照し、四〜十一行目で北限、南限、東限、西限の定数と比較して限定した範囲からはみ出していないかをチェックします。もしも、はみ出しているようであれば、表示限界領域まで地図を移動させます。panToメソッドを使用すると地図がアニメーションしながら、移動して視覚的にスマートですね。