Corrupted controls in Google Maps with Twitter Bootstrap

May 13th, 2014 by Alex Leave a reply »

Twitter’s bootstrap front-end framework is cool and has lots of features, but it doesn’t play well with Google’s maps. The controls appeared all blurry and squished, or totally invisible. Luckily, the fix is simple:

#mymap img {
  max-width: none
}

Got the idea? It simply resets the max-width which bootstrap sets to 100% for all images.

But there’s also another piece of code that is in bootstrap’s CSS file:

#map_canvas img,
.google-maps img {
  max-width: none;
}

So, to fix controls you can just apply google-maps class to your map container, and bootstrap will know what you need 😉


Comments are closed.