google maps api で表示した地図はレスポンシブデザインだと崩れがち。


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

Follow me!


google maps api で表示した地図はレスポンシブデザインだと崩れがち。” に対して 8 件のコメントがあります

  1. Yuki より:

    同様の症状で検索したらここにたどり着きました。

    #map img {
    max-width: none !important;
    }

    このコードを書けば解決する?ということはわかったのですが、具体的にどこに書き込めば良いのでしょうか?
    cssのファイルを見てもよくわからなかったので、headerの方かな?とも思ったのですが…。よろしければ教えて頂きたいです。

  2. admin より:

    <head></head>の中に

    <style type=”text/css”>
    #map img {
    max-width: none !important;
    }
    </style>

    を書けばOKのハズっす!

  3. Makoto より:

    いや~助かりました!
    ありがとうございます!
    発見されるのにさぞ大変だったでしょうね、
    本当に感謝します!

  4. admin より:

    やっぱりこれ、みんなハマりますよね~
    お役に立てて光栄です!

  5. musk より:

    まさにこれで悩んでいました!
    この方法であっさり解決!
    ありがとうございます!

  6. admin より:

    いやっほー
    お役に立てて嬉しいです!

  7. kyoto より:

    ありがとうございました!助かりました(泣)

コメントを残す

メールアドレスが公開されることはありません。