When a marker lies behind open infobox - Event mouseover with InfoBox plugin Google Maps API v3

Question

I'm having trouble with v3 of the Google Maps API and using the InfoBox plugin specifically with respect to this usability issue use case:

Since my map requires a custom infobox to be opened upon hovering the mouse over each respective marker, when the map has 2 markers on it that are close in proximity, even when/if one of the markers lies behind an infobox that is currently open after hovering the other close-by marker, it is triggered when mousing over it marker (even though it's behind the currently open infobox) and the other infobox obstructs the currently/previously opened infobox

I've followed the question and answer process by another poster here: Google Maps API v3 Event mouseover with InfoBox plugin and have followed the recommended code, but i can't wrap my mind around how to prevent markers that lie BEHIND an open infobox to not be triggered until that infobox is closed.

var gpoints = [];

function initializeMap1() {

    var Map1MileLatLang = new google.maps.LatLng(39.285900,-76.570000);
    var Map1MileOptions = {
      mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
        },
       mapTypeControl: false,
        zoom: 14,
      center: Map1MileLatLang,
      //mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeId: 'Styled' 
    };
    var Map1Mile = new google.maps.Map(document.getElementById("map_canvas"), Map1MileOptions);
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });//new
    Map1Mile.mapTypes.set('Styled', styledMapType);//new

   for ( var i=0; i<5; i++ ) {
            gpoints.push( new point(Map1Mile) );
            gpoints.push( new point2(Map1Mile) );
   }

function popup(_point) {
        _point.popup = new InfoBox({
            content:            _point.content,
            pane:               'floatPane',
            closeBoxURL:        '',
            alignBottom:        1
        });

        _point.popup.open(_point.marker.map, _point.marker);

            google.maps.event.addListener(_point.popup, 'domready', function() {
            //Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)

                $(_point.popup.div_).hover(
                    function() {
                        //This is called when the mouse enters the element
                    },
                    function() {
                        //This is called when the mouse leaves the element
                        _point.popup.close();
                    }
                );
            });  

   }

 function point(_map) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(39.291003,-76.546234),
            map:                _map
        });

        this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';

        // Scope
        var gpoint = this;

        // Events
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
    });

    }



 function point2(_map) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(39.295003,-76.545234),
            map:                _map
        });

        this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';

        // Scope
        var gpoint = this;

        // Events
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
        });
    }

After doing experimenting, i suspect this issue is irrelevant to z-index... am i correct in understanding this needs to be caught in the javascript?

Any help or advice would be greatly appreciated!

skyrave skyrave · Accepted Answer · 2013-07-31T09:52:07

Adding optimized: false attribute for your markers should solve the problem.

this.marker = new google.maps.Marker({
        position:           new google.maps.LatLng(39.295003,-76.545234),
        map:                _map,
        optimized:          false
    });

When a marker lies behind open infobox - Event mouseover with InfoBox plugin Google Maps API v3

1 Answers