Twitter Bootstrap CSS affecting Google Maps
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.
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.
With Bootstrap 2.0, this seemed to do the trick:
#mapCanvas img {
max-width: none;
}