Google Maps API Async Loading

Question

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...

Are you sure initialize() is not called? If it isn't, there is nothing you can do because to do anything means changing the API code which you are receiving from Google. If your quota has been exceeded, you could try adding billing to your Google Console. — Andrew Leach
– Andrew Leach, Commented Feb 4, 2013 at 13:39
Oh...I thought if there is some specific solution to this problem. Well anyways Thanks Andrew. — ninja.coder
– ninja.coder, Commented Feb 4, 2013 at 14:02
I don't know what exactly happens when the quota has been reached, but maybe it could work when you observe the onerror-event of the loaded script. — Dr.Molle
– Dr.Molle, Commented Feb 4, 2013 at 14:19
Sir...I tried it but I think onerror doesn't seems to work in IE9! Also if I try to call initialize() function from script.onload event nothing happens at all. I mean the map isn't loaded and what all I can see is plain white screen. Could you suggest an alternative way to do this? — ninja.coder
– ninja.coder, Commented Feb 4, 2013 at 14:34

Chad Killingsworth · Accepted Answer · 2013-02-04 18:26:43Z

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.

edited Feb 4, 2013 at 18:26

answered Feb 4, 2013 at 14:48

Chad Killingsworth

14.4k2 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ninja.coder Over a year ago

I tried this snippet but it didn't work if we put it in the callback function as the callback function is never called when script fails to load!

ninja.coder · Accepted Answer · 2016-02-20 07:41:28Z

0

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! :)

edited Feb 20, 2016 at 7:41

answered Feb 4, 2013 at 17:18

ninja.coder

9,6685 gold badges40 silver badges55 bronze badges

1 Comment

gtournie Over a year ago

It throws an error only if you use google instead of window.google

Collectives™ on Stack Overflow

Google Maps API Async Loading

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related