Googleマップ読み込み・サイズ調整の方法

はじめに

学んだことを忘れないように備忘録として残しています

Googleマップの埋め込みサイズ調整は直接読み込む際に指定ができますが、CSSで後から調整する方法も便利なので本記事ではその方法をご紹介します。

CSSでのサイズ調整の方法

1.埋め込みタグのwidthやheightを100%に設定します

.map-container iframe {
   width: 100%;
   height: 100%;
}

2.親要素.map-containerのサイズをCSSで調整します

<div class="map-container">
   <iframe src="マップのURL" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

.map-container {
   width: 300px; /* 好みの幅 */
   height: 200px; /* 好みの高さ */
}

このようにすれば、レスポンシブ対応も行いやすくなります。

まとめ

Googleマップの埋め込みは、CSSで親要素に合わせてサイズを調整することで、簡単にレスポンシブ対応が可能です。シンプルな方法でデザインに合わせた表示を実現してみてください。