Twitter bootstrap and Google maps v3

I was playing around with excellent twitter bootstrap and google maps javascript api (version 3), and for some time I had problem with displaying infowindows (“map bubbles”).

Everything went smooth, markers were animated (and in right position), click events were working, except that info windows were looking pretty strange.

As you can see something went wrong with css, I saw that somehow google’s image is not showing as it should.
After some hacking I found out that bootstrap defined this (with some other properties):

img {
    max-width: 100%;

but gmaps isn’t handling that as it should.

So the answer is to override that property for your google map div (#gmap is div’s name in my project)

#gmap img {
    max-width: none;

And here is the result (the bubble is ok, with text, close button, pointer… everything :))

It looks pretty simple, but it took me some time to find it out, because my first suspect was my own code. In the end I was surprised that it wasn’t up to me :)

I hope this will help somebody :)



  1. Pingback: 2012년 4월 3일 it 기술 동향 |

  2. Hi guys, I’m having the same problem. It fixed ok for the site but for the responsible version it is not working ok

  3. Pingback: moeblog » Solucionar probema usando googlemaps con Twitter Bootstrap

  4. Awesome and does work! tanks a’bunch !
    Had alike issue: my site was ok with gmaps but after implementing bootstrap gmaps gave me a gray screen inside of the block for google maps. After adding this small css rule all worked fine. Tanks u again and again ;)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s