Why does CSS styling distort my Google maps zooming?

Question

Here is a working version

Here is a broken version (Zooming widget is no longer properly displayed) with Bootstrap styling

Why does it break?

wtds · Accepted Answer · 2013-03-27 13:03:04Z

11

You can also fix this for individual maps e.g.:

.googleMapContainer img { max-width: none !important; }

answered Mar 27, 2013 at 13:03

1111 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

This is a much more portable answer, particularly when you don't have control over the bootstrap source (like using a CDN).

This is more elegant than fiddling with the bootstrap CSS.

luke2012 · Accepted Answer · 2012-05-02 04:53:07Z

In the Bootstrap.css line 69 max-width: 100%; is causing the issue.

img { max-width: 100%; <-- vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

You can remove it and if needed again just specify a new class .newclass {max-width:100%} and add it to the image.

dibs · Accepted Answer · 2014-11-30 22:22:30Z

I fixed it with a slight variation on what was listed here.

.gm-style img { max-width: none; }

Dasun · Accepted Answer · 2015-06-10 18:50:53Z

No need to specify a new class just copy this code

.angular-google-map img { max-width: none !important; }