Load Google Maps API with AJAX... but only once for multiple instances

Question

I wrote a little script, which loads Google Maps markers from a JSON file and puts them on a map. The script should be able to handle multiple instances. At the moment the script looks like this (for testing i used this JSON file): ```

Accepted Answer

There are two separate issues that can occur here.

- Because you are calling the googleMaps() function each time, you are creating a new instance of the object which tracks when/if the google maps api has loaded. You need to extract the part that loads the api outside of the googleMaps function (or use a shared variable).

- Even if you kept the loadAPI function as is you can still encounter a race condition where the ajax request to load the google maps library can be fired off twice. The reason why you are seeing that error is that when you check in loadAPI if the google object is available, it hasn't actually been set up yet by the first ajax request.

You can use the Promise API to deal with issues like this. I changed the loadAPI method to use a promise, and like I said, it needs to be moved outside of the googleMaps function

```
        var loadAPIPromise;
        // Load API
        function loadAPI(callback) {
            if (!loadAPIPromise) {
                var deferred = $.Deferred();
                $.ajax({
                    url: 'http://www.google.com/jsapi/',
                    dataType: "script",
                    success: function() {
                        google.load('maps', '3', {
                            callback: function() {
                                deferred.resolve();
                            }, 
                            other_params: 'sensor=false'
                        });
                    }
                });
                loadAPIPromise = deferred.promise();
            }
            loadAPIPromise.done(callback);
        };
```

Here is a jsfiddle example http://jsfiddle.net/callado4/gA79R/4/

Load Google Maps API with AJAX... but only once for multiple instances

Solution

Problem

Related problems