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 http://maps.gstatic.com/mapfiles/iw3.png 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 :)