2015.09.30

GoogleMapをレスポンシブ対応させる

マップの埋め込みで取得したiframeタグを、任意のタグで囲み（例として <div class=”google-map-wrap”>）、
以下のCSSを適応します。

.google-map-wrap {
	position: relative;
	padding-bottom: 300px;
	height: 0;
	overflow: hidden;
}
 
.google-map-wrap iframe,
.google-map-wrap object,
.google-map-wrap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

参考：http://inthecom.net/?p=718

.google-map-wrapに付けられた「padding-bottom」でマップの高さを指定できます。
ここに%の値を入力すると、横幅に対しての割合で高さが可変となります。

PCサイトではpxで、スマホサイトでは%で指定するのが良いかと。