how can I determine when Google Maps loadGeoJson completes?

Question

I have a scenario where users can store their mapping styling. When a user navigates back to that page with the map it should display the map the way it was previously.

Answer 1

You can listen to addFeature event which will be fired for each feature in your json. e.g. if you use https://storage.googleapis.com/maps-devrel/google.json six events are raised after the json request is completed i.e. when google api starts adding the features from the json file:

You can see the demo here : http://jsbin.com/ofutUbA/4/edit

Answer 2

One would assume, if you are using knockout, to maybe bind onto some listeners, or attach listeners to an event.

Most events through JavaScript always have a callback function, this is good practive so that once a function has finished executing some long I/O or Database query it will immediately execute that function. Obviously that callback will be defined by you.

someLongTimeFunction(function (data) {
  // usually this callback will be fired when the function has finished.
});

If you are familiar with knockout, then you would know that once the data has been retrieved and you pass through an observable that observable would update its binding.

Here is the link for extending observables: knockout js

As far as I can understand from you question, this loadGeoJson, is it server side? If so, you do a long poll from client side and tie into that:

function doRequest() {
  var request = $.ajax({
    dataType: "json",
    url: 'loadGeoJson',
    data: data,
  });

  request.done(function(data, result) {
    if (result !== "success") {
      setTimeout(doRequest, 10000);
    }
  });
}

Answer 3

addfeature event is definitely invoked by loadGeoJson, if isn't for you is some setup error.

loadGeoJson has an optional callback parameter what is invoked after all features were loaded and has the features as parameter.

https://developers.google.com/maps/documentation/javascript/3.exp/reference

loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array))

You can signal your code from this callback that it can continue processing.

map.data.loadGeoJson('google.json', null, function (features) {
    map.fitBounds(bounds); // or do other stuff what requires all features loaded
});

You could also wrap loadGeoJson into a promise and resolve the promise in loadGeoJson's callback.

function loadGeoJson(url, options) {
    var promise = new Promise(function (resolve, reject) {
      try {
        map.data.loadGeoJson(url, options, function (features) {
            resolve(features);
        });
      } catch (e) {
        reject(e);
      }
    });

    return promise;
}

// Somewhere else in your code:
var promise = loadGeoJson('studs.json');

promise.then(function (features) {
    // Do stuff
});

promise.catch(function (error) {
    // Handle error
});