MENU

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

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

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

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

Twitter Bootstrap側のCSSのimgに、
[php]max-width:100%;[/php] と記述されていたのが問題です。

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

[php]max-width:none;[/php]

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

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

WordPress Love! 休日はほぼWordPress仲間と一緒に勉強会や写真を撮りに行っています。現在育児中のため、オフが多いです(>△<<<)

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次