Асинхронная загрузка карт google

Я пытаюсь загрузить мою карту google асинхронно, и она работает, но она загружает карту в два раза. Если я удалю "box.onload = initialize; " это останавливает эту проблему, но затем infobox не отображается...как исправить мой код, чтобы он загружал карту только один раз и показывал infobox.

function loadScript() {
   var map = document.createElement('script');
   map.type = 'text/javascript';
   map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
   document.body.appendChild(map);  

   map.onload = function() {
      var box = document.createElement('script');
      box.type = 'text/javascript';
      box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
      document.body.appendChild(box);
      box.onload = initialize;
   };
}           
window.onload = loadScript;
6
google-maps

2 ответов

карта появляется дважды, потому что вы вызываете initialize два раза.

прежде чем исправить это, давайте немного упростим ваш код. Никогда не позволяйте себе повторять такие блоки кода; вместо этого сделайте его общей функцией.

кроме того, не загружайте infobox.js от googlecode.com; код Google не является CDN. Загрузите свою собственную копию.

Итак, код может выглядеть так:

function addScript( url, callback ) {
    var script = document.createElement( 'script' );
    if( callback ) script.onload = callback;
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild( script );  
}

function loadMapsAPI() {
    addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}

function mapsApiReady() {
    addScript( 'infobox.js', initialize );
}

window.onload = loadMapsAPI;
15

Я создал этот скрипт. Вы можете вызвать это и добавить любую функцию обратного вызова, поэтому вам нужно просто включить это в свои скрипты и вызвать

googleMapsLoadAsync (функция () {alert ('загруженные карты google');});

скрипт

var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };

function googleMapsLoadAsync(callback) {

    if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }

    if(!googleMapsAsyncLoaded) {

        $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');

    } else {

        googleMapsAsyncLoadedFunction();

    }

}

function googleMapsAsyncLoadedFunction() {

    googleMapsAsyncLoaded = true;

    if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {

        googleMapsAsyncCallback();

    }

    googleMapsAsyncCallback = function(){ };

}
2