Google Maps, índice Z y menús desplegables de Javascript

Question

He tenido un pequeño problema hoy:Tengo un menú desplegable JS y cuando inserté un GoogleMap...el menú se muestra detrás del mapa de Google...¿Alguna idea sobre cómo cambiar el índice z del mapa de Google?

¡Gracias!

Answer 1

Si su problema ocurre en Internet Explorer, pero se muestra de la forma esperada en Firefox o Safari, este enlace fue extraordinariamente útil para mí con un problema similar.

Parece reducirse a la idea de que marcar un elemento como "posición: relativo"; En CSS hace que IE6 y 7 se metan con su índice Z en relación con otros elementos que se encuentran ante él en el documento HTML, de manera poco intuitiva y anti-especificación.Supuestamente IE8 se comporta "correctamente", pero no lo he probado yo mismo.

El consejo de Anutron será realmente útil si su problema es con un <SELECT> elemento de formulario, pero si estás usando JavaScript para manipular divs o uls para que actúen como un menú desplegable, no creo que vaya a ayudar.

Answer 2

Tenga en cuenta que los menús desplegables en algunos navegadores (EjemIE*ejem) no se puede zPosicionar en absoluto.Necesitará usar una "cuña de iframe" para oscurecerlo u ocultar el menú desplegable por completo si desea colocar algo encima.Ver: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 3

El mapa ya está dentro de un div.Dale un índice z negativo y funcionará, con una advertencia:No se puede hacer clic en los controles de gmaps.

Answer 4

Si su menú está envuelto en un contenedor div, p. #menuWrap luego asígnale una posición relativa y dale un índice z alto...p.ej.

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

Asegúrate de que tu mapa esté dentro de un div

Answer 5

Intente configurar el índice z de su menú increíblemente alto. Aparentemente Google Maps utiliza un rango de -9000000 a 9000000.

Answer 6

Envuelva el mapa en un DIV, déle a ese DIV un índice z de 1.Envuelva su menú desplegable en un DIV y asígnele un valor más alto.

Answer 7

IE da el problema

cada div que esté envuelto en un div en posición relativa iniciará un nuevo índice z en IE.La forma en que IE interpreta los divs relativos externos es en orden de html.La última definición está arriba.No importa cuáles sean los índices z de los divs dentro de los divs posicionados relativamente.

Solución para IE:defina el div que debería estar por fin en la parte superior en html.

(Por lo tanto, el índice z funciona en IE, pero solo por div titular, cada div titular es independiente de otros divs titular)

Answer 8

z-index (especialmente en Internet Explorer 7) realmente no funcionó para mí.Probé muchas combinaciones diferentes de alto vs.Índices z de mapas bajos, pero no tuve alegría.

Con diferencia, la respuesta más simple/rápida para mí fue reorganizar mi marcado/css para que mis menús desplegables/desplazamientos aparezcan en el marcado. arriba/antes mi mapa (literalmente, antes del <div id="map">), de esta manera podría dejar que el z-index permanecer predeterminado (auto) y pasar a aspectos más importantes de mi aplicación web ;)

¡Espero que esto ayude!

<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>

Answer 9

Creé un menú desplegable de estilo de Google y tuve el mismo problema... usando la API V3 para Google Maps, simplemente crea un control y lo coloca en el mapa usando:

map.controls[google.map.ControlPosition.TOP].push(control);

Dado que es un menú desplegable, solo asegúrese de que el índice z del div contenedor sea el más alto (z = 3), luego la parte desplegable que contiene los elementos del menú sea menor que el div contenedor (z = 0).

Aquí hay un ejemplo.

Según mi experiencia, el único momento en el que necesitas usar cuñas es para complementos (como con Google Earth).

Answer 10

No es necesario configurar el índice z tanto para el mapa como para el menú.Si simplemente configura el índice z del menú más alto que el mapa, no necesariamente funcionará.

Establezca el índice z del div del mapa en -1.Ahora el menú se desplegará y se mostrará sobre el mapa... pero si estás usando un contenedor, el mapa ya no será interactivo ya que ahora está detrás del contenedor.

Para solucionar este problema, utilice las funciones onmouseover y onmouseout en su div contenedor.Asegúrese de que estén en su div contenedor y no en su div de mapa.

onmouseover="getElementById('map').style.zIndex = '10000';" 

onmouseout="getElementById('map').style.zIndex = '-1';"

Answer 11

Descubrí que a veces, descuidar inadvertidamente declarar el tipo de documento !causará este tipo de problemas en IE, cuando otros navegadores parecen ser capaces de negociar bien la página.