4

I'm currently using the InfoBox plugin for Google Maps. Unfortunately, I've run into an annoying problem.

Users on my app can open an InfoBox by hovering over its corresponding marker. That works fine. The problem occurs when the InfoBox is open and the user is mousing over it. For some reason, the markers beneath the InfoBox are firing off their mouseover events. This is a big issue because it closes the current box before opening the box belonging to the marker that has just fired off its mouseover event. I've done some searching and I've found out that setting each marker to:

optimized: false

prevents this bug. However, this option slows down the map and makes it feel cumbersome to use.

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() {
Wayne Whitty
  • 19,513
  • 7
  • 44
  • 66
  • You are not alone [When a marker lies behind open infobox - Event mouseover with InfoBox plugin Google Maps API v3](http://stackoverflow.com/questions/7691088/when-a-marker-lies-behind-open-infobox-event-mouseover-with-infobox-plugin-goo). You need to stop the propagation of the event in the InfoBox. – geocodezip Jun 11 '13 at 13:44
  • This might be relevant: http://stackoverflow.com/questions/13944058/google-maps-infobox-and-jquery/13944103#13944103 (perhaps setting enableEventPropagation:false?) – geocodezip Jun 11 '13 at 13:49
  • enableEventPropagation:false doesn't seem to work, unfortunately. I tried setting it to false and it didn't seem to do anything. Maybe one of my other settings are interfering. – Wayne Whitty Jun 11 '13 at 14:16
  • The [documentation](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html) says it defaults to false. – geocodezip Jun 11 '13 at 14:34
  • I managed to come up with a dirty fix for it. See the answer section if you're interested. – Wayne Whitty Jun 11 '13 at 14:55

1 Answers1

3

Ugly fix because none of the advertised options (enableEventPropagation) seemed to be working for me (and I certainly didn't want to go down the route of using "optimized:false" on 300+ markers)

Inside the mouseover listener for each marker, I do a check to see if the currently-opened InfoWindow is being hovered over:

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. i.e. ignore mouseover event for marker
        }

    }

    //Open InfoBox etc etc
Wayne Whitty
  • 19,513
  • 7
  • 44
  • 66