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

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%"

Answer 2

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

Answer 3

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

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

Answer 4

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.

Answer 5

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).