MarkerClusterer not working only in webkit (Chrome and Safari), fine in Firefox?

Question

This is driving me mental.

I'm using MarkerCluster with google maps v3, and it works fine in FF, however when I (and the client) kick it up in Chrome or Safari the clusters arn't there.

No errors, just not working in webkit.

A few notes: it's coming from some ajax-loaded json and it's in jquery.

This is the function taking care of the adding:

add_clusters: function() {
        markers = [];
        $.each( interpreters, function ( i, interpreter ){
            //maps.add_postcode_marker(i, 'interpreter');
            var latLng = new google.maps.LatLng(interpreter.lat, interpreter.lng);
            //, map: map
            interpreters[i].marker = new google.maps.Marker({ position: latLng });
            maps.add_info_box(i, "interpter");
            markers.push(interpreters[i].marker);
            app.log(interpreters[i].marker);
        });
        markerCluster = new MarkerClusterer(map, markers);
    }

Cheers!

Just to reiterate, there are no errors in Chrome, it's just not displaying.

Answer 1

The problem was with makercluster itself.

Line 725 specifically. Jquery was also included and the behaviour of .indexOf was changed slightly between browsers.

In firefox it was returning the correct -1.

However chrome was returning undefined.

You can fix it by changing line 725 to...

return this.markers_.indexOf(marker) != -1 && this.markers_.indexOf(marker) != undefined;

Answer 2

At a glance, I can't see what's wrong with this snippet. It all looks good to me.

Can you use jsfiddle.net to create a page that contains a working demo (in Firefox) so we can see it/try to edit it on our own?

Answer 3

I had a similar problem with PrimeFaces. The solution was to make sure the response mimeType is text/html.