Google지도를 비동기 적으로로드 중

Question

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; 

Answer 1

initialize을 두 번 호출했기 때문에지도가 두 번 나타납니다.

수정하기 전에 코드를 간단하게 만들어 보겠습니다. 그런 코드 블록을 반복해서 사용하지 마십시오. 대신 그것을 공통 기능으로 만드십시오.

또한 googlecode.com에서 infobox.js를로드하지 마세요. 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 (함수() {경고()가 '지도로드 구글에서';});

스크립트

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

}