Google Maps API Async Loading

问题

I am loading the Google Maps API script Asynchronously in IE9 using the following code:

function initialize() {
  ...
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

Now the thing is that when the script is fully loaded the initialize() function is called automatically. But when sometimes the user quota has been exceeded the initialize() function is not called and instead of map we see the plain white screen.

I want to detect this and fire my custom function which displays some alert like: "Error!".

Can anyone tell me to how to do this?

Thanks in advance...

回答1:

As Andrew mentioned, there isn't a direct way to handle this. However, you can at least account for the possibility.

Set a timeout for a reasonable time frame (5 secondes?). In the timeout callback function, test for the existence of google and/or google.maps. If it doesn't exist, assume the script load failed.

setTimeout(function() {
  if(!window.google || !window.google.maps) {
    //handle script not loaded
  }
}), 5000);
// Maps api asynchronous load code here.

回答2:

I finally found the solution for this problem. Chad gave a nice solution but the only thing is that you can't put that piece of code in the callback() function because if the script fails to load the callback() function is never called!

So based on what Chad has mentioned I finally came up with the following solution:

function initialize() {
  ...
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  setTimeout(function () {
        try{
            if (!google || !google.maps) {
                //This will Throw the error if 'google' is not defined
            }
        }
        catch (e) {
            //You can write the code for error handling here
            //Something like alert('Ah...Error Occurred!');
        }
    }, 5000);
  document.body.appendChild(script);
}

window.onload = loadScript;

This seems to work fine for me! :)

来源：https://stackoverflow.com/questions/14687237/google-maps-api-async-loading