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;
	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;」などのスタイルが効いている