GoogleMapをレスポンシブサイトに埋め込む方法

GoogleMapをレスポンシブサイトに埋め込む方法に悩んでいましたが、ついに見つけました。

今までは、画像については、Media Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける単純な方法ででサイズ変更に対応していました。

GoogleMapについては、最初のレンダリング時に、勝手に地図が表示幅に収まってくれるので、気にもしていなかったのですが、別のサイトの構築案件で、レスポンシブサイトに対応せざるを得なくて困っていました。

関連エントリー

そこで、GoogleMapの地図をレスポンシブサイトに埋め込む方法

コピペOKということなのでソースも書いておきます。

HTML

<div class="ggmap">iframeのコピーしたコード</div>

CSS

.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}