Aparece un error al introducir un mapa de google en páginas responsive.

Al parecer google no gestiona bien el with de las imagenes a cargar.

En este enlace se detalla el problema y aporta una solución al mismo.

http://todojoomla.wordpress.com/2013/02/14/problema-con-imagenes-de-google-maps-en-responsive-web-design/

El texto en bruto se inserta para conservarlo en local:

Problema con imagenes de Google Maps en Responsive Web Design

Publicado en febrero 14, 2013 de Mikel

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.