レスポンシブ対応サイトに[Google Maps]を埋め込んだときに表示が崩れるときの解決策。

Ads by Google

ウェブサイトに Google Maps API を埋め込んだとき、稀にコントローラーのUIが崩れるなどの怪奇現象が起こることがあります。

実はコレ、単にスタイルシートの設定が原因です。

レスポンシブ対応のサイトを構築するとき、画像の大きさをウィンドウサイズに合わせて調整するために、以下のようなスタイルを使うことがあるかと思います。

img {
max-width:100%;
height:auto;
}

ポイントとなるのは max-width:100%; の箇所。

このスタイルが[Google Maps]のUIを司る画像にも継承されてしまうため、デザインが崩れる原因になるワケです。

そこで[Google Maps]の表示対象となるボックス要素内の img タグに対して max-width:none; を指定するようにしましょう。

#googlemaps img {
max-width:none;
height:auto;
}

このように max-width:none; と上書きすれば解決です。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google