Programatik

Hemos estado trabajando en un proyecto inmobiliario. Cada ficha de inmueble presenta varias pestañas donde el usuario puede seleccionar datos del inmueble, fotografías, una visita virtual y un mapa de localización.

Este mapa no es más que el código que Google Maps proporciona para copiar y pegar en forma de IFrame. Sin embargo, nos encontramos con un problema sobre el que no teníamos noticias: si tratas de cargar un mapa de Google Maps en una capa oculta, dicho mapa no se renderiza correctamente y aparece gris. Además, los botones de la interfaz salen descuadrados.

Al principio pensamos que se trataba de algo común a la carga de contenido en un IFrame, sin embargo descubrimos que es el propio renderizado de Google Maps el que no soporta que allí donde pegues el código del mapa esté oculto.

La solución a esto ha sido la siguiente:

• Se indica que la capa tenga un display de bloque (con lo cual está visible).
• Se posiciona la capa de forma absoluta (position: absolute;)
• Se sitúa la capa fuera del viewport (top: -10000px;).

Después de esto, el mapa se ha cargado correctamente. Como quiera que la capa del mapa se muestra al hacer clic en una de las pestañas de la ficha del inmueble, ésta vuelve a su posición correcta, ya visible (y con el mapa, como hemos dicho, cargado por completo).

Hemos observado este comportamiento en FF, IE7, IE6 y Safari.

Enlaces