店舗サイトやアクセスページに地図を載せるとき、Google マップをそのままスクショして <img> で置いている例を見かけることがある。見た目は自由に編集できて楽だが、帰属表示（Google ロゴや Map data ©…）を切り取った状態になりやすく、規約上かなり危ない。
よしあきは、店舗サイトなどで地図スクショを見かけたとき、提案に備えて iframe 埋め込みを代替案として調べた。Place 埋め込みと My Maps の違いを整理し、静的サイト用テンプレートのデモでは Google が出す埋め込みコードをそのまま貼る形だけを確認した。
スクショ <img> がアウトになりやすい理由
Google の Geo Guidelines では、地図コンテンツ利用時に Google（およびデータ提供者）への帰属が必須で、削除・隠蔽・切り抜きは禁止とされている。例外申請も認めない、と明記されている。
よくある NG パターンは次のとおり。
- マップ画面をキャプチャし、下部の Google ロゴや著作表示を 切り取る
- その上に独自ピン・店舗ロゴ・「集合場所」ラベルを重ねる
注釈（ピン・ラベル）自体は許可されている。リストのとおり、問題の中心は 帰属の切り取りである。載せ方は冒頭のとおりスクショの <img> ではなく iframe 埋め込みが無難で、帰属が残ったスクショ <img> も公式の embed や Maps Platform と同様、推奨ルートではない。
商用サイトで地図を組み込む場合は、Google Maps Platform や公式の embed が想定ルートである。日常の受託サイトで手早く済ませるなら、共有 → 地図を埋め込む または My Maps → 自分のサイトに埋め込む が現実的だ。
手段の選び方
| 要件 | よしあきの選択 |
|---|---|
| 1地点（店舗のみ） | Google マップ Place 埋め込み |
| 2地点以上（店舗＋集合場所など） | My Maps → iframe |
| A→B の道順 | ルート共有 → 埋め込み |
「店舗」と「集合場所」の2ピンがあるなら、My Maps で地図を作って iframe がいちばん手早い。
Place 埋め込み（1地点）
手順は単純だ。
- Google マップ で地点を開く
- 共有 → 地図を埋め込む で表示された
<iframe>をコピー - アクセスページの HTML / EJS にそのまま貼る
デモ用地点としてよしあきは 東京タワー を使った（案件固有の地名をテンプレに残さないため）。Place 埋め込みのデモ では、共有画面の <iframe> をそのまま貼っている。title や loading="lazy" が無ければ、案件用に足す。
My Maps 埋め込み（複数ピン）
- Google My Maps で地図を作成し、ピンを追加
- 共有 → リンクを知っている全員（非公開のままだと embed が真っ白になりやすい）
- タイトル横メニュー 自分のサイトに埋め込む で表示された
<iframe>をコピーし、HTML / EJS に貼る
埋め込み URL は次の形になる。
https://www.google.com/maps/d/embed?mid=【My Maps の mid】編集 URL の mid= 以降がそのまま src に入る。My Maps 埋め込みのデモ でも Place と同様、コードを貼るだけにしている（site.config.js で URL を組み立てたり、専用コンポーネントに渡したりはしない）。
iframe 上部のグレー帯について
My Maps を embed すると、地図の上に 地図タイトル と 作成者名（Google アカウント表示名） が出る。これはページの <h1> とは別物で、My Maps の地図名と作成者アカウントがそのまま出ている。
- タイトルを短くしたい → My Maps 側で地図名を編集
- 作成者名を消したい → 公式の非表示オプションはない
個人名を出したくない案件では、店舗用 Google アカウントで My Maps を作るか、Place 1地点 embed に寄せるのが現実的だ。CSS で帯ごと切り取る方法も技術的にはあるが、帰属や共有 UI の扱いが曖昧になるのでそのまま残した。
まとめ
- Google マップのスクショ
<img>は、帰属削除と組み合わさると規約違反リスクが高い - 1地点なら Place、複数ピンなら My Maps — どちらも 共有画面の
<iframe>をそのまま貼る - テンプレのデモは 貼るだけに絞り、案件では
src差し替えと必要ならラッパー CSS を足す
地図は「画像1枚」ではなく 外部サービスの embed として扱う。見た目の自由度は少し落ちるが、クライアントサイトとしてはこちらが安全だ。