GMarkerManager with LabeledMarker

GMarkerManagerとLabeldMarkerを使って、複数のアイコンを作成し最初に地図を表示したときにフキダシが開くようにするサンプルです。

ポイントは、 GEvent.trigger(markers[0], "click");の部分で指定するマーカーが、地図を開いたときに表示するズームレベル
(map.setCenter(new GLatLng(35.677335,139.744613), 11);)
の中に表示されていなければならない、ということです。

map_example_gmarkermanager_with_labeldmarker.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>GMarkerManager with LabeledMarker</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[MAPS_API_KEY]&hl=jp"
type="text/javascript"></script>

<script type="text/javascript"
 src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/1.4/src/labeledmarker.js"></script>
<script type="text/javascript">
//<![CDATA[
var icon = new GIcon();
icon.image = 'http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/greencirclemarker.png';
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(16, 16);
icon.infoWindowAnchor = new GPoint(25, 7);

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

        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 11);
        
        //ズームコントローラを追加する
        map.addControl(new GLargeMapControl());

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

        //  ズーム14：マーカー500個
        mgr.addMarkers(makeMarkerArray(bounds, 500), 14);

        //  ズーム12～13：マーカー100個
        mgr.addMarkers(makeMarkerArray(bounds, 100), 12, 13);

        //  ズーム10～11：マーカー50個
        var markers = makeMarkerArray(bounds, 50);
        mgr.addMarkers(markers, 10, 11);

        //  ズーム8～9：マーカー25個
        mgr.addMarkers(makeMarkerArray(bounds, 25), 8, 9);

        //  ズーム5～7：マーカー3個
        mgr.addMarkers(makeMarkerArray(bounds, 3), 5, 7);

        //  ズーム0～4：マーカー1個
        mgr.addMarkers(makeMarkerArray(bounds, 1), 0, 4);

        //マーカーマネージャーを地図に反映
        mgr.refresh();
        
        GEvent.trigger(markers[0], "click");

    }
}

function makeMarkerArray(bounds, 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 opts = {
      "labelText": mkrIdx.toString(),
      "icon" : icon,
      "labelOffset": new GSize(-6, -10)
    };
    var marker = new LabeledMarker(point, opts);
    GEvent.addListener(marker, "click", function(){
        marker.openInfoWindowHtml("これは "+ mkrIdx +"番目のアイコンです");
    });
    return marker;
}

GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>

  </head>
  <body >
<h1>GMarkerManager with LabeledMarker</h1>
<div id="map" style="width: 500px; height: 500px">&nbsp;</div>
  </body>
</html>