google-maps - Backbone、requireJS、Googlemaps - map 未显示

Question

我在让谷歌地图显示在我的页面上时遇到问题，我正在使用 RequireJS 和 Backbone，显然缺少一些简单的东西(我才刚刚开始使用 backbone)，但 map 从未呈现在这一页。没有错误，.map 属性看起来像一个谷歌地图对象。

能得到一些指点真的很好

下面是我能做到的最简化的，但展示了行为:

标记摘录:

<style>
#mapCanvas img { width:auto, max-width: auto; display:inline; }
#mapCanvas {height:600px;}
</style>

<div class="span8">
    <div id="mapCanvas">

    </div>
</div>

代码:

requirejs.config({
  baseUrl: '../resources/js',
  paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        jqueryui: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min',
        datatables: 'http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min',
        gmaps: 'http://maps.google.com/maps/api/js?sensor=false',
        backbone : 'libs/backbone.min',
        underscore: 'libs/underscore.min'
    },
  shim: {
    gmaps: {
        deps: ['jquery','async!http://maps.google.com/maps/api/js?sensor=false'],
        exports: 'google'
    },
    underscore: {
        exports: '_'
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
  }
});


 require(["domReady!","jquery","underscore","backbone", "gmaps"], function(doc, $, _, Backbone, google) {

    var siteMarkers = Backbone.View.extend({
        el: "#mapCanvas",
        initialize: function() {

            this.LatLng = new google.maps.LatLng(53.785948,-1.40728)
            var myOptions = {
                zoom: 8,
                center: this.LatLng,
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            this.map = new google.maps.Map(this.el, myOptions);
            this.render();
        },
        render: function() {
            return this;
        }
    });


     var markerView = new siteMarkers();


 });

提前致谢

Answer 1

与其填充谷歌地图，不如将其定义为一个模块:

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'], function() {
    return google.maps;
});