Twitter Bootstrap CSS que 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 sesgadas por el CSS en Bootstrap.

En el CSS de Bootstrap hay:

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

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

Con Bootstrap 2.0, esto pareció funcionar:

#mapCanvas img {
  max-width: none;
}

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

#mapCanvas img { 
  max-width: none;
}

#mapCanvas label { 
  width: auto; display:inline; 
} 

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

Déle a su mapa lienzo div una identificación de map_canvas.

Esta confirmación de arranque incluye la max-width: nonecorrección para la identificación map_canvas(pero no funcionará mapCanvas).

Ninguna de estas respuestas funcionó para mí, así que entré en mi div y miré a sus hijos. Vi un nuevo div con la 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 solucionar este problema

Cambiar los #MapCanvas no funcionó para nosotros usando la gema gmap4rails, pero lo hizo 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;
}

La última versión de Twitter Bootstrap 2.0.4 incluye esta solución directamente.

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

También hay un problema con la impresión de mapas con Print en cualquier navegador. El img { max-width: 100% !important; }código anterior no lo solucionará: debe agregar una !importantdeclaración como esta:

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

También tuve que desactivar la sombra de caja, y debido al orden de mis inclusiones, agregué la bandera! Importante.

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

Todas las respuestas fueron max-widht: none

para mí, altura máxima: heredar trabajado .....

Las personas usan #map, #map_canvas, etc. Mira tu div padre. Si es azul, entonces será #blue img {}