CODEWITHSUNDEEP
htmlcssgoogle-mapstwitter-bootstrap
Hoa
Hoa

Reputation: 20438

Why does CSS styling distort my Google maps zooming?

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?

Upvotes: 5

Views: 3907

Answers (4)

Dasun
Dasun

Reputation: 3294

No need to specify a new class just copy this code

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

Upvotes: 0

dibs
dibs

Reputation: 1077

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

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

Upvotes: 0

wtds
wtds

Reputation: 111

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

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

Upvotes: 11

luke2012
luke2012

Reputation: 1734

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.

Upvotes: 4

Related Questions