CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3backbone.jsbackbone-events
devployment
devployment

Reputation: 2201

How to handle Backbone events implementing a google.maps.OverlayView?

My Backbone view implements a google.maps.OverlayView().

This view contains a few div's for content and I need to handle mouseover/out on the container div and click events on two containing div's.

The only way I'm able to get the needed events is by using google.maps.event.addDomListener in my view. Something like this (copy&paste code):

var MarkerView = MasterView.extend({
    events:{
        //These events will never be fired
        'click .icon-context':function () {},
        'mouseout':function (event) {}
    },
    render:function(){
      //this renders the google.maps.OverlayView by implementing onAdd, draw, onRemove 
      var that = this;

      this.overlay.onAdd = function(){
        //Code for adding the OverLayView omitted here

        that.listeners_ = [
          google.maps.event.addDomListener(that.overlay.el, 'mouseout', function () {
            //This event should not be handled here
          }),
          google.maps.event.addDomListener($(that.overlay.el).find('.icon-context').first()[0], 'click', function () {
            //This event should not be handled here
          }),            
        ];

      };

    }
});

Core parts of the view logic should be reusable because I'd like to use it on the map and in a list showing/handling almost the same stuff. With binding my view to the Google Maps event listener I would have to duplicate a fair amount of code for the event handling. Feels not exactly right to do so.

How can I make my view handle the events "natively" if the view is hosted inside a google.maps.OverlayView

Upvotes: 0

Views: 352

Answers (1)

Cristiano Fontes
Cristiano Fontes

Reputation: 5088

You have to use this.setElement($(that.overlay.el)) on the view after creating and adding the overlay to the HTML so the EL is updated so you can use the events hash.

If you instantiate a new overlay you have to do it again to make EL point to the right thing.

Don't forget to wrap it in a Jquery obj, this helped me a lot when trying to add event handlers to infoBoxes

Upvotes: 1

Related Questions