Why does CSS styling distort my Google maps zooming?

css, google-maps, html, twitter-bootstrap

Solution

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.

Problem

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?

Original source