When a marker lies behind open infobox – Event mouseover with InfoBox Google Maps

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!

PS- i asked this question over at stackoverflow as well but got no responses yet: [url]http://stackoverflow.com/questions/7691088/when-a-marker-lies-behind-open-infobox-event-mouseover-with-infobox-plugin-goog[/url]

Also in #JavaScript _↴