表示されるズームレベルを指定しマーカーを表示

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);

サンプルプログラム

では試してみます。

code1_1.js

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);
  }
}

map1_1.html

<!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を見てみます。

p1-1