如何从backbone.js模型加载google maps API？

我有一个backbone.js模型。我想从该模型的方法加载GoogleMapsAPI javascript。我不想将脚本加载到文档的开头

我可以使用$.getScript（）加载js，然后显示地图？但是当我指定回调函数时

我总是会出错，因为我不想定义全局js函数initialize（）。我希望回调方法与backbone.js模型的方法相同

App = Backbone.Model.extend({
construct  : function(),
displayMap : function()
{
    $.getScript("http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=TRU&callback=initialize", function(data, textStatus, jqxhr) {

    console.log('Load was performed.');
    });
},
initialize: function()
{
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

}))

---

请为地图模型尝试此结构：

Map = Backbone.Model.extend({
    defaults: {
        id: '', currentLatLng: {}, mapOptions: {}, map: {},
        position: {}, zoom: 13, maxZoom: 16, minZoom: 12
    },
    initMap: function(position){
        this.set('position', position);
        var currentLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        this.set('currentLatLng', currentLatLng);
        var mapOptions = {
            zoom: this.get('zoom'),
            minZoom: this.get('minZoom'),
            maxZoom: this.get('maxZoom'),
            center: currentLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        };
        this.set('mapOptions', mapOptions);
    }
});

此代码用于查看：

MapView = Backbone.View.extend({
    defaults:{
       region: 'us', language: 'en'
    },
    id: 'gmaps-container',
    className: 'gmaps_container',
    initialize: function(){
       var url = "http://maps.googleapis.com/maps/api/js?key=key_here&sensor=false";
       $.ajax({
           url: url,
           dataType: "script",
           async: false,
           success: function(){
               console.log('script loaded');
           }
       });
       this.model.set('map', new google.maps.Map(this.el, this.model.get('mapOptions')));
    },
    render: function(){
        console.log('init map');
        $('#' + this.id).replaceWith(this.el);
        return this;
    }
});

只需在主脚本中初始化模型和视图：

    var map = new Map({zoom: 8, maxZoom: 18, minZoom: 8});
    map.initMap({coords: {latitude: -34.397, longitude: 150.644}});
    var mapView = new MapView({model: map});
    mapView.render();

您还需要简单的html容器：

<div id="gmaps-container" class="gmaps_container"></div>

---

注意：设置容器的宽度和高度。

使用“backbone.js object method”是什么意思？我想使用App.displayMap（）显示地图；参见上面的代码。

App.googleMapsCallback=function（）{//…}

有什么问题？我面临的主要问题是如何加载maps js文件而不在文档头声明它？请参见我更新的代码。但是，我认为在页脚或页眉中加载gMaps脚本是更好的解决方案。

<div id="gmaps-container" class="gmaps_container"></div>