Zoom bar disfigured in Google-Maps-for-Rails (gmaps4rails)

Question

For some reason my zoom bar is all pixelated and I'm not sure why. Any ideas? I used the basic setup:

Controller: @json = User.all.to_gmaps4rails
View: <%= gmaps4rails(@json) %>

I'm not passing any special parameters or anything. The markers that I have on my models show up beautifully.

Answer 1

Add this to your css... there you will also have an issue with the terrain and overlays dropdowns...

#mapCanvas label { width: auto; display:inline; }
#mapCanvas img { max-width: none; }

Answer 2

With the gmaps4rails 1.5.6, use map instead of mapCanvas, i.e.,

#map label { width: auto; display:inline; }
#map img { max-width: none; }

Reference:

Github: twitter/bootstrap issue list - Bootstrap distorts some Google Maps Controls and Overlays - commented by diogocsc
https://github.com/twitter/bootstrap/issues/1552#issuecomment-11153057

Answer 3

This what I found and the solutions is simple.

https://github.com/twitter/bootstrap/issues/1552