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 :)
Vuk's Blog 
Pingback: 2012년 4월 3일 it 기술 동향 |
Thanks, I was noticing a similar issue with the zoom images and this fixed that as well!
Hi guys, I’m having the same problem. It fixed ok for the site but for the responsible version it is not working ok
Thanks Nik!
perfect – thanks!
Sir, you saved my day! I owe you a bear, if you happen to come to Milano (Italy), send me an email and I’ll pay my debt! :)
I was in Milano last year. But I’ll be in Udine in August :)
Anyway, I’m glad it was helpful. I was headbanging for some time before I found the solution :)
thanks!
You save my working day! :D
Awesome!
Thank you. This was very useful.
It’s not just twitter bootstrap. Other html reset style sheets cause the same distortion to google maps
See this:
https://github.com/twitter/bootstrap/issues/1552
Awesome, I didn’t see that issue :) That would help a lot when I had problems with it.
Thanks, you really saved my day.
Thanks for solution. Just had the same issue with gmap and bootsrap
Thanks, it saved my time! :)
Thank You
Thanks, i was looking for this for 2 days!
thanks dude!
Pingback: moeblog » Solucionar probema usando googlemaps con Twitter Bootstrap
Thanks!!!
Thanks!
The firefox behavior is not showing any map at all!
This fix that too!
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 ;)
Thanks, I had the same problem and this fixed it nicely.
You’re a boss
You are awesome…
Genius!
Tanks, you’re the force!!!
Thanks for the help.. got it working !! :)