Googleマップ上のマーカーをまとめてくれる「MarkerClusterer」

以前、google Maps上にマーカー(と吹き出し)を表示するサンプルを作成しましたが(記事)、密集していると見づらい場合がありますよね。そこで、MarkerClustererという密集したマーカーを件数をカウントしてまとめてくれるライブラリを使用してみました。

ダウンロード

ライブラリは、ここにあります。[markerclusterer_compiled.js]

スクリプト

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="markerclusterer_compiled.js"></script>

Googleマップ用のライブラリとmarkerclustererのライブラリを読みます。

実装

<div id="div1044" style="width:940px; height:600px"></div>

<script type="text/javascript">
$(document).ready(function(){

//    マップ作成
    //    マップ中心座標設定
    var latlng = new google.maps.LatLng(-34.580083,-58.381577);

    var myOptions = {
        zoom: 4,                                    // マップのズーム度を指定
        center: latlng,                             // 中心座標をセット
        mapTypeId: google.maps.MapTypeId.ROADMAP    // 表示するマップのタイプ
    };
    var map = new google.maps.Map( document.getElementById( "div1044"), myOptions);

//    マーカー作成
    //    マーカーデータを格納
    var markers = [<?php echo $latlngs; ?>];
    var infowindow = new google.maps.InfoWindow();

    // MarkerClusterer用配列
    var mcs = [];

    // データの数だけマーカー位置と吹き出しの情報を作成していきます。
    var marker, i;
    for (i = 0; i < markers.length; i++) {
        marker = new google.maps.Marker( {
            position: new google.maps.LatLng( markers[i][1], markers[i][2]),
            map: map
        });
        google.maps.event.addListener( marker, 'click', ( function( marker, i) {
            return function() {
                infowindow.setContent( markers[i][0]);
                infowindow.open( map, marker);
            }
        })( marker, i));
        mcs.push( marker);
    }
    // markerclusterのオプション
    var mcOptions = { gridSize: 50, maxZoom: 15};

    // markerclusterを表示
    var markerCluster = new MarkerClusterer( map, mcs, mcOptions );
}) 
</script>

マーカーを作成するところは、通常と同じで(参照)、最後にマーカー情報をまとめてMarkerClustererに渡すだけです。
パフォーマンスが気になるところです。件数増やしてみて、性能試験やりたいところですね。

デモ

こちら

MarkerClustererのドキュメント

オプションなどはこのページ内に記載されています。(v 1.0ですが、v3.0で探してもここに行き着きます。この情報で使えるので問題ないかと。)
メソッドなど
MarkerClusterer for Google Maps v3

Related

Google Places Autocompleteを使って地名入力補助 Google+ プラスワン(+1)ボタンの設置 表示パターン豊富なスライダー「flexslider 2」 開閉できるツリー構造を表現できる「jsTree」 ローソク足チャート「jqPlot」 Google Maps APIを使用して住所から緯度・経度を取得(ジオコーディング) Googleマップの吹き出し(infowindow)内にコンテンツを表示する Googleマップ上に複数マーカー・吹き出しを表示する