My Google Map (v3) renders two types of markers:
An area marker ("Your home is in this area"), a semi-transparent graphic with a circle denoting an approximate area on the map.
Many attraction markers (beaches, restaurants, shopping, etc.)
Each attraction marker has a click handler that opens an info window ("Bob's Bugs - the best fried bugs in town!"). Registering the click handler also seems to create hover handlers that change the mouse-pointer to a hand, display a tooltip, etc, which is fine. I am defining no event handlers for the area marker.
However, for the attraction markers that are within span of the area marker, neither the click nor hover handlers fire. I would guess that it is a z-index issue, that somehow the big area marker, is lying on top of the attraction markers, is intercepting the hover/click events, and is not passing them through. In fact, a hover on the area marker results in the its tooltip, suggesting to me that it is definitely picking up the event.
I have set the z-indexes of the various markers - high z-index for the attraction markers, low z-index for the area markers. The visual rendering and examination of the DOM suggests that the z-index values are actually being set as I want.
But somehow the intersecting attraction markers are not receiving their click/hover events. Other attraction markers respond correctly to their hover/click events. In fact, for an attraction marker that only partially intersects with the area marker, the external portion of the marker responds to the hover/click events.
Per this answer, I tried calling:
google.maps.event.clearInstanceListeners(this.areaMarker);
in the hopes that perhaps there were some default handlers getting in the way. No love.
Is there some way to tell the area marker to get the heck out of the way? Any other ideas welcome.