Twitter Bootstrap CSS affectant Google Maps

J’utilise Twitter Bootstrap et j’ai une carte Google.

Les images sur la carte, telles que les marqueurs, sont faussées par le CSS dans Bootstrap.

Dans le CSS Bootstrap, il y a:

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

Lorsque je désactive la propriété max-width aide de Firebug, l’image du marqueur apparaît comme normale. Comment puis-je empêcher le CSS Bootstrap d’affecter les images Google Maps?

Avec Bootstrap 2.0, cela semblait faire l’affaire:

 #mapCanvas img { max-width: none; } 

Il y a également un problème avec les sélecteurs de liste déroulante pour le terrain et les superpositions, en ajoutant les deux ce qui résoudra les problèmes …

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

Le second style traitera d’autres problèmes liés au terrain et à la zone de superposition de certains navigateurs.

Donnez à votre diviseur de carte un identifiant de map_canvas .

Ce commit inclut le correctif max-width: none pour l’id map_canvas (mais cela ne fonctionnera pas pour mapCanvas ).

Aucune de ces réponses n’a fonctionné pour moi, alors je suis allée dans ma division et j’ai regardé ses enfants. J’ai vu une nouvelle div avec la classe “gm-style”, alors j’ai mis ceci dans mon CSS:

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

..et cela a résolu le problème pour moi.

Vous voulez remplacer la règle de largeur maximale dans la section CSS en utilisant max-width: none; Cela semble être le moyen de contourner ce problème

Changer le #MapCanvas ne fonctionnait pas pour nous en utilisant gmap4rails gem, mais quand nous avons changé en

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

J’utilise gmaps4rails, ce correctif l’a fait pour moi:

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

La dernière version de Twitter bootstrap 2.0.4 inclut ce correctif directement.

Si vous encapsulez votre contenu dans le a (div class = “container”) comme dans la page de démonstration de twitter bootstrap, vous devez append un style = “height: 100%”

L’impression de cartes à l’aide de l’option Imprimer dans n’importe quel navigateur pose également un problème. Le img { max-width: 100% !important; } img { max-width: 100% !important; } ne sera pas corrigé par le code ci-dessus: vous devez append une déclaration comme celle-ci:

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

Je devais également éteindre la boîte, et à cause de l’ordre de mes inclusions, j’ai ajouté le drapeau! Important.

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

Toutes les réponses étaient max-widht: aucune

pour moi, max-height: hérité travaillé …..

Les gens utilisent #map, #map_canvas, etc. Regardez votre div parent. Si c’est bleu, ce sera #blue img {}