자바 스크립트를 통해 비동기 적으로 Google지도를로드하는 중 문제가 발생했습니다.

Question

Google지도를 비동기 적으로 만들려고합니다. 거기에 많은 예제가 있지만 찾은 글로벌 (?) 함수 콜백 함수를 사용하는 개념을 선보일 찾을 수 있습니다. 그러나 내가 연구하고있는 프로젝트는 다양한 객체를 정의하고 프로토 타입을 사용하여 객체에 속성/기능을 추가합니다. 다음과 같이 관련 소스 코드를 찾습니다 : 나는 성공 메시지가 있지만

var Demo = new Array(); 

Demo.Content = function() { }; 
Demo.Content.prototype = { }; 


Demo.Content.Controller = function() { 
    this.contentView = new Demo.Content.View(this); 
}; 

Demo.Content.Controller.prototype = { 
    initialize : function() { 
    this.contentView.initialize(); 
    }, 

    onGoogleMapsScriptLoaded : function() { 
    alert('onGoogleMapsScriptLoaded'); 
    }, 
}; 


Demo.Content.View = function(controller) { 
    this.controller = controller; 
}; 

Demo.Content.View.prototype = { 

    initialize : function() { 
    // now called from background script (Chrome extensions) 
    //this.asyncLoadGoogleMap(); 
    }, 

    asyncLoadGoogleMap : function() { 
    $.getScript("http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=???") 
     .done(function (script, textStatus) {    
      alert("Google map script loaded successfully"); 
     }) 
     .fail(function (jqxhr, settings, ex) { 
      alert("Could not load Google Map script: " + ex); 
     }); 
    }, 

}; 


contentController = new Demo.Content.Controller(); 
contentController.initialize(); 

"구글 맵 스크립트가 성공적으로로드"나는 콜백 함수로 사용할 무슨 생각이 없다 - 항상 뭔가 undefined입니다. 예를 들어, contentController.test - Cannot read property 'onGoogleMapsScriptLoaded' of undefined을 시도했거나 실제로 웹 예제처럼 전역 함수를 사용했습니다. 콜백 함수를 어떻게 설정합니까? 아니면 여기에 더 근본적인 실수가 있습니까?

EDIT : 모든 것이 Google 크롬 확장 프로그램 용 콘텐츠 스크립트의 일부입니다. 중요한 경우입니다. 여기에는 백그라운드 스크립트에서

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { 
    if (changeInfo.status == 'complete') { 
    chrome.tabs.sendMessage(tabId, {action: 'load-map'}, function(){}); 
    } 
}); 

을 사용하여 실제로 페이지로드가 완료되면지도가로드됩니다. 콘텐츠 스크립트에는 asyncLoadGoogleMap을 호출하는 메시지 수신기가 있습니다. 페이지가 완전히 있어야합니다. 여전히 동일한 오류가 발생합니다.

Answer 1

Here is the code for AngularJS ,하지만 여전히 글로벌 콜백 함수 작성

// Google async initializer needs global function, so we use $window 
angular.module('GoogleMapsInitializer') 
    .factory('Initializer', function($window, $q){ 

     // maps loader deferred object 
     var mapsDefer = $q.defer(); 

     // Google's url for async maps initialization accepting callback function 
     var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback='; 

     // async loader 
     var asyncLoad = function(asyncUrl, callbackName) { 
      var script = document.createElement('script'); 
      //script.type = 'text/javascript'; 
      script.src = asyncUrl + callbackName; 
      document.body.appendChild(script); 
     }; 

     // callback function - resolving promise after maps successfully loaded 
     $window.googleMapsInitialized = function() { 
      mapsDefer.resolve(); 
     }; 

     // loading google maps 
     asyncLoad(asyncUrl, 'googleMapsInitialized'); 

     return { 

      // usage: Initializer.mapsInitialized.then(callback) 
      mapsInitialized : mapsDefer.promise 
     }; 
    })