- Home ›
- Google Maps API入門 ›
- マーカーの表示管理(GMarkerManager) ›
- HERE
表示されるズームレベルを指定しマーカーを表示
GMarkerManagerを利用するためには、まずGMarkerManagerクラスのオブジェクトを作成します。コンストラクタ関数は次のように定義されています。
GMarkerManager(map:GMap, opts?:GMarkerManagerOptions)
指定された地図のマーカーの表示を制御する新しいマーカー マネージャを作成 します。
引数には対象となるGMap2クラスのオブジェクトを指定します。
実際には次のように記述します。
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.172304,136.908306), 15); var manager = new GMarkerManager(map);
次にGMarkerManagerクラスのオブジェクトを使いマーカーを追加していきます。通常はaddOverlayメソッドを使ってマーカーを追加していましたが、代わりにGMarkerManagerクラスで用意されているaddMarkerメソッドを使ってマーカーを追加します。
addMarker(marker:GMarker, minZoom:Number, maxZoom?:Number)
このマネージャによって制御されるマーカーのコレクションにマーカーを 1 つ 追加します。マーカーの場所が地図の現在のビューポート内で、地図のズーム レベルが指定されたズーム レベル範囲内であれば、マーカーは直ちに地図に追 加されます。addMarkers メソッドと同様に、minZoom およびオプションの maxZoom パラメータはマーカーが表示されるズーム レベルの範囲を指定します。
1番目の引数にGMarkerクラスのオブジェクトを指定します。そして2番目の引数に指定したズームレベルと同じかそれよりも大きい場合にマーカーは表示されます。例えば2番目の引数に15を指定すれば、ズームレベルが15以上の場合にだけマーカーが表示されます。
また省略可能な3番目の引数を指定した場合、ズームレベルが指定した値よりも大きくなった時にマーカーは削除されます。
実際には次のように記述します。
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.172304,136.908306), 15); var manager = new GMarkerManager(map); var marker = new GMarker(new GLatLng(35.172304,136.908306)); manager.addMarker(marker, 15);
サンプルプログラム
では試してみます。
function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(35.172999,136.897057), 12); var manager = new GMarkerManager(map); var marker1_1 = new GMarker(new GLatLng(35.176468,136.896866)); var marker1_2 = new GMarker(new GLatLng(35.174153,136.8970979)); var marker1_3 = new GMarker(new GLatLng(35.173234,136.89762)); var marker1_4 = new GMarker(new GLatLng(35.173383,136.89987)); var marker1_5 = new GMarker(new GLatLng(35.172986,136.899894)); var marker1_6 = new GMarker(new GLatLng(35.172848,136.897845)); var marker1_7 = new GMarker(new GLatLng(35.174106,136.896676)); var marker1_8 = new GMarker(new GLatLng(35.175878,136.896483)); var marker2_1 = new GMarker(new GLatLng(35.17613,136.89667)); var marker2_2 = new GMarker(new GLatLng(35.174131,136.896885)); var marker2_3 = new GMarker(new GLatLng(35.173034,136.897818)); var marker2_4 = new GMarker(new GLatLng(35.173192,136.899881)); var marker3_1 = new GMarker(new GLatLng(35.172999,136.897057)); manager.addMarker(marker1_1, 16); manager.addMarker(marker1_2, 16); manager.addMarker(marker1_3, 16); manager.addMarker(marker1_4, 16); manager.addMarker(marker1_5, 16); manager.addMarker(marker1_6, 16); manager.addMarker(marker1_7, 16); manager.addMarker(marker1_8, 16); manager.addMarker(marker2_1, 14, 15); manager.addMarker(marker2_2, 14, 15); manager.addMarker(marker2_3, 14, 15); manager.addMarker(marker2_4, 14, 15); manager.addMarker(marker3_1, 0, 13); } }
<!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>サンプル:表示されるズームレベルを指定しマーカーを表示</title> <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false" type="text/javascript" charset="utf-8"></script> <script src="./js/code1_1.js" type="text/javascript"></script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 400px; height: 400px"></div> </body> </html>
ではブラウザで上記のURLを見てみます。
地下鉄の駅の位置にマーカーを表示しています。このズームレベルではマーカーが1つだけ表示されています。広域地図が表示されているときは、地点を代表するマーカーを一つだけ表示するようにしているためです。
ではズームレベルを2つ上げてみます。
このズームレベルになると地下鉄の駅の出口付近に4つのマーカーを表示させています。
ではズームレベルを2つ上げてみます。
このズームレベルになると地下鉄の駅の出口の一つ一つにマーカーを表示させています。
このように表示されているズームレベル毎に表示されるマーカーを管理することができます。
( Written by Tatsuo Ikura )