J’ai rencontré quelques problèmes lors de l’intégration de cartes Google Maps (mais ce problème peut arriver dans d’autres cas) dans une application Web utilisant Bootstrap. Le problème: les images utilisées dans la carte (marqueur, barre de scroll, etc.) étaient complement déformées sans raison apparente puisque le même code aurait très bien fonctionné ailleurs.
Après quelques recherches avec l’inspecteur d’éléments de Chrome, j’ai finalement identifié la source: un “max-width: 100%” appliqué à toutes les balises img par Bootstrap. En regardant un peu plus dans le le fichier bootstrap.css, voici ce qu’on peut trouver:
img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
#map_canvas img,
.google-maps img {
max-width: none;
}Autrement dit, le cas est géré par le framework CSS uniquement si vous avez appelé le conteneur de la carte avec
<div id="map_canvas"></div>ou
<div class="google-maps"></div>La solution, outre changer le nom de votre conteneur, est d’ajouter cette ligne à votre CSS: .votreClasse { max-width: none; }
Une fois cela fait, tout fonctionne à nouveau correctement! Dans l’espoir que cette astuce puisse aider quelqu’un un jour.