javascript - examples - title marker google maps

Los menús de Google Maps, Z Index y Drop Down de Javascript

Question

Hoy me he encontrado con un pequeño problema: tengo un menú desplegable de JS y cuando inserté un mapa de Google ... el menú se representa detrás del mapa de Google ... Cualquier idea sobre cómo buscar el índice z del mapa de Google ?

¡Gracias!

Answer 1

El mapa ya está envuelto dentro de un div. Dale un índice z negativo y funciona, con una advertencia: los controles gmaps no se pueden hacer clic.

Answer 2

Envuelve el mapa en un DIV, dale a ese DIV un índice z de 1. Ajusta tu menú desplegable en un DIV y dale un valor más alto.

Answer 3

Intenta configurar el índice z del menú increíblemente alto. Aparentemente Google Maps usa un rango de -9000000 a 9000000.

Answer 4

Tenga en cuenta que los menús desplegables de algunos navegadores ( ejem. IE * ejem) no se pueden zPositioned en absoluto. Tendrá que utilizar una "cuña iframe" para ocultarlo u ocultar el menú desplegable por completo si desea colocar algo encima de él. Ver: http://clientside.cnet.com/wiki/cnet-libraries/02-browser/02-iframeshim

Answer 5

IE da el problema

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

Solución para IE: defina el div que debería estar finalmente al tope en html.

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

Answer 6

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

Con mucho, la respuesta más simple / más rápida para mí fue volver a organizar mi mark-up / css para tener mis flyouts / rollovers enumerados en el marcado anterior / antes de mi mapa (literalmente, antes del <div id="map"> ), de esta forma podría permitir que el z-index permanezca 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 7

Creé un menú desplegable de estilo de google y tuve el mismo problema ... usando la API V3 para google maps, solo creaste un control y lo colocaste en el mapa usando:

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

Como es un menú desplegable, simplemente asegúrate de que el índice z del div que contiene sea el más alto (z = 3), luego la parte desplegable que contiene los elementos del menú es más baja que el div que contiene (z = 0).

Aquí hay un ejemplo .

Según mi experiencia, la única vez que necesitas usar cuñas es para complementos (como con Google Earth).

Answer 8

No es necesario configurar el índice z para el mapa y 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á usando un contenedor, entonces el mapa ya no será interactivo ya que ahora está detrás del contenedor.

Para solucionar esto, use las funciones onmouseover y onmouseout en su div wrapper. Asegúrate de que estén en tu envoltorio Div y no en tu mapa div.

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

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

Answer 9

He descubierto que, a veces, descuidando inadvertidamente declarar el! Doctype causará este tipo de contratiempo en IE, cuando otros navegadores parecen ser capaces de negociar bien la página.

Answer 10

Si su menú está envuelto en un contenedor div p #menuWrap Ej. #menuWrap , asígnele una posición relativa y asígnele un alto índice Z .... ej.

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

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

Answer 11

Si su problema ocurre en Internet Explorer, pero se presenta de la manera que esperaría en Firefox o Safari, este enlace me fue extraordinariamente útil con un problema similar .

Parece reducirse a la idea de marcar un elemento como "posición: relativa"; en CSS hace que IE6 y 7 se mezclen con su índice z relativo a otros elementos que vienen antes en el documento HTML, de maneras intuitivas y anti-especificación. Supuestamente IE8 se comporta "correctamente", pero yo no lo he probado.

Los consejos de Anutron serán realmente útiles si su problema es con un elemento de formulario <SELECT> , pero si usa JavaScript para manipular divs o uls para que actúen como un menú desplegable, no creo que sea de ayuda.