Google mapの埋め込み

テキスト目次 > HTMLとCSSの応用 > Google mapの埋め込み

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

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

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

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

Googleマップにアクセス

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

Google maps

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

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

共有ボタンをクリック

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

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

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

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>

HTML

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

CSS

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

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

チェックテスト

チェックテストを確認する

東京スカイツリーの地図を埋め込みコードをdiscordにて共有ください。

目次