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.

Zoom broken

Must be a CSS-issue, I guess some global CSS is affecting the control. — Dr.Molle, Mar 03 '12 at 18:58

score 27 · Accepted Answer · answered Mar 07 '12 at 11:16

27

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; }

answered Mar 07 '12 at 11:16

nodrog

1

Just noting that this is an issue because of bootstrap – Jason Axelson Sep 09 '13 at 21:12

score 11 · Answer 2 · answered Dec 17 '12 at 01:32

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

score 1 · Answer 3 · answered Jul 18 '12 at 13:58

1

This what I found and the solutions is simple.

answered Jul 18 '12 at 13:58

Ricardo Lima

3 Answers3