Question

I am using Google Maps API V3 to create a marker and the Infobox library to create custom infowindows.

Problem: I want a particular marker to be displayed above the infoboxes. However when I set the Z-index of the marker to be larger than the z-index of the infobox, the stacking order remains unchanged where the infobox is still on top of the marker.

Did I miss out something required to make the Z-index order work?

JS Code

// Create InfoBox               
var infoboxOptions = {
    disableAutoPan: true,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(infobox_offsets[0], infobox_offsets[1]),
    zIndex: 100,
    infoBoxClearance: new google.maps.Size(5, 5),
    contextmenu: true,
    closeBoxURL: '',
    isHidden: true,
    pane: "floatPane",
    enableEventPropagation: false
};

var infobox = new InfoBox(infoboxOptions);


// Create the marker
var marker = new google.maps.Marker({
    position: latLng,
    icon: markerImage,
    zIndex: 200,
    map: map
});

Answer 1

z-index set for Infowindow sets only the relative order of Infowindows. As the documentation mentions default InfoWindows are always displayed in front of markers.