Leaflet markers do not open popup on click

Question

I just started using Leaflet and Marker Clusterer to organize the markers.

Problem #1: When an unclustered marker is clicked, no popup appears.

Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!

If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!

Initializing markerclusterer

markers = new L.MarkerClusterGroup();
map.addLayer(markers);

All markers added to markercluster markers

A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)

ListingMarkerView = Backbone.View.extend({
    template: _.template( $('#tpl_ListingMarkerView').html() ),

    render: function() {

        // Create marker
        var content = this.template( this.model.toJSON() );
        var marker = new L.marker(
            [this.model.get('lat'), this.model.get('lng')],
            {content: content});
        marker.bindPopup(content);

        // Add to markerclusterer
        markers.addLayer(marker);
    }
});

Without markerclusterer

If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.

Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!

Answer 1

From what little I know of the cluster marker group, you should do this:

var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
    // Current marker is ev.layer
    // Do stuff
});

To add an event handler to the cluster layer instead, do this:

markerGroup.on('clusterclick', function(ev) {
    // Current cluster is ev.layer
    // Child markers for this cluster are a.layer.getAllChildMarkers()
    // Do stuff
});

Oh, and read the github README carefully, it's all in there...

Answer 2

Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.