• このエントリーをはてなブックマークに追加

wordpressに自製のプラグインを作成して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

  • このエントリーをはてなブックマークに追加