GoogleマップをWebページに埋め込む方法

アジェンダ

GoogleマップをWebページに埋め込む方法について備忘録的に簡単いまとめます。

Googleマップの埋め込みコード取得

まず、Googleマップの埋め込みたい場所を開き、次の手順でコードを取得します。

1. Googleマップを開き、目的の場所を検索
2. 画面左上の「共有」ボタンをクリック
3. 「地図を埋め込む」タブを選択
4. 「HTMLをコピー」をクリックしてコードを取得

このコードは <iframe> タグで提供されます。例えば、次のようなコードになります：

<iframe 
  src="https://www.google.com/maps/embed?pb=..." 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy" 
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

あとはこのタグをHTMLファイルに貼り付けるだけで完了です。

参考

• 【CSS】Googleマップの埋め込み方法とレスポンシブについて解説 | ZeroPlus Media