Using google maps with backbone.js - google-maps

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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