【保存版】Googleマイマップを作成してWebサイトに埋め込む方法|編集権限を共有して先方でも更新できるようにする手順

Googleマイマップを活用すると、店舗一覧やイベント会場、支店所在地などを自分で作成し、簡単にWebサイトへ埋め込むことができます。

しかも、編集権限を共有すれば先方(クライアント)側で地図情報を自由に更新できるため、制作会社にとっても運用コストを下げられる非常に便利な仕組みです。

この記事では、Googleマイマップの作成〜共有〜埋め込みまでを、初心者でも迷わず進められるようにステップごとに解説します。


■ Googleマイマップとは?

Googleマイマップ(Google My Maps)は、Googleマップをベースに自分専用の地図を作成できる無料ツールです。

複数のピン、線、ルート、エリアをレイヤーごとに整理でき、店舗一覧・アクセスマップ・観光地紹介などに活用されています。

作成したマップはGoogleドライブに保存され、埋め込み用のiframeコードを発行してWebサイトに簡単に貼り付け可能です。


■ 手順1:マイマップを作成する

  1. ブラウザで https://www.google.com/maps/d/ にアクセス
  2. Googleアカウントにログインし、「新しい地図を作成」をクリック
  3. 左上で「無題の地図」をクリックし、地図のタイトルと説明を入力
  4. 必要に応じてレイヤーを作成(例:店舗一覧・駐車場・イベント会場)
  5. ピンを追加したい場所を検索 → 「地図に追加」をクリック
  6. すべて登録できたら自動保存されます(ドライブ内に保存)

💡 ポイント

CSVやスプレッドシートを読み込んでピンを一括登録することも可能です。店舗が多い場合はCSV方式がおすすめです。


■ 手順2:編集権限を先方に付与する

作成者(あなた)が地図を作ったあと、先方(クライアント)が自分で編集できるようにするには「共有設定」を行います。

方法①:マイマップ画面から共有

  1. 左パネル上部の [共有]アイコン(人+) をクリック
  2. 編集を許可したい相手のGoogleアカウント(メールアドレス)を入力
  3. 権限を「編集者(Can edit)」に変更
  4. 「送信」をクリック

相手が受信した招待メールを開けば、あなたの作成したマップをそのまま編集できます。

方法②:Googleドライブ経由で共有

  1. Googleドライブを開く
  2. マイマップのファイルを右クリック → 「共有」
  3. メールアドレスを入力 → 「編集者」に設定 → 送信

ドライブ経由でも同じ結果になります。

💡 注意点

相手の組織がGoogle Workspaceを利用している場合、外部共有が制限されているケースがあります。

その際は先方の管理者に「外部共有を許可」してもらう必要があります。


■ 手順3:マップをWebサイトに埋め込む

1. 埋め込み用コードを取得

  1. マイマップ画面の左上「⋮(三点メニュー)」をクリック
  2. サイトに埋め込む」を選択
  3. 表示された <iframe> コードをコピー

⚠️ 埋め込みメニューが表示されない場合

→ 共有設定で「リンクを知っている全員が閲覧可」以上に変更してください。

2. iframeをWebサイトに貼り付け

HTMLやWordPressで以下のように貼り付けます。

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe
    src="https://www.google.com/maps/d/embed?mid=xxxxxxxxxxxxxxxx"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen
  ></iframe>
</div>

このコードはレスポンシブ対応(スマホ・PCどちらでも表示OK)です。


■ 手順4:埋め込み後の更新と反映

Googleマイマップはリアルタイムで反映されます。

つまり、一度iframeを貼り付けたら、先方がピンを追加・削除しても埋め込み地図が自動的に更新されます。再発行は不要です。


■ よくあるトラブルと解決法

症状原因対処法
埋め込みメニューが出ない共有設定が「制限付き」「リンクを知っている全員が閲覧可」に変更
地図が真っ白になる組織アカウント制限やCSP設定公開設定を確認、別ブラウザでテスト
先方が編集できないメールアドレスの間違い招待メールを再送
埋め込み位置がズレている初期位置が保存時のまま表示位置・ズームを調整して再保存

■ 応用:先方への運用引き継ぎ方法

制作後に先方へ運用を移す場合は、以下の2パターンがあります。

  1. あなたが作成 → 先方を「編集者」に設定(おすすめ) → あなたも引き続き管理できる
  2. 先方に「コピーを作成」してもらう → 新しいコピーの所有者は先方になる(完全引き渡し)

■ まとめ:マイマップ共有で運用コストを下げる

Googleマイマップを使えば、Webサイトに動的な地図を設置しつつ、更新はクライアント自身で行える体制が簡単に作れます。

WordPressとの相性も良く、iframe1つで即反映される点が最大の魅力です。

制作側は「埋め込み+共有設定」までをサポートし、その後は先方が自走できるようにすれば、更新対応の負担を大幅に減らせます。

(Visited 2 times, 2 visits today)