Googleマップをレスポンシブで埋め込む方法【縦横比が崩れないコツ】

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

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

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

HTML

<div id="map">
	<div class="map__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>
	</div>
</div>

CSS