フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【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>

取得したコードにwidthheightが絶対値で設定されている為、スマホで表示した時に画面サイズによっては画面を貫通してしまう現象が発生します。

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を設定することでインライン指定してあるwidthheightより詳細度が増し、打ち消すことが出来ます。

まとめ

いかがでしたか?
WebサイトにGoogleマップを埋め込む場合はこの対策をして、レスポンシブ対応させておきましょう。