Асинхронная загрузка API Карт Google

Question

Я загружаю скрипт API Карт Google Асинхронно в IE9, используя следующий код:

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;

Теперь дело в том, что когда скрипт полностью загружен, initialize() функция вызывается автоматически. Но когда иногда квота пользователя была превышена initialize() функция не вызывается и вместо карты мы видим простой белый экран.

Я хочу обнаружить это и запустить мою пользовательскую функцию, которая отображает некоторые предупреждения, такие как: "Error!",

Может кто-нибудь сказать мне, как это сделать?

Заранее спасибо...

Answer 1

Как упоминал Эндрю, прямого способа справиться с этим не существует. Тем не менее, вы можете по крайней мере учитывать возможность.

Установите тайм-аут для разумного периода времени (5 секунд?). В функции обратного вызова тайм-аута проверьте наличие google и / или google.maps. Если он не существует, предположим, что загрузка скрипта не удалась.

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

Answer 2

Я наконец нашел решение этой проблемы. Чад дал хорошее решение, но единственное, что вы не можете поместить этот кусок кода в callback() функция, потому что если скрипт не может загрузить callback() функция никогда не вызывается!

Итак, основываясь на том, что упомянул Чад, я наконец-то нашел следующее решение:

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;

Это, кажется, работает хорошо для меня!:)