google-maps-api-3 - 配列の代わりにマーカーのオブジェクトを使用すると、Google マップのピンがクラスター化されます

Question

私はこの Web サイトを管理しています: http://www.gprprojecten.nl 基本的に私が行っているのは、Web サービスからデータのストリームを取得し、これをキャッシュすることです。その後、すべてのプロジェクトを Google マップに表示するなど、このデータに対してあらゆる種類の処理を行います。問題は、プロジェクト番号が大きくなるにつれて、(カスタム) ピンがオーバーラップし始める (表示されない、クリックできない) ことです。

だから私は自分のピンをまとめたいと思っています。

A32.blogを出発点として、Google Maps Clusterer ライブラリの作業を開始しました。

しかし今、問題が発生します。filter.jsと呼ばれるクライアント側のフィルター システムを選択したので、クラスタラーライブラリで使用されるマーカーの配列ではなく、オブジェクトを使用する Google マップの使用方法に依存しています。

これは、filter.js と組み合わせてマップを生成するために使用するコードです。

var googleMap = {
center_lat_lng: [52.14, 5.3],
map: null,
markers: {},
addMarker: function (project) {
    var that = this;
    var image = new google.maps.MarkerImage('@Url.Content("~/Content/img/marker.png")',
        new google.maps.Size(63, 27),
        new google.maps.Point(0, 0),
        new google.maps.Point(23, 27));
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(project.loclat, project.loclong),
        map: this.map,
        title: project.gebouwnaam,
        icon: image
    });

    marker.info_window_content = "<div class=\"gmapcontentwindow\"><h4>" + project.gebouwnaam + "</h4><img src=\"" + project.thumburl + "\" alt=\"" + project.gebouwnaam + "\" /><div class=\"gebouwdata\"><span class=\"date\">" + project.publicatiedatum + "</span><h5>" + project.plaats + "</h5><span>" + project.gebruiksfunctie + " | " + project.gebouwcategorie + "</span><span>" + project.licentiehouder + "</span><span class=\"stars " + project.rating + "\"></span>"
    if (project.akkoorddoorexpert == "True") {
        marker.info_window_content += "<span class=\"expert\"></span>"
    }
    var forwardUrl = '@Url.Content("~/Home/Details/")';
    marker.info_window_content += "<span  class=\"forward\"><a href=\"" + forwardUrl + project.id + "\" title=\"Bekijk " + project.gebouwnaam + " in detail\">Lees meer >></b></a></span></div></div>"
    this.markers[project.id] = marker

    google.maps.event.addListener(marker, 'click', function () {
        that.infowindow.setContent(marker.info_window_content)
        that.infowindow.open(that.map, marker);
    });
},

updateMarkers: function (filtering_result) {
    var google_map = this;
    $.each(google_map.markers, function () { this.setMap(null); })
    $.each(filtering_result, function () {
        google_map.markers[this.id].setMap(google_map.map);
    });
},

init: function () {
    var options = {
        center: new google.maps.LatLng(this.center_lat_lng[0], this.center_lat_lng[1]),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(document.getElementById("gmap"), options)

    this.infowindow = new google.maps.InfoWindow({

    });
    //var markersarray = $(this.markers).toArray();
    //console.log(markersarray);
    //doet het nog niet???
    //http://a32.me/2012/05/handling-huge-amount-of-markers-on-google-maps-with-clusters/
    //var markerCluster = new MarkerClusterer(this.map, markersarray, {
    //  gridSize: 10,
    //  minimumClusterSize: 2
    //});
}
};

project は、filter.js から init 関数に渡されるオブジェクトです。