google maps api で表示した地図はレスポンシブデザインだと崩れがち。
adminwordpressに自製のプラグインを作成してgoogle maps api で地図を表示したら、表示が崩れてハマった。何とか解消したのでメモ。
起きた現象はこんな感じだ。左端のコントロールが変なのと、地図に縦線が入ってしまっている。
かなりハマった。どんな文字列で検索すりゃ良いのかわからなかったから。
「google maps api コントロール 変」
「google maps api 縦線が入る」
「google maps api 崩れる」
とかで検索したけど良い情報にはありつけず。
で、このときに使っていたwordpressのテーマがレスポンシブデザインだったので、それ系の文字列で検索したらソレっぽいのが見つかった。下記のようなcssを書いてみろという。google mapを、「#map」のidのdivで表示している場合の書き方だ。
<style type="text/css">
#map img {
max-width: none !important;
}
</style>
レスポンシブデザインではimgのmax-widthをいじってることが多い（ってか必ずか？）と思うが、これがgoogle maps apiに悪さをするらしい。なので、#mapの中のimgにはソレを効かないようにするのだ。これで解決できました。先人の方々ありがとうございます。
結構深くハマったが、脱出できてよかった。
あ、あとcssフレームワークとして名高いtwitter bootstrapもレスポンシブなので、それではまる人もいるかな？この記事がお役に立ちますように。
---2012.10.06追記
検索に引っかかりやすいように、wordpressテーマで、レスポンシブで、著名なものを書いておきます。試してないけど、おそらく同じ現象が出るはず。
Origin
Catch Box
Yoko
iFeature
Coaster
Debut
Mantra
Responsive
BizVektor
---
同様の症状で検索したらここにたどり着きました。
#map img {
max-width: none !important;
}
このコードを書けば解決する？ということはわかったのですが、具体的にどこに書き込めば良いのでしょうか？
cssのファイルを見てもよくわからなかったので、headerの方かな？とも思ったのですが…。よろしければ教えて頂きたいです。
<head></head>の中に
<style type=”text/css”>
#map img {
max-width: none !important;
}
</style>
を書けばOKのハズっす！
いや～助かりました！
ありがとうございます！
発見されるのにさぞ大変だったでしょうね、
本当に感謝します！
やっぱりこれ、みんなハマりますよね～
お役に立てて光栄です！
まさにこれで悩んでいました！
この方法であっさり解決！
ありがとうございます！
いやっほー
お役に立てて嬉しいです！
ありがとうございました！助かりました（泣）