Twitter Bootstrap CSS affecting Google Maps

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?

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img {
  max-width: none;
}

There is also an issue with the dropdown selectors for terrain and overlays, adding both these will fix the issues...

#mapCanvas img { 
  max-width: none;
}

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

The second style will sort of other issues with the terrain and overlay box in some browsers.

Give your map canvas div an id of map_canvas.

This bootstrap commit includes the max-width: none fix for the id map_canvas (but it won't work for mapCanvas).

None of these answers worked for me, so I went in to my div and looked at its children I saw a new div with class "gm-style", so I put this in my CSS:

.gm-style img {
    max-width: none;
  }

  .gm-style label {
    width: auto; display:inline;
  }

..and that solved the problem for me.

You want to over-ride the max-width rule in the CSS section by using max-width: none; This seems to be the way around this problem

Changing the #MapCanvas didn't work for us using gmap4rails gem, but did when we changed to

.map_container img {
    max-width: none;
}

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

I am using gmaps4rails, this fix did it for me:

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

latest twitter bootstrap 2.0.4 includes this fix directly.

If you are wrapping your content in the a (div class="container") as in the demo page of twitter bootstrap, you should add a style="height: 100%"

There is also an issue with printing maps using Print in any browser. The img { max-width: 100% !important; } will not be fixed by the code above: you need to add an !important declaration like so:

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

I also had to turn box-shadow off, and because of the order of my includes, I added the !important flag.

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

All answers were max-widht:none

for me, max-height:inherit worked.....

People are using #map, #map_canvas, etc. Look at your parent div. If it's blue, than it will be #blue img { }