Twitter Bootstrap CSS affecting Google Maps

Question

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 i

Answer 1

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.

Answer 2

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;
}

Answer 3

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 { }

Answer 4

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;
}

Answer 5

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

Answer 6

With Bootstrap 2.0, this seemed to do the trick:

#mapCanvas img {
  max-width: none;
}