Votre image Google Maps est-elle déformée par Twitter Bootstrap ? Voici comment résoudre le problème.

Distorsion de l'image de Google Maps causée par Twitter Bootstrap CSS

L'utilisation de Twitter Bootstrap peut entraîner des distorsions d'image inattendues dans Google Maps, affectant particulièrement les marqueurs. Ce problème provient du CSS Bootstrap, qui inclut la déclaration suivante :

<code class="css">img {
    max-width: 100%;
}</code>

Lorsque cette propriété est appliquée aux images Google Maps, elle met à l'échelle les images de marqueur de manière disproportionnée. La désactivation de la propriété max-width résout le problème, comme en témoigne l'utilisation de Firebug.

Pour empêcher Bootstrap CSS d'interférer avec les images Google Maps, vous pouvez mettre en œuvre la solution suivante :

<code class="css">#mapCanvas img {
  max-width: none;
}</code>

En en remplaçant le CSS Bootstrap pour les images dans le conteneur de carte (identifié par #mapCanvas), vous pouvez restaurer l'apparence normale des images de marqueur. Cette solution garantit que les styles Bootstrap n'affectent pas les images Google Maps, permettant à Bootstrap et Google Maps de fonctionner comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!