Twitter BootstrapとGoogle Maps API v3でMap内の画像がバグる

Sponsored Link

Twitter BootstrapとGoogle Maps apiを同時に使用すると、

Twitter Bootstrap側のCSSの影響を受けて、
Google Mapsの表示内のアイコンが細長くなったり、
小さくなったり、
表示されないという問題が発生しました。

Sponsored Link


サイトを作成する上で、
ちょくちょくBootstrapの影響でおかしい所があったので、
まずBootstrap側を確認したところ、
やっぱり…という感じでした(;´∀`)

Twitter Bootstrap側のCSSのimgに、

max-width:100%;

と記述されていたのが問題です。

Google Mapsを表示するimgのidかclassに、

max-width:none;

とオーバーライドすると、
画像が正常に表示されるようになりますヽ(=´▽`=)ノ

Sponsored Link