この記事では、グーグル マップをレスポンシブに埋め込む方法について説明します。
見本
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%;
の値で調整します。