Google Maps, Z Index and Drop Down Javascript menus

Question

I've run on a little problem today: I have a JS drop down menu and when I inserted a GoogleMap... the Menu is rendered behind the Google Map... Any ideas on how to chance the z Index of the Google Map?

Thanks!

Solution 1

If your problem happens in Internet Explorer, but it renders the way you'd expect in FireFox or Safari, this link was extraordinarily helpful for me with a similar problem.

It appears to boil down to the idea that marking an element as "position:relative;" in CSS causes IE6&7 to mess with it's z-index relative to other elements that come before it in the HTML document, in unintuitive and anti-spec ways. Supposedly IE8 behaves "correctly" but I haven't tested it myself.

Anutron's advice is going to be really helpful if your problem is with a <SELECT> form element, but if you're using JavaScript to manipulate divs or uls to act like a drop down I don't think it's going to help.

Solution 2

Note that dropdown menus in some browsers (ahemIE*ahem) cannot be zPositioned at all. You'll need to use an "iframe shim" to obscure it or hide the dropdown entirely if you want to position something above it. See: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Solution 3

The map is already wrapped inside a div. Give it a negative z-index and it works - with one caveat: the gmaps controls aren't clickable.

Solution 4

If your menu is wrapped in a div container e.g. #menuWrap then assign it position relative and give it a high z-index.... e.g.

#menuWrap {
  position: relative;
  z-index: 9999999
}

Make sure your map is inside a div

Solution 5

Try setting your menu z-index insanely high. Apparently Google Maps uses a range from -9000000 to 9000000.

View more solutions

Comments

[ebarrera]

The menus are built in a template... I'm not sure I can control that. That's why I was asking for a way to change the Google Map's z-Index

[Andy Stewart]

That's a very useful article you linked. Thanks!