CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
Evan Siroky
Evan Siroky

Reputation: 9418

Disabling Google Map 'click' event in area occupied by OverlayView div

I'm making a google map (v3) mashup where there is a map listener for a click event. 

google.maps.event.addListener(map, 'click', function(event) {addMarker(event)});

This click event on the map results in creating a new marker. However, I am also building a OverlayView (in the floatPane of the google map) with a jQuery button upon clicking a marker. 

markerDialogOverlay.prototype.onAdd = function()
{
    var divToAdd = document.createElement('div');
    divToAdd.id = 'markerHelper';
    divToAdd.title = 'Edit Marker';
    this.div = divToAdd;

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

    this.jqdiv = $('#markerHelper');
    this.jqdiv.empty();
}

markerDialogOverlay.prototype.draw = function()
{

    overlayProjection = this.getProjection();

    var posxy = overlayProjection.fromLatLngToDivPixel(this.marker.getPosition());

    this.jqdiv.css({ 'z-index': '1',
                   'left': posxy.x + 'px',
                   'top': posxy.y + 'px',
                   'position' : 'absolute'});

    this.jqdiv.append($('<button id="deleteMarker">Delete</button>').button().click(function(){deleteLocation(this.marker)}).hide().fadeIn('slow'));

}

Upon clicking the jQuery button, both the jQuery button click event and the google map click event are fired, but I want just the jQuery button click to be fired.

I still want to enable the map click event just not where the OverlayView div is located. Any ideas on how to work around this?

Upvotes: 8

Views: 4179

Answers (3)

RBILLC
RBILLC

Reputation: 190

Love using answers from 2009! (re: Susannah [Google Employee]) You can also disable the mouse-scroll:

//cancels scroll
google.maps.event.addDomListener(div, 'mousewheel', cancelEvent);

Upvotes: 0

tim
tim

Reputation: 443

your post really helped me understand this better as i am working on something exactly like this as well.

interesting to note - I was unclear o nit until I read this post - is that in the API, a jquery object cannot be created in the onAdd method. you have to do the jquery in the draw method.

Upvotes: 0

Evan Siroky
Evan Siroky

Reputation: 9418

I searched a little harder in the google maps forum and found this topic: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ef6e8e2942421bab/ff3739505eb833df?pli=1. Canceling the event propagation to the map solved the issue.

Upvotes: 6

Related Questions