Google maps 将require.js与Google Maps JavaScript API v3一起使用

我在Google Maps JavaScript API v3中使用require.js时遇到了一些奇怪的问题。你可以在电视上看到奇怪的东西

第一个标记不在中心，第二个标记在拖动地图时会一直消失

我已尝试将src url更改为

&sensor=false

但是有一个空白屏幕

代码如下：

js/views/contact.js

define([
    'jquery',
    'underscore',
    'backbone',
    'googlemap',
    'text!templates/contact.html'
], function($, _, Backbone, google,
            contactTemplate){

    var contactView = Backbone.View.extend({
        el: "#container",

        render: function(){
            this.$el.html(contactTemplate);

            var mapCanvas = $( "#map_canvas" ).get( 0 );

            try{
                google.addMapToCanvas( mapCanvas );
            }catch(err){
                console.log(err);
            }

        }
    });
    return contactView;
});

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false!callback" ],
    function() {
        return {
            addMapToCanvas: function( mapCanvas ) {

                var myLatlng = new google.maps.LatLng(1.309631, 103.865664);

                var myOptions = {
                    center: myLatlng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map( mapCanvas, myOptions );

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title:'20 KALLANG AVENUE\n2C LOBBY B\nPICO CREATIVE CENTRE\nSINGAPORE 339411.\nTel: +65 6866 0798'
                });
                google.maps.event.addListener(marker, 'click', function(){

                    if (marker.getAnimation() != null) {
                        marker.setAnimation(null);
                    } else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }

                });
            }
        }
    }

js/libs/google/map.js

define([
    'jquery',
    'underscore',
    'backbone',
    'googlemap',
    'text!templates/contact.html'
], function($, _, Backbone, google,
            contactTemplate){

    var contactView = Backbone.View.extend({
        el: "#container",

        render: function(){
            this.$el.html(contactTemplate);

            var mapCanvas = $( "#map_canvas" ).get( 0 );

            try{
                google.addMapToCanvas( mapCanvas );
            }catch(err){
                console.log(err);
            }

        }
    });
    return contactView;
});

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false!callback" ],
    function() {
        return {
            addMapToCanvas: function( mapCanvas ) {

                var myLatlng = new google.maps.LatLng(1.309631, 103.865664);

                var myOptions = {
                    center: myLatlng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map( mapCanvas, myOptions );

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title:'20 KALLANG AVENUE\n2C LOBBY B\nPICO CREATIVE CENTRE\nSINGAPORE 339411.\nTel: +65 6866 0798'
                });
                google.maps.event.addListener(marker, 'click', function(){

                    if (marker.getAnimation() != null) {
                        marker.setAnimation(null);
                    } else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }

                });
            }
        }
    }

js/templates/contact.html

<div class="hero-unit3" style="float: left">
    <div style="margin-top:-30px;margin-bottom:30px"><img src="./assets/img/contact.png"/></div>

    <div style="margin-top:10px">
        <div style="float: left">
            <div id="map_canvas_top_rule" class="rule2"></div>
            <div id="map_canvas"></div>
            <div id="map_canvas_bottom_rule" class="rule2"></div>
        </div>
    </div>

</div>

可能相关的黑屏：可能相关的黑屏：