Una de Código

Cada día son más los que se decantan por incluir en sus páginas web los mapas de Google, y puede que algunos, como me ha pasado a mí, se encuentren con algunos problemas:

• Si la página tiene menús desplegables, éstos se muestran por debajo del mapa.
• Si la página está en un encoding distinto a UTF-8, los acentos de los textos del mapa no se muestran correctamente.

Pues bien, aquí mismo os indico la solución que he encontrado.

CORRECCIÓN DEL ENCODING

Como sabréis, para que carguen los javascripts de la API, tenemos que incluir en las cabeceras de la página, una linea de este tipo:

<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&v=2.x&key=CLAVE”></script>

Tan sólo tenemos que añadir un parámetro extra para indicar la codificación de caracteres en la que queremos recibir los textos. El parámetro en cuestión es: &oe=CHARSET.

Ejemplo:

<script type=”text/javascript” src=”http://maps.google.com/maps?file=api&v=2.x&oe=ISO-8859-1&key=CLAVE”></script>

SOLUCIÓN MENUS

Para que los menús desplegables se muestren por encima del mapa en lugar de desplegarse por debajo, debemos añadir la regla z-index tanto al contenedor del mapa como a los menús.

Suponiendo que tenemos una estructura de menús basada en listas y un contenedor div en el cual alojamos el mapa, el estilo quedaría así:

1. ul#menu,

2. ul#menu ul,

3. ul#menu ul li,

4. ul#menu ul li ul {

5.   z-index: 2;

6. }

7.  
8. div#mapa {

9.   z-index: 1;

10. }

NOTA: Al parecer, en el Internet Explorer no se hereda correctamente el z-index entre elementos, por ello debemos indicarlo en cada elemento que se encuentre en el menú.