javascript variables and asynchronous calls

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);

What's your problem when you create the MarkerClusterer in the callback ? Don't forget to declare the var mc outside if you reuse it. — Denys Séguret, Oct 10 '12 at 09:15

score 1 · Accepted Answer · edited May 23 '17 at 12:04

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.

edited May 23 '17 at 12:04

Community

1
1

answered Oct 10 '12 at 09:20

Vinay

6,204
6
38
55

Hi Vinay. I tried putting the MarkerClusterer inside the getJSON as suggested and it ran with no errors in the console BUT no markers were created. Is it because the MarkerClusterer is getting called after the map has already been loaded? – user1051849 Oct 10 '12 at 09:59
No, that's likely not why. Your map can be created beforehand. It's probably something else with your code in that case. Take a look at some of these examples: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html – Vinay Oct 10 '12 at 10:07
Hold on, I just realized that you're setting markers[i] to a new Marker instance and then push onto it as well. Is this intentional? This is probably your issue. You want to create a new marker each time by doing: var marker = new google.maps.Marker...... and then push that onto the markers array. – Vinay Oct 10 '12 at 10:12
i'll try, although the alert(markers[1].title); sanity check gives the expected result so i'm not sure thats the problem. – user1051849 Oct 10 '12 at 10:55
i tried this, as suggested, and still no luck. i tried adding and alert(opt_markers[1].title); at the start of the MarkerClusterer function, and it works - so the function is being called but the markers are not being placed on the map... – user1051849 Oct 10 '12 at 11:57
wow - more debugging - it turns out it was a typo in the json constructor "longitiude". thanks for taking the time. – user1051849 Oct 10 '12 at 12:26

score 1 · Answer 2 · answered Oct 10 '12 at 09:21

1

Maybe you need to put it inside the success function you give as an input to $.getJSON?

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

alert(markers[5].title);  // sanity check - empty

answered Oct 10 '12 at 09:21

GarethL

1,473
1
15
16

i have tried that, and it runs with no errors, but no makers appear. Is it because the map has already been built by this stage it's too late? – user1051849 Oct 10 '12 at 09:57

javascript variables and asynchronous calls

2 Answers2