Googleマップをサイトに埋め込む基本手順

このページでは、Googleマップから埋め込みコード（iframe）を取得し、TemplyのHTMLに貼り付けてお店の地図を表示するまでの流れを解説します。

APIキーや難しいJavaScriptは使わず、「共有」→「地図を埋め込む」だけでできる方法にしぼっています。

このページの対象とゴール
Googleマップ埋め込みの流れ（全体像）
STEP1：Googleマップでお店の場所を開く
STEP2：「共有」から埋め込みコード（iframe）を取得する
1. 埋め込みコードの取り出し方
STEP3：TemplyのHTMLに埋め込みコードを貼り付ける
1. どのファイルに貼ればいい？
STEP4：ブラウザで表示を確認する
よくある調整ポイント
1. 高さ（height）の調整
2. 地図を複数箇所に表示したい場合
次のステップ：Googleマップ周りを整える

このページの対象とゴール

このページは、次のような方を想定しています。

実店舗（飲食店・サロン・教室など）を運営しており、サイトに地図を表示したい
Temply Restaurant など、静的HTMLテンプレートを使っている
まずは「1か所に地図を出すだけ」で十分という状況

読み終わるころには、Googleマップでお店の場所を検索 → 埋め込みコードを取得 → TemplyのHTMLに貼り付けという一連の流れがイメージできるようになります。

ポイント：最初は「1ページ1つの地図」が基本

トップページ・アクセスページ・フッターなど、あちこちに地図を出すとページが重くなります。まずは 「アクセス・店舗情報」ページに1つだけ表示するところから始めるのがおすすめです。

Googleマップ埋め込みの流れ（全体像）

大まかな流れは次のとおりです。

ブラウザで Googleマップ を開く
お店の名前や住所で地図を検索し、ピンを表示する
共有 → 地図を埋め込む から iframeコードをコピーする
TemplyのHTMLファイル内、地図を表示したい位置に iframeコードを貼り付ける
ブラウザでサイトを開き、地図が表示されるか確認する

ポイント：レスポンシブ対応・軽量化は別ページで

このページではまず「埋め込んで表示する」ことに集中します。スマホでの見え方や読み込み速度の改善は、以下のガイドで詳しく解説します。

STEP1：Googleマップでお店の場所を開く

まずはブラウザで Googleマップ を開きます。

検索ボックスに店舗名や住所を入力して検索
正しいお店（または住所）が表示されているか確認
ピンの位置がずれている場合は、住所を微調整して再検索するのも有効です

ポイント：ビジネスプロフィールを整えておくと楽

すでに Googleビジネスプロフィールを登録している場合、店名で検索したときに正しい情報が出やすくなります。

STEP2：「共有」から埋め込みコード（iframe）を取得する

地図上に表示されたお店の情報パネルから、埋め込みコードを取得します。

店名をクリックして情報パネルを表示できたら、次は埋め込み用のHTMLコードを取得します。

埋め込みコードの取り出し方

地図上に表示された お店の名前（またはピン）をクリック します → 右側または左側に「情報パネル」が開きます。
情報パネルの中にある 「共有」ボタン をクリックします。
表示されたダイアログで 「地図を埋め込む」タブ を選びます。
サイズのプルダウンがあれば、とりあえず「中」や「小」などを選択しておきます。
下に表示されている <iframe …></iframe> のコードを 「HTML をコピー」 ボタンでコピーします。

ポイント：店名 or ピンをクリックするとパネルが開く

Googleマップでは、地図上の店名または 赤いピン をクリックすると、「情報パネル」が開き、そこに 共有 → 地図を埋め込む の入口があります。まずは必ずこのパネルを表示させてください。

コピーされたコードは、例として次のような形になっています。

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

ポイント：コピーしたコードはそのまま使ってOK

Templyでは、この iframeコードをそのまま HTML に貼り付けて使用します。レスポンシブ対応を行う場合は、後で Googleマップをレスポンシブ対応したいを見ながら調整していきます。

STEP3：TemplyのHTMLに埋め込みコードを貼り付ける

次に、TemplyのHTMLファイルをテキストエディタで開き、地図を表示したい位置に先ほどコピーした iframeコードを貼り付けます。

どのファイルに貼ればいい？

アクセスページがある場合：access.html や contact.html のようなページ
1ページ完結型テンプレートの場合：トップページ内の「アクセス情報」セクション

例として、「アクセス」セクション内に地図を入れるイメージです。

<section class="access">
  <h2 class="section-title">アクセス</h2>
  <p>○○駅から徒歩3分、△△通り沿いです。</p>

  <div class="access-map">
    <!-- Googleマップ埋め込みコード（iframe）をここに貼り付け -->
    <iframe
      src="https://www.google.com/maps/map/embed?pb=..."
      width="600"
      height="450"
      style="border:0;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
  </div>
</section>

ポイント：クラス名はあとでレスポンシブ対応にも使える

access-map のようなラッパー要素を作っておくと、後からレスポンシブ対応する際に CSS を当てやすくなります。