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

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

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

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


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

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

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

ということで早速使ってみましょう。
100個のオリジナルマーカーが表示された
(新しいウィンドウで表示する)

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


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

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

【ズームレベルとマーカー個数の関係】
  8~9    :  25個
  10~11  :  150個
  12~13  :  500個
  14      :  1000個


なおサンプルを分かりやすくするために、GMapKitAPIの「setZoomLimit メソッド」を使ってズームレベルを8~14の範囲に制限しています。

オリジナルマーカーを表示するプログラム その2
<!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()は、指定した数のマーカーを作成する自作の関数です。
ここは、あなたがマーカーを追加する処理に書き換えてください。
(例えばデーターベースから呼び出した地点のマーカーなど)

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




[ 第2のポイント ]
  次に「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 : (省略可) マーカーを表示する最大のズームレベル




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

 


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





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら