Googleマップをレスポンシブで埋め込む方法

レスポンシブの場合、要素のサイズを固定しづらくなるので、必然的にパーセント(%)で指定する機会が多くなります。

しかし、Googleマップ埋め込みコードの高さ(height)をパーセント指定してもうまくいきません。

ということで今回は、その辺りも踏まえてGoogleマップをレスポンシブで埋め込む方法についてご紹介します。

HTML

<div id="map">
	<div class="inner">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.4214831106597!2d135.19308891508297!3d34.69454768043609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60008ee30bce2a33%3A0x8cb7f9fbf6ec8469!2zSlLkuInjg47lrq7pp4U!5e0!3m2!1sja!2s!4v1569577956378!5m2!1sja!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
	<!-- .inner -->
	</div>
<!-- #map -->
</div>

CSS

#map {
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
}

#map .inner {
	position: relative;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
}

#map .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 960px) {

	#map .inner {
		padding-top: 75%;
	}

}

@media (max-width: 600px) {

	#map .inner {
		padding-top: 100%;
	}

}

ポイントは、

マップの埋め込みコードを囲う要素(div.inner)を相対配置(relative)にしてheightを0に
div.innerのpadding-top(padding-bottomでも可)でマップの高さをパーセント指定
マップの埋め込みコードを絶対配置(absolute)して幅・高さともに100%指定

の3つです。

heightではなくpaddingで要素の高さを確保しています。

Googleマップを埋め込む際にheightではなくpaddingを使う理由

例外もありますが、親要素の高さがハッキリしない場合(＝パーセントで指定している場合)、子要素のheightにパーセントを指定しても機能しません。

子要素からすると、高さの基準がハッキリしないためです。

この場合、パーセントで指定された値の代わりにautoが入り、子要素内の要素(この場合はiframe)の高さを基準にして高さが決まります。

しかしそうなると、多くの場合に意図通りのサイズで表示することが難しくなります。

そのためこういうケースでは、heightではなくpaddingを利用します。

paddingで縦方向の値(topまたはbottom)を指定すると、その値は親要素の幅(width)を基準に取得されるため、高さが可変の要素にも高さを持たせることが可能になるわけです。

Googleマップの埋め込みコードを二重に囲んでおくと調整しやすい

これはちょっとしたコツみたいなものですが、Googleマップで取得できる埋め込みコード(iframe)を、divなどの要素で二重に囲んでおくとサイズの調整がしやすいです（上で紹介したソースも#mapというdivと.innerというdivで囲んでいます）。

上でも言ったように、paddingをパーセント指定した場合、その基準は親要素の幅になります。

マップを全幅で表示するのであればあまり問題ないですが、そうでない場合には縦横比が崩れてしまいます。

しかし、直接の親要素の上にもう一つ要素を用意して、そちらで幅(width)を調整するようにすると、横幅を変更したときにイチイチpaddingの値を変更しなくてもよくなります。

上で紹介したソースコードの場合、#mapでwidthを変更しても.innerでpaddingの値が指定されているので縦横比が保持される、という感じです。

まとめ

正直、Youtubeの埋め込みに比べてアスペクト比にシビアになる必要はあまりないかもしれませんが、融通が利くのでこの方法がおすすめです。

JOURNAL クリエイティブとマーケティングの話

Googleマップをレスポンシブで埋め込む方法