Mousing over Infobox fires a hover event on the tokens that stand behind it.

Question

I am currently using the InfoBox plugin for Google Maps. Unfortunately, I ran into an annoying problem.

Users of my application can open the InfoBox, hovering above its corresponding token. It works great. The problem occurs when the InfoBox is open and the user is silent about it. For some reason, the tokens below the InfoBox are firing their mouseover events. This is a big problem because it closes the current field before opening the window that belongs to the marker just taken from its mouseover event. I did some searches, and I found out that setting each marker:

optimized: false 

prevents this error. However, this option slows down the card and makes it very cumbersome.

My InfoBox:

 infoWindows[obj.VehicleName] = new InfoBox({ content: contentString, disableAutoPan: false, maxWidth: 500, pixelOffset: new google.maps.Size(-250, -490), boxStyle: { width: "500px" }, enableEventPropagation: false, infoBoxClearance: new google.maps.Size(45, 1) }); 

My listener:

 google.maps.event.addListener(marker, 'mouseover', function() { 

Answer 1

An ugly fix because none of the advertised options (enableEventPropagation) seemed to work for me (and I certainly didn't want to go the way of using “optimized: false” on 300+ markers)

Inside the mouseover listener for each marker, I check to see if the current InfoWindow popup is:

 google.maps.event.addListener(marker, 'mouseover', function() { //If an InfoBox is currently open if(openInfoBox !== null){ var id = $(openInfoBox.getContent()).attr('id'); //If the main div inside that InfoBox is currently being hovered over if ($('#' + id + ':hover').length) { return false; //go no further. ie ignore mouseover event for marker } } //Open InfoBox etc etc