jquery-ui-map issues with MarkerClusterer

Question

I've been using similar code on another site, but for some reason the clustering side of things just doesn't want to work this time. Example code (trimmed down to remove code thats not really related);

$.getJSON("./cgi-bin/links/ajax_mobi.cgi",{
    action: 'load_results_map', 
    swlat: swlat, swlng: swlng, nelat: nelat, nelng: nelng, 
    faves: localStorage.getItem('faves'),
}, function(data) {

    $.each( data.markers, function(i, marker) {

        if (marker.is_error == "1") {
            bootbox.alert("Sorry, no results matched");
        } else { 
            jQuery('#map-inner').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': false,
                'icon': './img/marker.png',
                'id' : marker.linkid
            });
        }

    }); 

    $('#map-inner').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map-inner').gmap('get', 'map'), $('#map-inner').gmap('get', 'markers')));

}); 

That works fine, and shows the map with all my markers on (just not clustered).

However, when it gets to this part of code:

$('#map-inner').gmap('set', 'MarkerClusterer', new MarkerClusterer($('#map-inner').gmap('get', 'map'), $('#map-inner').gmap('get', 'markers')));

Which gives me an error:

TypeError: marker is undefined
http://www.site.com/mob_app/js/ui/markerclusterer.js
Line 1222

...and of course the clusters are not added at all (just keeps the existing markers)

I've checked, and double checked that the code is correct, but just can't seem to get it working.

Can anyone see a boo-boo? I'm using jQuery 2.0.3, with Bootstrap 3.0.2 (I've tried commenting this out, but it made no difference). I'm also using jquery-ui-map 3.0-rc (latest), and MarkerClustererPlus 2.0.16

Answer 1

Ok - so I tried out the other cluster plugin, but really didn't like it (not flexible enough).

I went back to the drawing board, and decided to take another look at this issue. I've FINALLY managed to find a solution (all be it a weird one)

The actual bug had something to do with the "id" param I was passing in. For some reason, the marker clusterer code is doing:

MarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {
  var i;
  for (i = 0; i < markers.length; i++) {
      this.pushMarkerTo_(markers[i]);
  }
  if (!opt_nodraw) {
    this.redraw_();
  }
};

To fix it, I just added in a basic if () statement, to make sure there is indeed a marker there

MarkerClusterer.prototype.addMarkers = function (markers, opt_nodraw) {
    var i;
    for (i = 0; i < markers.length; i++) {
      if (markers[i] != undefined) {
        this.pushMarkerTo_(markers[i]);
      }
    }
    if (!opt_nodraw) {
      this.redraw_();
    }
};

Thats ok when you are NOT passing it as an array of IDs. When you are assigning an ID for each marker, it changes the format its saved in. The "fix" is to use the title attribute for the marker instead - so:

jQuery('#map_inner').gmap('addMarker', { 
    'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
    //'bounds': false,
    'icon': './img/marker.png',
    'title' : marker.linkid 
}).click(function() {
    // do stuff
});

Then if you need to grab the ID of the marker, you use the attr() like so:

$(this).attr('title')

Its certainly not ideal, but it seems to work. There is obviously an inherent issue with using custom IDs to store the markers.

Hopefully this saves at least someone from all the headaches I got!

Answer 2

Ok - well this really isn't ideal, but I found another cluster plugin that seems to work ok:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

I had to do a fair bit of tweaks to my code (as you need to push the markers into an array, instead of adding them normally - then doing a 1 liner to make it into clusters).

Basically you just make a new array:

var markers = [];

Then "push" them into the array:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(marker.latitude, marker.longitude)
});
markers.push(marker);

...and finally (once all the markers are added), you need to process them into the map:

var markerCluster = new MarkerClusterer(the_map, markers);

Not ideal (I would have preferred to keep the old plugin, but even on a VERY simple test page it just was refusing to work)