GoogleマップをWebに組み込む手順メモ（リンク／iframe）

たまに埋め込みたくなるMap情報。毎回パラメータを調べている気がするので備忘録です。

1. 住所リンク（ピンポイントで開く）

現在はsearch/?api=1 の形式が推奨されています。

Maps URLs | Google Maps Platform

query パラメータに住所や建物名を渡せばOKです。

<a href="https://www.google.com/maps/search/?api=1&query=東京都新宿区西新宿2丁目8-1" target="_blank" rel="noopener noreferrer">
  Googleマップで開く
</a>

<a href="https://www.google.com/maps/search/?api=1&query=東京タワー" target="_blank" rel="noopener noreferrer">
  Googleマップで開く（東京タワー）
</a>

日本語はそのままでも大抵動きますが、URLエンコードしておくと確実です。

昔の書き方
https://www.google.com/maps?q=住所 という書き方もまだ動きますが、公式ドキュメント的には上記の api=1 付きが標準のようです。

座標（緯度・経度）で指定する場合

住所が出てこない場所などは座標で。

<a href="https://www.google.com/maps/search/?api=1&query=35.6585805,139.7454329" target="_blank" rel="noopener noreferrer">
  現在地を確認
</a>

2. iframe埋め込み

APIを使わず単に埋め込むだけなら、Googleマップの共有機能から取得するのが一番早いです。

1. Googleマップで場所を検索
2. 「共有」→「地図を埋め込む」
3. HTMLをコピー

取得できるコード

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

レスポンシブ対応

デフォルトだと width="600" など固定値になっているので、スマホ対応用に 100% にしておきます。

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

src の中身（pb=...）はゴチャゴチャしているので、手動で書き換えずにGoogleマップ上で縮尺などを調整してからコピーし直すのが無難です。