Is Your Google Maps Image Distorted by Twitter Bootstrap? Here\'s How to Resolve the Issue.

Google Maps Image Distortion Caused by Twitter Bootstrap CSS

Using Twitter Bootstrap can lead to unexpected image distortions in Google Maps, particularly affecting markers. This issue arises from the Bootstrap CSS, which includes the following declaration:

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

When this property is applied to Google Maps images, it scales marker images disproportionately. Disabling the max-width property resolves the issue, as evidenced by using Firebug.

To prevent Bootstrap CSS from interfering with Google Maps images, you can implement the following solution:

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

By overriding the Bootstrap CSS for images within the map container (identified by #mapCanvas), you can restore the normal appearance of marker images. This solution ensures that Bootstrap styles do not affect Google Maps images, allowing both Bootstrap and Google Maps to function as intended.

The above is the detailed content of Is Your Google Maps Image Distorted by Twitter Bootstrap? Here\'s How to Resolve the Issue.. For more information, please follow other related articles on the PHP Chinese website!