グーグル マップを埋め込む

この記事では、グーグル マップをレスポンシブに埋め込む方法について説明します。

見本

HTML コードを取得する

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.312150799069!2d139.767125!3d35.681236!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722440131981!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

サイズをしている場所を削除します。この場合、width="600" と height="450" を削除します。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.312118305756!2d139.7671248!3d35.6812362!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722128570072!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

次に <div class="google-map"> と </div> で囲みます。

<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.312118305756!2d139.7671248!3d35.6812362!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722128570072!5m2!1sja!2sjp" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

カスタム HTML ブロックを使って埋め込みます。

CSS を定義する

以下のカスタム CSS をワードプレスに追加します。

/* グーグル マップ */

.google-map {
	position: relative;
	width: 100%;
	height: 0%;
	padding-top: 75%;
}
 
/* グーグル マップの iframe */
.google-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	outline: 1px solid #333333;
}

地図のアスペクト比は、7 行目の padding-top: 75%; の値で調整します。