Question

I have the following code, and having read this, i understand it wont work because the getJSON call is asynchronous. How do i need to change this so that the MarkerClusterer function gets triggered with a full set of markers? I’ve tried putting the MarkerClusterer function inside the getJSON call but with no luck…

var mcOptions = {gridSize: 50, maxZoom: 9};
var markers = [];

function parse_json(json) {
  if (json.length > 0) {
    for (i=0; i<json.length; i++) {
        var report = json[i];  
        var latLng = new google.maps.LatLng(report.latitude, report.longitude);
        markers[i] = new google.maps.Marker({
            position: latLng, 
            title: report.name + ' ' + report.surf_size_ft_round, 
            url: "/place/"+report.slug 
        });                     

        google.maps.event.addListener(markers[i], 'click', function() {
          window.location.href = markers[i].url;
        }); 
        markers.push(markers[i]);
    }
  } 
}; 


$.getJSON('<%= request.fullpath + ".json" %>', function(stream) {   
if (stream.length > 0) {
  parse_json(stream);
  alert(markers[1].title);  //sanity check - gives result
  }
});   


    alert(markers[5].title);  // sanity check - empty 
var mc = new MarkerClusterer(map, markers, mcOptions);

Answer 1

Why not put this code snippet:

mc = new MarkerClusterer(map, markers, mcOptions);

inside the anonymous callback function in your $.getJSON? Just declare var mc; somewhere outside the $.getJSON scope to be able to have access to it elsewhere.

Alternatively, you can fire an event at the end of your parse_json function, listen to that event and then fire up another function that creates your MarkerClusterer object when the event has fired. Check this out: How to trigger event in JavaScript?

EDIT:

Upon inspecting your code a bit more, I can see that you set markers[i] to a new Marker instance and then push onto the markers array that same instance. You probably want to either set markers[i] to a new Marker instance or you want to create a var marker, setting it to a new Marker instance and then pushing on the markers array.