0

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

devployment
  • 2,121
  • 1
  • 22
  • 33
  • views have events hash `events:{name:callback}` that is bound to the root element through delegation, so hope it will work – Deeptechtons Oct 15 '12 at 16:48
  • Unfortunately the `events:{name:callback}` is not working for my custom OverlayView as I tried to show in my code example. Or am I missing something substantial you tried to tell me? – devployment Oct 16 '12 at 05:20
  • Overlay gets created after the view is appended into the dom? – Deeptechtons Oct 16 '12 at 15:10

1 Answers1

1

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

Cristiano Fontes
  • 4,920
  • 6
  • 43
  • 76