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

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

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

関連エントリー

• CSSでMovable Typeをスマートフォンに対応させる その4 "画像の表示サイズ"

そこで、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%;
}