Problema con imagenes de Google Maps en Responsive Web Design

Aunque no es un problema que se produzca únicamente en Joomla, sino en cualquier página Responsive Web Design que incluya un mapa de Google Maps, me parece interesante comentarlo por si nos sucede en la implementación de alguna de nuestras plantillas.

El problema que me he encontrado es que Google Maps no renderiza correctamente las imagenes dentro del mapa de nuestro sitio web. No se ve el muñeco de Google Street view, ni la imagen para cerrar los “info windows”, ni otra serie de imagenes asociadas al mapa.

Intentando buscar una solución al problema, me encuentro que google utiliza un sprite css para cargar las imagenes dentro del mapa. Es decir, todas las imagenes se encuentran en un mismo archivo, y google se encarga de posicionarlas en sus sitios respectivos.

Responsive Web Design es una tecnología que recién está empezando y uno de sus puntos débiles es el tema de la imágenes. Una de las técnicas que se suelen utilizar y yo estaba implementando en la maquetación de mi plantilla, es darles a las imagenes una anchura máxima del 100%. Así logramos que se ajusten a la anchura de la pantalla de manera automática, aunque no resolvemos el problema del peso.

img{max-witdh:100%;}

Pues bien, este parece ser el origen del problema de las imagenes dentro de Google Maps. De alguna manera Google se lia al renderizar las imagenes en el mapa si hemos utilizado esta regla css. Así lo único que tenemos que hacer para solucionar el problema, es sobreescribir esa regla para las images de nuestro mapa.

<style>
   #map img{max-width:none !important}
</style>
<div id="map"></div>

Si cargamos nuestro mapa de Google en un div llamado “map”, podemos indicarle al navegador que no aplique la regla css “max-width” a nuestro mapa de Google con el código arriba expuesto.

Espero que este post te resueva el problema de las imagenes con Google Maps y responsive web design.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s