【レスポンシブ対応】GoogleMapの埋め込み

GoogleマップをWebサイトに埋め込む際、レスポンシブ対応にするためには、以下の手順でCSSとHTMLを調整します。通常の埋め込みコードでは固定サイズが指定されているため、画面サイズに応じて地図が縮小・拡大するようにするためのCSSを追加します。

Googleマップの埋め込みコードを取得

まず、Googleマップから埋め込み用のコードを取得します。

1. Googleマップで表示したい場所を検索します。
2. 左上のメニュー（ハンバーガーメニュー）から「地図を共有または埋め込む」を選択。
3. 「地図を埋め込む」タブをクリックし、コードをコピーします。

<iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

レスポンシブ対応のためのCSSを追加

固定幅と高さを削除し、iframe タグに対してレスポンシブなスタイルを適用します。以下のCSSを追加してください。

.map-container {
position: relative; padding-bottom: 56.25%; /* 16:9 アスペクト比 */
height: 0; overflow: hidden;
} 
.map-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

HTMLに埋め込みコードを適用

次に、Googleマップの埋め込みコードを div タグでラップし、先ほどのCSSクラスを適用します。

<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18..." allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

埋め込み例（東京タワーの地図）