InfoBubble z-Index and GMap Marker z-index

Question

I am using InfoBubble to display content in GMap. However the zIndex seems not working since InfoBubble with lower zIndex still block Marker with higher zIndex, anyone encouter similar issue?

The GMap Marker:

new google.maps.Marker({
    draggable: true,
    raiseOnDrag: true,
    icon: currentLocationMarkerImage,
    shadow: currentLocationMarkerShadow,
    shape: currentLocationMarkerShape,
    map: map,
    animation: google.maps.Animation.DROP,
    position: getOriginLatLng(),
    zIndex: 11
});

The InfoBubble:

new InfoBubble({
    /*maxWidth: 300,*/
    borderRadius        : 4,
    arrowStyle          : arrowStyle,
    color               : "#fff",
    borderColor         : '#1e90ff',
    backgroundColor     : '#fefefe',
    disableAutoPan      : disableAutoPan,
    shadowStyle         : 0,
    padding             : 5,
    arrowSize           : 10,
    borderWidth         : 2,
    // hideCloseButton  : true,
    arrowPosition       : 50,
    backgroundClassName : 'phoney',
    disableAnimation    : disableAnimation,
    zIndex              : 10
});

Thank you.

Answer 1

The infoBubble will always display on top of markers. See:

https://developers.google.com/maps/documentation/javascript/overlays#Initializing

The infoBubble is on the float pane. The markers are on the overlay pane.