Bootstrap + Google Mapsで画像が表示されない不具合

みんな大好きBootstrap.当然使ってますよね?

今回そんなBootstrapが原因でGoogle Maps APIの地図描画がうまくいかず,地図が表示されない不具合に見舞われたので報告です.

具体的にはFirefoxだと以下みたいな表示になります.

なんというか,中途半端にロゴなどは表示されるけど,肝心な地図画像が表示されないという状態です.

ちなみに,Chromeだと一応表示されます.

ですが,よく見るとズーム部分のスライダーつまみが表示されていなかったりしてやっぱりちょっとおかしいです.

この問題に今日はハマっていたのですが,babaさんが原因を突き止めてくれました!
具体的には,bootstrap.cssの中で

img {
  max-width: 100%;
  /* ... */
}

という部分があり,imgタグのmax-widthを100%に指定しているのですが,これが犯人でした.
Google Maps APIの描画するdivタグは,サイズ0 * 0pxのdivタグを入れ子にして詰んでいるのですが,恐らくここでimgのmax-widthが指定されていると,その大きさに引っ張られて0 * 0pxの領域に地図画像を描画してしまうのではないかと思います.

後になって調べてみると,ちゃんとbootstrapのIssueにも上がっていました.
https://github.com/twitter/bootstrap/issues/1552

でも,結局対策はGoogle Mapsの表示対象となるdivタグに対して,

#map img {
  max-width: none;
  /* ... */
}

的にmax-widthを上書きしてやるというものでした.むーん.
これはGoogle Maps API側が対応してくれると言うのが素直な解決策な気がしますね.bootstrap以外のCSSフレームワークでも同じようなことが起こり得ますし.

というわけで,同じような状況にハマった人はこの辺を疑ってみると良いかと思います.Bootstrapが犯人という所に気づくまでが時間がかかってしまいました.

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

morimorihoge

高校卒業後,学生をやりながらずっとWebアプリ開発に携わってきました.2010くらいまではPHP/Symfonyプログラマでしたが,それ以降のWeb開発はRailsほぼ一本に宗旨替えしました.開発とは別にサーバ構築・運用も10年以上やってきているので,要件定義から設計・実装・環境構築・運用まで一通り何でもこなせます.開発以外では季節により大学でWebサービス開発やプログラミング関連の非常勤講師もしており,技術の啓蒙・教育にも積極的に関わっています.最近はPM的な仕事が増えていますが,現役開発者としていつでも動ける程度にはコードもサーバも弄る日々を送っています.AWS 認定ソリューションアーキテクト – アソシエイトレベル取りました

morimorihogeの書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ