Twitter Bootstrap CSS affectant Google Maps

147

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

Les images sur la carte, telles que les marqueurs, sont biaisé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 max-widthpropriété à l'aide de Firebug, l'image du marqueur apparaît normalement. Comment puis-je empêcher le CSS Bootstrap d'affecter les images Google Maps?

google-maps twitter-bootstrap css raklos
la source

réponse ici: github.com/zurb/foundation/issues/26

raklos

187

Avec Bootstrap 2.0, cela semblait faire l'affaire:

#mapCanvas img {
  max-width: none;
}

kevinwmerritt
la source

6

Assurez-vous d'ajouter #mapCanvas img { width: auto; display:inline; }comme mentionné ci-dessous par @nodrog

jlb

À partir des notes de version de Bootstrap 2.0.3: "Correction de la régression dans la prise en charge des images réactives à partir de la version 2.0.1. Nous avons ré-ajouté max-width: 100%; aux images par défaut. Nous l'avons supprimé dans notre dernière version car nous avions des gens Nous nous plaignons de l'intégration de Google Maps et d'autres projets, mais nous adoptons maintenant une position différente sur ces choses et nous demanderons aux développeurs d'apporter ces modifications de leur côté. "

kevinwmerritt

FYI: Notes de version de Bootstrap 2.0.4: "Ajout d'un CSS spécial pour empêcher max-width: 100%; sur les images de gâcher le rendu de Google Maps."

kevinwmerritt

C'est étrange qu'ils aient finalement décidé de coder en dur l'ID, de ne pas utiliser la classe à la place

Zerkms

1

#mapCanvas n'a pas fonctionné pour moi. Je viens d'utiliser ma classe .map que j'ai utilisée comme conteneur de google maps et cela a fait l'affaire. MERCI!

Fydo

80

Il y a également un problème avec les sélecteurs de liste déroulante pour le terrain et les superpositions, l'ajout de ceux-ci résoudra les problèmes ...

#mapCanvas img { 
  max-width: none;
}

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

Le deuxième style entraînera d'autres problèmes avec le terrain et la zone de superposition dans certains navigateurs.

nodrog
la source

Oui ! tout semble fixe avec celui-ci combiné avec la réponse marquée comme "acceptée" ci-dessus. Merci.

Mat

fonctionne comme un charme dans Firefox 17 mais pas dans Chrome 23. Je ne sais pas pourquoi mais j'ai trouvé la solution, il suffit d'ajouter ceci:$('.map').on('shown',function(){ google.maps.event.trigger(map, 'resize'); });

yosafatade

Tu es un génie. Merci beaucoup. Cela me rendait fou :-)

Ours

20

Donnez à votre div de canevas de carte un identifiant map_canvas.

Ce commit d'amorçage inclut le max-width: nonecorrectif pour l'id map_canvas(mais cela ne fonctionnera pas pour mapCanvas).

volé
la source

Je pense que seul le changement de l'identifiant est nécessaire dans la v2.2.2

jacktrades

Je ne trouve pas un tel identifiant dans le fichier css

Muhaimin

@robd: Juste pour les curieux, pourquoi cela ne fonctionnera pas sauf map_canvas.

ArunRaj

@ArunRaj car le correctif dans bootstrap est codé en dur avec l'ID #map_canvas (voir le commit lié). Dans tous les cas, cette réponse est probablement dépassée maintenant étant donné qu'elle a presque 2 ans.

robd

11

Aucune de ces réponses n'a fonctionné pour moi, alors je suis entré dans ma division et j'ai regardé ses enfants.J'ai vu une nouvelle div avec la classe "gm-style", donc 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.

Christopher Dow
la source

+1 c'est la seule réponse qui a fonctionné pour moi pour corriger les étranges commandes de "zoom". (Bootstrap 2)

philfreo

A travaillé pour moi aussi. Good spotting :)

jeje

Merci, a travaillé pour moi aussi. La seule réponse qui a fonctionné pour moi est de corriger les étranges commandes de "zoom". (avec Foundation 5)

Steffi

3

Vous souhaitez 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

Pawpoint
la source

2

Changer le #MapCanvas n'a pas fonctionné pour nous en utilisant le gem gmap4rails, mais l'a fait quand nous sommes passés à

.map_container img {
    max-width: none;
}

.map_container label {
    width: auto; display:inline;
}

Sam Joseph
la source

2

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

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

Benjamin Crouzier
la source

1

Le dernier bootstrap de Twitter 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 ajouter un style = "height: 100%"

redochka
la source

1

Il existe également un problème avec l'impression de cartes à l'aide de Imprimer dans n'importe quel navigateur. Le img { max-width: 100% !important; }ne sera pas corrigé par le code ci-dessus: vous devez ajouter une !importantdéclaration comme ceci:

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

tempranova
la source

0

J'ai également dû désactiver box-shadow, et en raison de l'ordre de mes inclusions, j'ai ajouté le drapeau! Important.

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

Redtopia
la source

1

Cela a fonctionné pour moi. Si vous voulez voter contre quelqu'un, vous devriez au moins dire pourquoi.

Redtopia

0

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

pour moi, hauteur max: hériter travaillé .....

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

user2060451
la source

Twitter Bootstrap CSS affectant Google Maps

Réponses: