レスポンシブ対応

HTMLソース

<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;
}