Загрузка карт Google асинхронно

Question

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

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; 

Answer 1

Карта появляется дважды, потому что вы звоните 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; 

Answer 2

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

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(){ }; 

}