CODEWITHSUNDEEP
javascriptgoogle-maps
SourabhKus
SourabhKus

Reputation: 828

Stop event propagation in JavaScript overlay menu to Google map

I have created some editBox and buttons in a Google overlayView on top of Google map in JavaScript. Whenever I am clicking on any button, editBox or anywhere on overlayView, Google map is also accepting those mouse events. How can I restrict mouse events so they can't propagate through overlayView?

google.maps.event.addDomListener(gotoBtn, 'click', function(e) {
    ///DO SOMETHING
    e.stopPropagation();
});

For buttons, I am using the following method, but I don't want to put the same everywhere for all. Is there any other logical way?

Upvotes: 2

Views: 949

Answers (1)

SourabhKus
SourabhKus

Reputation: 828

I added div in overlayView and stopping mouse propagation there.

var panes = this.getPanes();
panes.overlayImage.appendChild(div);

/// Code for stoping event propagation to m_map
div.onclick = function(event) {
    event.stopPropagation();
}

google.maps.event.addDomListener(div, 'mousedown', function (event) {
    event.cancelBubble = true;
        if(event.stopPropogation)
            event.stopPropagation();
});

Upvotes: 1

Related Questions