Twitter Bootstrap CSS afecta a Google Maps

Estoy usando Twitter Bootstrap, y tengo un mapa de Google.

Las imágenes en el mapa, como el marcador, están siendo sesgadas por el CSS en Bootstrap.

En el Bootstrap CSS hay:

img { border: 0 none; height: auto; max-width: 100%; } 

Cuando desactivo la propiedad de max-width usando Firebug, la imagen del marcador aparece como normal. ¿Cómo puedo evitar que Bootstrap CSS afecte las imágenes de los mapas de Google?

Con Bootstrap 2.0, esto pareció ser el truco:

 #mapCanvas img { max-width: none; } 

También hay un problema con los selectores desplegables para el terreno y superposiciones, agregando que ambos solucionarán los problemas …

 #mapCanvas img { max-width: none; } #mapCanvas label { width: auto; display:inline; } 

El segundo estilo resolverá otros problemas con el terreno y el recuadro de superposición en algunos navegadores.

Dale a tu mapa canvas div un id de map_canvas .

Esta confirmación del bootstrap incluye el max-width: none corrección para el ID map_canvas (pero no funcionará para mapCanvas ).

Ninguna de estas respuestas funcionó para mí, así que entré en mi div y miré a sus hijos. Vi un nuevo div con clase “gm-style”, así que puse esto en mi CSS:

 .gm-style img { max-width: none; } .gm-style label { width: auto; display:inline; } 

..y eso resolvió el problema para mí.

Desea anular la regla de ancho máximo en la sección CSS utilizando max-width: none; Esta parece ser la forma de evitar este problema

Cambiar el #MapCanvas no funcionó para nosotros utilizando la gem gmap4rails, pero lo hicimos cuando cambiamos a

 .map_container img { max-width: none; } .map_container label { width: auto; display:inline; } 

Estoy usando gmaps4rails, esta solución lo hizo por mí:

 .gmaps4rails_map img { max-width: none; } .gmaps4rails_map label { width: auto; display:inline; } 

El último twitter bootstrap 2.0.4 incluye esta corrección directamente.

Si está envolviendo su contenido en la a (div class = “contenedor”) como en la página de demostración de twitter bootstrap, debe agregar un style = “height: 100%”

También hay un problema con la impresión de mapas usando Imprimir en cualquier navegador. El img { max-width: 100% !important; } img { max-width: 100% !important; } no será corregido por el código anterior: debe agregar una statement !important como esta:

 @media print { img { max-width: auto !important; } } 

También tuve que desactivar Box-shadow y, debido al orden de mis inclusiones, agregué la bandera! Important.

 #mapCanvas img { max-width: none !important; box-shadow: none !important; } 

Todas las respuestas fueron max-widht: ninguna

para mí, max-height: inherit funcionó …..

Las personas están usando #map, #map_canvas, etc. Mire su div principal. Si es azul, de lo que será #blue img {}