armin armin - 2 months ago 101
Javascript Question

Google Maps JavaScript API v3 / Data Layer / MarkerClusterer

Can you help me please to create marker cluster with MarkerClustererPlus.
I load the data with:

layer = map.data.loadGeoJson('resources/data.geojson');


and the markers are visible, but i have not idea how to create markercluster.
Do i have to parse the data.geojson-file into an array? Thanks.

function initialize() {
map = new google.maps.Map(document.getElementById('map'), mapOptions);
layer = map.data.loadGeoJson('resources/data.geojson');

map.data.setStyle({icon: icon});

map.data.addListener('click', function(event) {
var myHTML = event.feature.getProperty('name');
infobox.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
infobox.setPosition(event.feature.getGeometry().get());
infobox.setOptions({pixelOffset: new google.maps.Size(0,0)});
infobox.open(map);
});

google.maps.event.addListener(map, "click", function(){
infobox.close();
});

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);


Here is a piece of my GeoJson-File (this piece and the whole file is tested by GeoJSONLint.

{
"type": "FeatureCollection",
"icon": "resources/icon.png",
"features": [
{
"type": "Feature","properties": {"name":"Bielefeld"},
"geometry": {"type": "Point","coordinates":[8.528849, 52.030656]}
},
{
"type": "Feature","properties": {"name":"Herford"},
"geometry": {"type": "Point","coordinates":[8.676780, 52.118003]}
},
{
"type": "Feature","properties": {"name":"Guetersloh"},
"geometry": {"type": "Point","coordinates":[8.383353, 51.902917]}
}
]
}

Answer
  1. create a MarkerClusterer to manage the markers.

    var markerClusterer = new MarkerClusterer();
    
  2. add each marker to it when the data layer fires the addfeature event.

    markerClusterer.addMarker(marker);
    
  3. hide the data layer markers.

    map.data.setMap(null);
    

working jsfiddle

var markerClusterer = new MarkerClusterer();
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52, 8),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    markerClusterer.setMap(map);
    google.maps.event.addListener(map.data, 'addfeature', function (e) {
        if (e.feature.getGeometry().getType() === 'Point') {
            var marker = new google.maps.Marker({
                position: e.feature.getGeometry().get(),
                title: e.feature.getProperty('name'),
                map: map
            });
            // open the infoBox when the marker is clicked
            google.maps.event.addListener(marker, 'click', function (marker, e) {
                return function () {

                    var myHTML = e.feature.getProperty('name');
                    boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
                    infobox.setPosition(e.feature.getGeometry().get());
                    infobox.setOptions({
                        pixelOffset: new google.maps.Size(0, 0)
                    });
                    infobox.open(map);
                };
            }(marker, e));
            markerClusterer.addMarker(marker);
            bounds.extend(e.feature.getGeometry().get());
            map.fitBounds(bounds);
            map.setCenter(e.feature.getGeometry().get());
        }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function () {
        infobox.close();
    });
}