html - CSSスタイルがGoogleマップのズームを歪めるのはなぜですか？

Question

これが作業バージョンです

http://jsfiddle.net/tH78C/

これは、ブートストラップスタイルの壊れたバージョン（ズームウィジェットが正しく表示されなくなった）です。

http://jsfiddle.net/3sjAU/

なぜ壊れますか？

Answer 1

個々のマップに対してこれを修正することもできます。例：

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

Answer 2

Bootstrap.cssの69行目 max-width: 100%;で問題が発生しています。

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

それを削除し、必要に応じて新しいクラス.newclass {max-width:100%}を指定して画像に追加するだけです。

Answer 3

ここにリストされているものを少し変更して修正しました。

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

Answer 4

このコードをコピーするだけで、新しいクラスを指定する必要はありません

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