ホームページにGoogleマップを埋め込む方法！初心者向けに解説

「サロンや事務所の場所をわかりやすく伝えたい」 「ホームページに地図を載せたいけれど、やり方がわからない」

店舗をお持ちであれば、ホームページにGoogleマップは掲載されていますか。
実は、住所をテキストで載せるだけでなく、Googleマップを直接埋め込むことで、お客様の利便性は劇的に向上します。

この記事では、Webの知識がない初心者の方でも迷わずできる「Googleマップをホームページに埋め込む手順」を3ステップで解説します。集客へのメリットも併せてチェックしていきましょう！

ホームページにGoogleマップを埋め込む3つのメリット

手順の前に、なぜGoogleマップが必要なのか、その理由を知っておきましょう。

• 1. お客様が迷わなくなる：スマホで閲覧した際、そのままナビ機能へ移行できるため、来店率アップに直結します。
• 2. お店の信頼度が上がる：Googleの公式情報が表示されることで、実在する店舗・事務所としての安心感を与えられます。
• 3. SEO・MEO対策に効果的：Googleに「地域に根ざした活動をしている」と正しく認識されやすくなり、検索順位に良い影響を与える可能性があります。

【簡単3ステップ】Googleマップを埋め込む手順

それでは、具体的なやり方を解説します。特別なソフトは不要で、ブラウザだけで完結します。

1：Googleマップで場所を検索する

2：「共有」ボタンからコードを取得する

1. 左側のメニューにある「共有」アイコンをクリックします。
2. 表示されたウィンドウのタブを「リンクを送信」から「地図を埋め込む」に切り替えます。
3. 「HTMLをコピー」という青い文字をクリックします。これで準備完了です。

３：ホームページの編集画面に貼り付ける

ご自身のホームページ管理画面（WordPressやWixなど）を開き、地図を表示させたい場所に、先ほどコピーしたコードを貼り付けます。

埋め込みがうまくいかない時のチェックポイント

もし地図が表示されない場合は、以下の2点を確認してみてください。

• コードの一部が欠けていないか： <iframe …>から</iframe>まで、すべての文字をコピーできているか確認しましょう。
• 非公開設定になっていないか：Googleビジネスプロフィールの設定によっては、まれに表示が制限されることがあります。

【SWELL版】ホームページに貼り付ける具体的な手順

WordPressテーマ「SWELL」をお使いの場合、専門的なコードの知識がなくても、ブロックエディタ（Gutenberg）を使って一瞬で設置が完了します。

「SWELL」についてはこちらからご覧いただけます。
 WordPressテーマ「SWELL」

1. 投稿・固定ページ編集画面で「＋」をクリック

地図を載せたい場所で、ブロック追加ボタン（＋）をクリックします。

2. 「カスタムHTML」ブロックを選択

検索窓に「html」と入力するか、ブロック一覧から「カスタムHTML」を選択します。

SWELLの他のブロック（テキストブロックなど）に直接貼り付けると、コードがそのまま文字として表示されてしまうことがあります。必ず「カスタムHTML」ブロックを使いましょう。

3. コピーしたコードを貼り付ける

Googleマップで取得した「HTMLをコピー」のコードを、枠内にそのまま貼り付けます。

4. 「プレビュー」で確認

ブロック上部にある「プレビュー」ボタンを押すと、編集画面上で実際に地図がどう見えるか確認できます。正しく表示されていれば、そのまま保存して完了です！ イメージ画像はこちら

SWELLなら「横幅いっぱいの地図」も自由自在！

SWELLの強力な機能を使えば、デザインをもっとおしゃれにできます。

• 地図を中央寄せにしたい場合 ：「フルワイドブロック」の中に「カスタムHTML」を入れることで、画面の端から端まで地図を表示させるダイナミックなレイアウトも可能です。
• スマホでの表示を確認 ：SWELLはレスポンシブ（スマホ最適化）に強いテーマですが、埋め込んだ地図がはみ出していないか、公開前に必ずスマホ実機でもチェックしておきましょう。

 WordPressテーマ「SWELL」

まとめ

Googleマップの埋め込みは、SWELLなら「カスタムHTMLブロックに貼るだけ」という手軽さです。

住所を文字で打ち込む手間を省き、お客様が迷わずあなたのお店に辿り着けるよう、今すぐ設定してみましょう。もし操作で迷うことがあれば、beSmartのサポートまでお気軽にご相談くださいね。