Google forEach map.data feature not called - json

Question

I am trying to load a GeoJSON to the google maps javascript api and then process the GeoJSON by calling map.data.forEach . I cant get the map.data.forEach function to work it seems that it is never called.
The GeoJSON gets loaded fine and is displayed on my map.
Any suggestions why map.data.forEach would not work here?
Here is my code:
var myMap;
function initialize() {
// Create a simple map.
myMap = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: {
lat: 48.2081743,
lng: 16.3738189
}
});
}
function calculate(map) {
console.log("calculating")
map.data.forEach(function (feature) {
console.log("tester");
});
console.log("end calculating");
}
function loadGeoJson(map) {
map.data.loadGeoJson('mini.json');
}
google.maps.event.addDomListener(window, 'load', function () {
initialize();
loadGeoJson(myMap);
calculate(myMap);
});

Answer 1

This is caused by javascripts asynchronous nature. When you have the code
loadGeoJson(myMap);
calculate(myMap);
and loadGeoJson loads an external resource, calculate will most likely be executed before loadGeoJson has finished. It is very easy to reproduce your problem.
Unfortunately there is no callback opportunity in google.maps.Data::loadGeoJson, but if you wrap the call of calculate into a small setTimeout, then you should be good :
loadGeoJson(myMap);
setTimeout(function() {
calculate(myMap);
}, 500);
see a fiddle with your code from above -> http://jsfiddle.net/SAS6Q/

Answer 2

You can also use jQuery and Ajax to load your JSON synchronously to avoid setting time delays:
function loadGeoJson(map) {
$.ajax({
url: mini.json,
dataType: 'json',
async: false,
success: function(data)
{var features = map.data.addGeoJson(data);}
});
}