【2024年版】Webサイトに埋め込んだGoogleマップをレスポンシブ対応させる方法
Googleマップ
レスポンシブ対応
埋め込み
Googleマップで取得したiframe
形式の埋め込みコードの場合、そのままだとレスポンシブ対応していません。
しかし、今はスマホでWebサイトを閲覧することが主流なので出来ればレスポンシブ対応させ、スマホでの表示を最適化させたいですよね。
この記事ではWebサイトに埋め込んだGoogleマップをレスポンシブ対応させる方法をご紹介したいと思います。
この記事の目次を表示
Webサイトに埋め込んだGoogleマップをレスポンシブ対応させる
まずはGoogleマップの埋め込みコードを取得します。
詳しい取得方法は以下の記事でご紹介しています。
取得した埋め込みコードをHTMLに貼り付けると以下のようになっています。
<iframe src="マップのURL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
取得したコードにwidth
とheight
が絶対値で設定されている為、スマホで表示した時に画面サイズによっては画面を貫通してしまう現象が発生します。
Webサイトに埋め込んだGoogleマップをレスポンシブ対応させる場合は、以下のCSSを記述します。
iframe {
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
常に横サイズを全画面表示させたい場合は以下のCSSを記述します。
iframe {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
!important
を設定することでインライン指定してあるwidth
とheight
より詳細度が増し、打ち消すことが出来ます。
まとめ
いかがでしたか?
WebサイトにGoogleマップを埋め込む場合はこの対策をして、レスポンシブ対応させておきましょう。