Showing the Infobox in Bingmaps v7 above the Pins

Question

I have a number of pins on the map and a few metheods to allow me to click on a pin and the infobox will popup. This seems to be working fine apart from the infobox itself is below the Pins. I have tried setting the zIndex of both the pins and the infobox in a number of differant ways but still the infobox is below the pins. Any thoughts on how to achieve this?

Answer 1

For me, setting the .Infobox style did not work, but wrapping the infobox within it's own entity collection, and setting the zIndex on that, did work. I also tried quite a number of variations on setting zIndexes on my pushpins and pushpin collection entities before trying this option. Perhaps we are seeing this behavior only because we are putting pushpins within their own entity collections, but trying to add the InfoBox seperately.

Some example code of what works for me:

var infoBox = CreateMyInfoBox(); // create the Microsoft InfoBox here.
var entityCollectionInfoBox = new Microsoft.Maps.EntityCollection({zIndex:2000});
entityCollectionInfoBox.push(infobox)
map.entities.push(entityCollectionInfoBox);

There's no obvious semantic difference between setting a high z-Index on the infobox directly, and wrapping it in an EntityCollection with a high z-Index, but apparently there is.

Answer 2

Set these three values on the Infobox:

zIndex: google.maps.Marker.MAX_ZINDEX + 1, pane: "floatPane", enableEventPropagation: false

Did work for me.

Answer 3

I have two different types of pushpins - each type has an infobox. I set the zIndex of the first set of pushpins to -2, the second set of pushpins to -1 and left the infobox alone - since it didn't care what I set the zIndex to.

Answer 4

For me the following worked, not very nice but better than having the pins above the Infobox

<style type="text/css">
  .Infobox
  {
    z-index:150; 
  }
</style>