HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

レスポンシブ対応のサイトに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;
	height: 100% !important;
}

レスポンシブなので、サイズを横幅100%に対しての縦幅を「padding-bottom: 56%;」の割合で指定しています。
ここでは16:9のサイズを想定して9/16≒0.56で計算しています。

以下は、実際に貼り付けた例です。

ちなみにJavaScript APIで設置する場合、iframeにあたるタグには「position: absolute;」などのスタイルが効いているため、以下のようにするだけでレスポンシブ対応が可能です。

(APIを呼び出すJavaScriptコード略)
	var map = new google.maps.Map(document.getElementById("map_canvas"),
#map_canvas{
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

※「#map_canvas」直下のタグに「position: absolute;」などのスタイルが効いている

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

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search