Google Mapsをレスポンシブ対応で画面サイズに応じてサイズを可変させる | helog - スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Google Mapsをレスポンシブ対応で画面サイズに応じてサイズを可変させる | helog - スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。 Google Mapsの埋め込みコードをそのまま設...概要を表示 レスポンシブ対応のサイトにGoogle Mapsを設置する方法です。 Google Mapsの埋め込みコードをそのまま設置すると、レスポンシブサイトの画面サイズを変更した際に、地図表示エリアが画面をはみ出したり、他のコンテンツに重なったりと、表示崩れが発生します。 そこで、以下のようにレスポンシブ対応することで崩れを回避することができます。 <div id="map_canvas"> <iframe...（埋め込みコード略）.../iframe> </div> #map_canvas{ position: relative; padding: 0 0 56%; height: 0; overflow: hidden; } #map_canvas iframe{ position: absolute; top: 0; left: 0; width: 100% !important; heig

• responsive
• レスポンシブ
• Google Maps
• css
• *Web制作
• google