Twitter Bootstrap CSS affecting Google Maps

raklos picture raklos · Feb 4, 2012 · Viewed 50.7k times · Source

I'm using Twitter Bootstrap, and have a Google map.

Images on the map, such as marker are being skewed by the CSS in Bootstrap.

In the Bootstrap CSS there is:

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

When I disable the max-width property using Firebug, the marker image appears as normal. How can I prevent the Bootstrap CSS from affecting the Google maps images?

Answer

kevinwmerritt picture kevinwmerritt · Feb 7, 2012

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img {
  max-width: none;
}