Using google maps with backbone.js

I am trying to use Google maps with backbone.js. So I created a view as below. But this isn't working for me. Any inputs?

(function($){
    var CreateMap = Backbone.View.extend({

        tagName:  "div",

        initialize: function() {
            _.bindAll(this, 'render');

            var myOptions = {
                zoom: 8,
                center:开发者_Go百科 new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            this.map = new google.maps.Map(this.el, myOptions);

            this.render();
        },

        render: function() {
            return this;
        }
    });

    var mapview = new CreateMap({el: $("#map_canvas")});

})(jQuery);

As PhD noted, you need to have render actually do something. Here's my own working example, which assumes there is some existing <div id="map"></div> on the page:

APP = {};

APP.Map = Backbone.Model.extend({
  defaults: {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
});
APP.map = new APP.Map();

APP.MapView = Backbone.View.extend({
  id: 'map',
  initialize: function(){
    this.map = new google.maps.Map(this.el, this.model.attributes);
    this.render();
  },
  render: function(){
    $('#map').replaceWith(this.el);
  }
});
APP.mapView = new APP.MapView({model: APP.map});

Instead of passing the #map_canvas div, set it up so you inject mapview.render().el into your DOM. You could do this in a backbone router class. Calling the render function from your initialization function is not necessary. If after this you still don't see anything, add a className to your view and make sure you have the right CSS width/height styles linked to that class.

Are you passing in Backbone to the scope of your wrapping function?