Webサイトにアクセス情報として地図を表示させたい時は、Googleマップを利用すると簡単に実装することができます。
今回、サイトにGoogleマップを埋め込み、且つレスポンシブ対応させる方法について解説します。

WebサイトにGoogleマップを埋め込む方法

こちらがWebサイトにGoogleマップを埋め込む流れになります。

  • Googleマップにアクセス
  • 住所を検索し、候補に表示された住所をクリック
  • 共有ボタンをクリック
  • 「地図を埋め込む」タブをクリックしHTMLをコピー
  • HTMLファイルの該当箇所に貼り付け

Googleマップにアクセス

まず、下記リンクからGoogle mapsにアクセスし、必要であればログインをします。

Google maps

住所を検索し、候補に表示された住所をクリック

画面左上の検索ボックスで住所を検索し、候補に表示された住所をします。

Image from Gyazo

共有ボタンをクリック

住所の詳細タブが開かれるので、画像の右下部分にある「共有マーク」をクリックします。

Image from Gyazo

「地図を埋め込む」タブをクリックしHTMLをコピー

「地図を埋め込む」タブをクリックして、青字の「HTMLをコピー」をクリックします。

Image from Gyazo

HTMLファイルの該当箇所に貼り付け

コピしたHTMLコードをHTMLファイルの該当箇所に貼り付ければ、Googleマップが表示されます。

埋め込んだGoogleマップをレスポンシブ対応させる

Googleマップを埋め込んだ後はレスポンシブ対応を行いましょう。
下記の流れでサイズ調整を行います。

  • iframeタグにデフォルトで記述されているwidthとheightの指定を削除
  • CSSでサイズ調整

iframeタグのwidthとheightを削除

下記iframeタグ内のwidthとheight指定を削除します。
サイズの調整はCSSで行います。

<iframe 
  src="(GoogleマップのURLが入ります。)" 
  width="600" //こちらのwidth指定を削除。
  height="450" //こちらのheight指定を削除。
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

CSS

iframe {
  width: 100%;
  aspect-ratio: 16/9; //アスペクト比(縦横比)を指定
}

Googleマップを埋め込む場合、基本的にアスペクト比(縦横比)を維持した状態で表示するのが一般的かと思います。
上記のコードを記述するだけで、どの画面幅であってもアスペクト比を保ったまま表示することができます。

Image from Gyazo

padding-topを使う方法もありますが、aspect-ratioの方が非常にシンプル且つコード量を削減できるので、aspect-ratioの利用をおすすめします。

まとめ

以上、サイトにGoogleマップを埋め込み、レスポンシブ対応させる方法について解説しました。
Googleマップを埋め込む機会は多いと思いますので、レスポンシブ対応まで効率的に実装できるようにしましょう!

参考
aspect-ratio – CSS