I have a map, marker with zIndex = 6, and when I click on it, an info box appears (zIndex: 5 and panel: "overlayImage"). Thus, the marker and the tooltip are in the same panel, so it depends on zIndex, which is located above and below it. The problem is that if the marker has (draggable: true), then zIndex comparison works. (the marker is on top because 6> 5), but if I remove the drag and drop property, the marker will be under the info boxes, even if zindex is higher than the zIndex info box.
Can someone explain to me why this is happening? Code:
function initialize() { var secheltLoc = new google.maps.LatLng(49.47216, -123.76307); var myMapOptions = { zoom: 15 ,center: secheltLoc ,mapTypeId: google.maps.MapTypeId.ROADMAP }; var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); var marker = new google.maps.Marker({ map: theMap, draggable: true, position: new google.maps.LatLng(49.47216, -123.76307), zIndex: 6 }); var boxText = document.createElement("div"); boxText.style.cssText = "zindex: 3;border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada"; var myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-10, -20) ,zIndex: 5 ,boxStyle: { background: "url('tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "overlayImage" ,enableEventPropagation: false }; var ib = new InfoBox(myOptions); google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(theMap, this); }); }