Using google maps with backbone.js

Question

I am trying to use google maps using backbone.js. Therefore, I created a view as shown below. But this does not work 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 render to do something. Here is my own working example, which assumes the existence of an 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, adjust it so that you enter mapview.render (). el in your DOM. You can do this in the base class of the router. Calling the render function from your initialization function is not required. If you still don’t see anything after that, add className to your view and make sure that you have the correct CSS width and height styles associated with this class.

Answer 3

Are you Backbone to Backbone for your packaging function?