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メソッドを使用すると地図がアニメーションしながら、移動して視覚的にスマートですね。