MarkerClustererを使ってカテゴリ分けする

カテゴリー:

説明

MarkerClusterer ライブラリを使うと大量のマーカーを簡単にコントロールすることができます。 このページでは、マーカーをカテゴリ分けして、さらにMarkerClustererを使う方法を紹介します。

マーカーのカテゴリ分け

最初にマーカーをカテゴリ分けします。コードの中では、次のようにしています。

var markers = {};

for(...) {
  category = data.category;
  
  var marker = createMarker({
      position : latLng,
      title : data.title,
      icon : categoryIcons[data.category],
      description : data.description
    });
    
  markers[category].push(marker);
}

マーカークラスターの作成

マーカークラスターを作成します。作成方法は次のとおりです。

var mcOptions = {
        gridSize : 50,
        maxZoom : 15
      };
clusterer = new MarkerClusterer(mapCanvas, [], mcOptions);

このときに大切なのが、第2引数に空の配列を渡すことです。 これはあとでカテゴリ選択の<select>が変更された時にマーカーを追加するからです。

カテゴリ選択の変更

カテゴリ選択の<select>が変更されたとき、マーカークラスターが持つ古いカテゴリのマーカーを一度削除します。 そして新しく選択されたカテゴリのマーカーを追加します。
この方法が一番簡単にマーカークラスターを再作成できます。

var select = document.getElementById("category");
google.maps.event.addDomListener(select, "change", function() {
  var selected = this.value;
  clusterer.clearMarkers();
  clusterer.addMarkers(markers[selected]);
});
google.maps.event.trigger(select, "change");


Code

<script type='text/javascript'>

      var mapCanvas,
          clusterer,
          infoWnd;

      function initalize() {

        // 地図の作成
        var mapDiv = document.getElementById("map_canvas");
        var mapCanvas = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          
          //コントロールを追加するので、コンテナをクリアしない
          noClear : true
        });

        // コントロールの追加
        var selectDiv = document.getElementById("category_panel");
        mapCanvas.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);

        // 大量のマーカーを作成
        var sw = new google.maps.LatLng(-19.448292,-152.012329);
        var ne = new google.maps.LatLng(76.150236,58.925171 );
        var bounds = new google.maps.LatLngBounds(sw, ne);
        mapCanvas.setCenter(bounds.getCenter());
        mapCanvas.setZoom(3);
        
        var lat, lng, category, json = [];
        var categories = ["one", "two", "three"];
        for (var i = 0; i < 300; i++) {
          lat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
          lng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
          category = categories[Math.floor(Math.random() * 3)];
          json.push({
            "title" : "random #" + i,
            "lat" : lat,
            "lng" : lng,
            "description" : "<strong>" + category + "</strong><br>random #" + i,
            "category" : category
          });
        }
        
        //カテゴリ用のアイコン
        var categoryIcons = {
          "one" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=1%7CFF0000%7C000000",
          "two" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2%7C00FFFF%7C000000",
          "three" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=3%7CFF00FF%7C000000"
        }


        // 情報ウィンドウの作成
        infoWnd = new google.maps.InfoWindow();

        // マーカークラスターの作成
        var mcOptions = {
          gridSize : 50,
          maxZoom : 15
        };
        clusterer = new MarkerClusterer(mapCanvas, [], mcOptions);

        // 全てのマーカーをカテゴリごとに保持する
        var markers = {};
        
        // マーカーを作成
        for (var i = 0, length = json.length; i < length; i++) {
          var data = json[i],
              latLng = new google.maps.LatLng(data.lat, data.lng),
              category = data.category;

          if ( category in markers == false) {
            markers[category] = [];
          }

          // マーカーを地図上に配置
          var marker = createMarker({
            position : latLng,
            title : data.title,
            icon : categoryIcons[data.category],
            description : data.description
          });
          markers[category].push(marker);
        }

        //カテゴリの選択が変更されたとき、クラスターを作り直す
        var select = document.getElementById("category");
        google.maps.event.addDomListener(select, "change", function() {
          var selected = this.value;
          clusterer.clearMarkers();
          clusterer.addMarkers(markers[selected]);
        });
        google.maps.event.trigger(select, "change");
      }
      
      function createMarker(options) {
        var marker = new google.maps.Marker(options);
        
        google.maps.event.addListener(marker, "click", function(){
          infoWnd.setContent(options.description);
          infoWnd.open(mapCanvas, marker);
        });
        return marker;
      }
      
      google.maps.event.addDomListener(window, "load", initalize);
    </script>

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

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