Использование карт Google с backbone.js

Question

Я пытаюсь использовать карты Google с backbone.js. Поэтому я создал вид, как показано ниже. Но это не работает для меня. Любые входы?

(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

Как отметил доктор философии , вам нужно, чтобы render действительно что-то сделал.Вот мой собственный рабочий пример, в котором предполагается, что на странице есть некоторые <div id="map"></div>:

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

Передаете ли вы Backbone в область действия вашей функции упаковки?

Answer 3

Вместо передачи #map_canvas div, установите его так, чтобы вы вставили mapview.render (). El в вашу DOM. Вы можете сделать это в классе магистрального маршрутизатора. Вызов функции рендеринга из вашей функции инициализации не является необходимым. Если после этого вы все еще ничего не видите, добавьте className к вашему представлению и убедитесь, что у вас есть правильные стили ширины / высоты CSS, связанные с этим классом.