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

Question

I am creating a google map mashup (v3) where there is a map listener for the click event.

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

This click event on the map creates a new marker. However, I also create an OverlayView (in the floatPane of the google map) using the jQuery button when the marker is clicked.

 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')); } 

After clicking the jQuery button, the jQuery button click event and the google map click event are fired, but I want only the jQuery button to click.

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

Answer 1

I searched a little harder on 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 distribution of events to the map solved the problem.

Answer 2

Your message really helped me understand this better, as I am also working on something similar.

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