Backbone google map suggestions on implementing markers

Question

Hello stackoverflow community,

I am trying to get may hands dirty with google maps and backbone together. All is going very well with both. I just have one slight issue I am slightly stumped on. I have a backbone view for my map, which looks like this:

 var MapWidget = Backbone.View.extend({

    el: '.map-widget',

    model: new Model,

    center: function (e) {

    },

    addMarker: function () {


    },

    render: function() {

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

        this.bindings();

        console.log('Map Widget Rendered');

        return this;

    },

    initialize: function() {

        console.log('Map Widget initialized');

    }

});

here is the model:

  var MapWidget = Backbone.Model.extend({

defaults: {

      zoom: 8,

      center: new google.maps.LatLng(39.23036, -94.48182),

      mapTypeId: google.maps.MapTypeId.ROADMAP,

      disableDefaultUI: true

},

initialize: function(){


}

});

As you can see all the maps options are pulled from the maps model. What i am struggled to figure out(or organize) is, if I start to add markers to my map should the markers be stored in the same map model or should the markers have their own collection? If i should have a collection of markers, would it make more sense then to have a markerLoader view that added the markers to the map from its own marker collection?

I hope all that make sense, just looking for some advice from some seasoned backbone guys or anyone looking to add there two cents.let me know if i need to explain more. Thank you stackoverflow community

Answer 1

You should have your own collection containing the data that backs the markers and then a View for the collection which contains a View for each child. The child views will render themselves on the google map as a map marker. This way when a child updates the view can easily update the map marker (i.e. change its position on the map). Also, when the collection containing the children changes the parent view can easily add/remove child Views (i.e. the markers).

You can provide the Backbone Map view to the collection view which can then provide that view down to the children views that it creates. You will need to add a getMap() method or something similar to the Map view so that the children can get the Map to add themselves to.