Problems with asynchronously loading Google Map via Javascript

Question

I'm trying to asynchonously a Google Map. There are a lot of examples out there, but the ones a find use global(?) functions to showcase the concept of using callback function. The project I'm working on, however, defines various objects and uses prototypes to add properties/functions to them. The relevant source code looks as follows:

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

While I get the success message "Google map script loaded successfully", I have no idea what to use as callback function -- always something is undefined . I tried, for example, contentController.test -- Cannot read property 'onGoogleMapsScriptLoaded' of undefined -- or indeed using a global function as in the examples on the Web. How do I set the callback function? Or do I have a more fundamental mistake here?

The whole things is part of a content script for a Google Chrome extensions -- in case this important. 整个过程都是Google Chrome扩展程序内容脚本的一部分-以防万一。 This includes that I now load the map when the page is really finished loading using

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

in the background script. The content script has a message listener that invokes asyncLoadGoogleMap . So the page should be completely there. Still, I get the same errors.

Answer 1

Here is the code for AngularJS , but it still creates the global callback function:

// 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
        };
    })