Twitter Bootstrap CSS affecting Google Maps

Question

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