How to get data out of JQuery getJSON callback

Question

I need to get the JSON object data out of the callback function so that I can process it later in page, not within the callback as I am now. It must be obvious to everyone else as I can't see anything written about it. Can anyone tell me how to do it?

Here is my code:

<script type="text/javascript" src="/site_media/js/jstree/_lib/jquery.js"></script>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
<script type="text/javascript">
    function initialize() {
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        return map;
    }

    function add_marker(map, lat, long) {
        var marker_image='/site_media/images/map_marker.png';
        var myLatlng = new google.maps.LatLng(lat,long);
        title='title';
        var marker = new google.maps.Marker({
            position: myLatlng, 
            map: map, 
            title:title,
            icon:marker_image
        }); 
        //map.panTo(myLatlng);
    }

    //window.onload=initialize();
    setTimeout('map=initialize();',2000);

    $.getJSON("/ajax/get", function(data) {
        $.each(data, function(i,val) {
            latitude = val.fields.latitude;
            longitude = val.fields.longitude;
             add_marker(map, latitude, longitude);
        });
    });
</script>
<div id="map_canvas" style="width: 500px; height: 300px"></div>

Answer 1

You need to execute $.getJSON() (and other initialization stuff which depends on the presence of certain HTML elements in the document) during window.onload, or more the jQuery way, during $(document).ready(). Otherwise it is indeed been executed too early, namely immediately when the webbrowser retrieves the JS code, far before the HTML document is finished loading.

$(document).ready(function() {
    $.getJSON("/entries/get_race_entries/1/demo/1", function(data) {
        // ...
    });
});

Answer 2

It's hard to help without a clearer idea of what you're trying to achieve, but it sounds like you are trying to manage a large amount of markers.

There are actually already existing solutions for this. Take a look at Handling Large Amounts of Markers in Google Maps.

The Google Marker Manager is in the GMaps Utility Library. You might find some of the descriptions of examples useful.

The marker manager is introduced here, and there are 2 examples on that page you can look at: a weather map, and Google offices.

For more info you can look at the documentation for the Open Source Marker Manager.

Of course, you first should get a simple map with just one set of markers displaying up and running. I think Balus' answer will help you with that.

Answer 3

Rich, its actually much simpler than you think (at least it seems that way). I am assuming your markers have an id or something. You may need to adjust this to work just how you want:

var lastMarkerId; // We'll store the id here, starts as undefined

function refresh_markers () {
  $.getJSON("/ajax/get", { marker_id: lastMarkerId }, function(data) {
    $.each(data, function(i,val) {
        latitude = val.fields.latitude;
        longitude = val.fields.longitude;
        add_marker(map, latitude, longitude);
    });
    if (data.length) {
       // grab the last item and store its ID
       lastMarkerId = data.pop().id;
    }
  });
}

Then on your server, do something like: "If marker_id has a value, find every marker after that id, otherwise, return them all".

Remember! Each marker needs an id for my code to work:

[{id:1, fields: {latitude: "..", longitude: ".." }}]