Why does CSS styling distort my Google maps zooming?

Question

Here is a working version

http://jsfiddle.net/tH78C/

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

http://jsfiddle.net/3sjAU/

Why does it break?

Answer 1

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

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

Answer 2

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.