using require.js with Google Maps JavaScript API v3

Question

I encountered some weird problem when using require.js with Google Maps JavaScript API v3. You can see the weird stuff at

http://ec2-122-248-213-247.ap-southeast-1.compute.amazonaws.com/laugh-rev-6/index.html#contact

1st the marker is not in the center and 2nd when you drag the map part of it keep disappearing.

I have tried changing the src url to

http://maps.googleapis.com/maps/api/js?key=&sensor=false

but got a blank screen.

The following is the code:

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

js/libs/google/map.js

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>