2-8：マーカーマネージャー(GMarkerManager)を使う

「2－7：同じような複数のアイコンを効率よく追加する」では、
同じようなマーカーを追加する場合の方法を紹介しました。

しかし10個や20個ならともかく、100個・200個のマーカーをこの方法でやろうとすると、ちょっと効率が悪そうです。

そこで今回は『マーカーマネージャーで簡単に管理する方法』を紹介します

GMarkerManagerは、まさにそのための機能です。

GMarkerManagerを使うと次のようなことができます。

大量のマーカーを管理
表示する範囲にあわせて、自動でマーカーの追加・削除
ズームレベルにあわせて、自動でマーカーの追加・削除

ということで早速使ってみましょう。

100個のオリジナルマーカーが表示された
(新しいウィンドウで表示する)

マーカーマネージャーを使って、マーカーを自動管理するサンプル

今回のサンプルは、ズームレベルに応じてマーカーを追加／削除する方法です。

各ズームレベルで表示するマーカーの個数を制限しています。

【ズームレベルとマーカー個数の関係】
　　８～９　　　　：　　２５個
　　１０～１１　　：　　１５０個
　　１２～１３　　：　　５００個
　　１４　　　　　：　　１０００個

なおサンプルを分かりやすくするために、ＧＭapKitAPIの「setZoomLimit メソッド」を使ってズームレベルを８～１４の範囲に制限しています。

オリジナルマーカーを表示するプログラムその２

<!DOCTYPE html PUBLIC "-//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>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    
    <!-- GMapKitAPIをインクルード (オプション) -->
    <script src="http://googlemaps.googlermania.com/gmapkit/api"></script>

    


    <script type="text/javascript">
    //<![CDATA[


    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 16);

        

        //ズームコントローラを追加する

        map.addControl(new GLargeMapControl());

        

        //ズームレベルを8～14に制限(GMapKitAPI)
        map.setZoomLimit(map,8,14); 

        

        //初期表示エリアの範囲を取得
        bounds = map.getBounds();//マーカーマネージャーを作成する
var mgrOptions = {
                    //検出範囲：50
                    borderPadding: 50,
                    
                    //ズームレベルに応じて
                    //マーカーを自動追加削除
                    trackMarkers: true
                 };
var mgr = new GMarkerManager(map, mgrOptions);

//マーカーを作成して、マーカーマネージャーに追加する
mgr.addMarkers(makeMarkerArray(1000), 14);
mgr.addMarkers(makeMarkerArray(500), 12);
mgr.addMarkers(makeMarkerArray(150), 10);
mgr.addMarkers(makeMarkerArray(25), 8);
//マーカーマネージャーを地図に反映
mgr.refresh();


        }
      }
    }

function makeMarkerArray(length){
    //複数のマーカーをlength個作成して配列で返す
    var markerArray=new Array();
    
    //ランダムで bounds の範囲内にマーカーを作成する
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    var lngSpan = ne.lng() - sw.lng();
    var latSpan = ne.lat() - sw.lat();
    for (var i = 1; i < length; i++) {
        var lat = sw.lat() + latSpan * Math.random();
        var lng = sw.lng() + lngSpan * Math.random();
        var latlng = new GLatLng(lat, lng);
       
        markerArray.push(makeMarker(latlng, i));
    }    
    return markerArray;
}


    function makeMarker(point, mkrIdx){
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function(){
            marker.openInfoWindowHtml("これは "+ mkrIdx +"番目のアイコンです");
        });
        return marker;
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

サンプルプログラムの解説

今回のポイントは、上のサンプルプログラムの赤枠で囲んだ部分です。

makeMarkerArray（）は、指定した数のマーカーを作成する自作の関数です。
ここは、あなたがマーカーを追加する処理に書き換えてください。
(例えばデーターベースから呼び出した地点のマーカーなど)

[ 第１のポイント ]
　　まず基本となる「GMarkerManager」を作成します。
　　マーカーマネージャを作成するときに、オプションを指定しておきます。
 



[ 第２のポイント ]
　　次に「addMarker」メソッド、または「addMarkers」メソッドを使って、マーカーを登録します。

　addMarker (marker, minZoom, maxZoom)　
　　　地図のズームレベルが、minZoom ～ maxZoom で指定した範囲内になったとき
　　　自動的に地図上にマーカーが追加されます。
　　　指定したズームレベルでないときは、自動で削除されます。

　　　marker : 制御するマーカー(GMarker)

　　　minZoom : マーカーを表示する最小のズームレベル

　　　maxZoom : (省略可) マーカーを表示する最大のズームレベル

　addMarkers (markers, minZoom, maxZoom)　
　　　addMarkers と同じですが、複数のマーカーを一度に登録することができます。

　　　markers : 制御するマーカー(GMarker)の配列
　　　　　　　　　　例) addMarkers( [marker1, marker2], 10, 13);

　　　minZoom : マーカーを表示する最小のズームレベル

　　　maxZoom : (省略可) マーカーを表示する最大のズームレベル

[ 第３のポイント ]
　　GMarkerManager に登録したマーカーは、「refresh」メソッドを呼び出さないと地図上に追加されません。
　　なので、最後に「refresh」メソッドを呼び出します。

大量にマーカーを追加すると制御するのがとても大変ですが、GMarkerManager を使えば自動でやってくれるので非常に便利です。
細かい説明は、Google Maps API リファレンスを参考にしてみてください。