Twitter Bootstrap CSS que afecta a Google Maps

147

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?

google-maps twitter-bootstrap css

— raklos
fuente

responda aquí: github.com/zurb/foundation/issues/26

— raklos

187

Con Bootstrap 2.0, esto pareció funcionar:

#mapCanvas img {
  max-width: none;
}

— kevinwmerritt
fuente

66

Asegúrese de agregar #mapCanvas img { width: auto; display:inline; }como se menciona a continuación por @nodrog

— jlb

De las notas de la versión de Bootstrap 2.0.3: "Se corrigió la regresión en el soporte de imágenes receptivas a partir de 2.0.1. Hemos agregado el ancho máximo: 100%; a las imágenes de forma predeterminada. Lo eliminamos en nuestra última versión desde que teníamos amigos "quejándonos de la integración de Google Maps y otros proyectos, pero ahora estamos adoptando una postura diferente sobre estas cosas y exigiremos a los desarrolladores que realicen estos ajustes".

— kevinwmerritt

FYI: Notas de la versión de Bootstrap 2.0.4: "Se agregó CSS especial para evitar el ancho máximo: 100%; en las imágenes se confunde el renderizado de Google Maps".

— kevinwmerritt

Eso es extraño que finalmente han decidido Identificación del hardcode, no clase de uso en lugar

— zerkms

1

#mapCanvas no funcionó para mí. Acabo de usar mi clase .map que utilicé como contenedor de google maps y funcionó. ¡GRACIAS!

— Fydo

80

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.

— nodrog
fuente

Si ! todo parece arreglado con este combinado con la respuesta marcada como "aceptada" arriba. Gracias.

— Mat

funciona como un encanto en Firefox 17 pero no en Chrome 23. No sé por qué, pero encontré la solución, solo agregue esto:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

— yosafatade

Eres un genio. Muchas gracias. Esto me estaba volviendo loco :-)

— Bear

20

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).

— robar
fuente

Creo que solo es necesario cambiar la identificación en v2.2.2

— jacktrades

no puedo encontrar esa identificación en el archivo css

— Muhaimin

@robd: Solo por curiosidad, por qué no funcionará, excepto map_canvas.

— ArunRaj

@ArunRaj porque la solución en bootstrap está codificada en el #map_canvas id (vea el commit vinculado). En cualquier caso, esta respuesta probablemente no esté actualizada dado que tiene casi 2 años.

— robado

11

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í.

— Christopher Dow
fuente

+1 esta es la única respuesta que me funcionó para solucionar los extraños controles de "zoom". (Bootstrap 2)

— philfreo

A mí también me funcionó. Good spotting :)

— jeje

Gracias, funcionó para mí también. La única respuesta que me funcionó fue arreglar los extraños controles de "zoom". (con Foundation 5)

— Steffi

3

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

— Pawpoint
fuente

2

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;
}

— Sam Joseph
fuente

2

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

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

— Benjamin Crouzier
fuente

1

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%"

— redochka
fuente

1

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;
  }
}

— tempranova
fuente

0

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;
}

— Redtopia
fuente

1

Esto funcionó para mí. Si vas a rechazar a alguien, al menos deberías decir por qué.

— Redtopia

0

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 {}

— usuario2060451
fuente