WordPressでGoogleマップを埋め込む方法！おすすめプラグインも紹介

WordPressサイトにGoogleマップを埋め込むことは、ユーザーに地理的情報を提供し、ビジネスの信頼性を向上させる最適な方法です。この記事では、Googleマップの埋め込み手順、カスタマイズオプション、おすすめプラグインについて詳しく解説します。

WordPressでGoogleマップを埋め込む目的

Googleマップを埋め込むことには多くの利点があります。以下にその主な目的を挙げます。

1. ユーザーの利便性の向上

地理的情報を簡単に取得できるため、ユーザー体験が向上します。オフィスの所在地や連絡先情報が明確に表示されることで、ユーザーが迷うことなく目的地に到達できます。

特に、初めて訪問するユーザーにとっては、具体的な地図があることで安心感が増し、サイトの信頼性が向上します。また、地図のインタラクティブな機能を活用することで、ユーザーはルート検索や周辺情報の確認が容易になります。

2. SEOの強化

Googleマップをサイトに埋め込むことで、ローカルSEOが強化され、検索エンジンのランキングが向上する可能性があります。特にローカルビジネスにおいては、地理的な検索結果で上位に表示されることが重要です。

Googleはローカル検索において、地理的な関連性を重視するため、Googleマップの埋め込みは検索結果の上位表示に近づくための大きな要因の一つになります。

3. ローカルビジネスの競争優位性

ローカルビジネスにとって、Googleマップの埋め込みは非常に有益です。顧客が店舗やオフィスの場所を簡単に確認でき、直接ナビゲーションを利用することができます。

これは、特に新規顧客を獲得する際に重要です。地図を埋め込むことで、顧客はビジネスの物理的な存在を確認でき、訪問の計画を立てやすくなります。また、地図上に周辺のランドマークやアクセス方法を表示することで、初めて訪れる顧客にも分かりやすく案内できます。

Googleマップ埋め込みの手順3ステップ

ステップ1 : 表示させたいエリアをGoogleマップで表示する

まず、Googleマップを開き、表示させたいエリアを検索します。地図を適切なズームレベルに調整し、見たい場所が画面に表示されるようにします。具体的には、次の手順で行います。

1. Googleマップを開く

ブラウザでGoogleマップ（https://maps.google.com）を開きます。

2. 目的の場所を検索

検索バーに表示させたい場所の住所や名前を入力し、エンターキーを押します。

3. 地図を調整

地図が表示されたら、ドラッグして位置を調整し、ズームインやズームアウトして最適な表示にします。特にビジネスの所在地やイベント会場など、特定のポイントが明確に表示されるようにしましょう。

ステップ2 : Googleマップの埋め込みコードを取得する

次に、Googleマップから埋め込みコードを取得します。以下の手順で簡単に取得できます。

1. 「共有」をクリック

地図の左側にある共有アイコンをクリックします。

2. 「地図を埋め込む」を選択

共有ダイアログが表示されたら、「地図を埋め込む」タブをクリックします。

3. 地図のサイズを選択

「地図を埋め込む」をクリックすると、以下の画面が表示されます。左上から地図のサイズを選択できるので、「大」、「中」、「小」または「カスタムサイズ」から選びましょう。

「カスタムサイズ」を選んだ場合は、ご自身で縦横のサイズを設定することが可能です。「実サイズでプレビュー」をクリックすると、設定したサイズの表示を確認できます。

4. 埋め込みコードをコピー

表示された埋め込みコードの右側の「URLをコピー」をクリックして、リンクをコピーします。

ステップ3: WordPressにGoogleマップを埋め込む

取得した埋め込みコードをWordPressに貼り付けて、地図を表示させます。地図を表示するには主に、「ブロックエディター」と「クラシックエディター」を使用する方法があります。

それぞれのエディターに応じた手順を解説します。

ブロックエディター (Gutenberg) を使用する場合

1. 投稿またはページの編集画面を開く

WordPressのダッシュボードから、編集したい投稿またはページを選択します。開いたら、エディター画面の左上にある「＋」アイコンをクリックします。

2. ブロック選択画面で「すべて表示」をクリック

追加する新しいブロックの選択画面が表示されます。「すべて表示」をクリックして見えていない選択肢を表示します。

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

ブロックメニューから「カスタムHTML」ブロックを選択します。

4. 埋め込みコードを貼り付ける

HTMLブロックが挿入されたら、コピーした埋め込みコードを貼り付けます。

5. プレビューで確認

ブロックのプレビューを確認し、地図が正しく表示されていることを確認します。

クラシックエディターを使用する場合

1. 投稿またはページの編集画面を開く

WordPressのダッシュボードから、編集したい投稿またはページを選択します。開いたら、エディター画面の上部にある「テキスト」タブをクリックして、HTMLモードに切り替えます。

2. 埋め込みコードを貼り付ける

適切な位置にコピーした埋め込みコードを貼り付けます。

3. 「プレビュー」で表示を確認する

ページ右側の「プレビュー」ボタンをクリックして、地図が正しく表示されていることを確認します。

カスタマイズオプション

Googleマップをさらにカスタマイズして、サイトに最適な表示にする方法を紹介します。

マップのサイズや表示スタイルの調整

埋め込みコード内の「width」や「height」の値を変更して、マップのサイズを調整します。サイズの選択で「カスタムサイズ」を選択しなかった場合でも、後から必要になった場合はこちらの値で地図サイズ変更が可能です。

カスタムマップの作成と埋め込み

Googleマイマップを使用してカスタムマップを作成し、埋め込むことも可能です。独自のマップを作成して、特定のルートやポイントを強調できます。以下の手順でカスタムマップを作成します。

1. Googleマイマップを開く

ブラウザでGoogleマイマップ（https://www.google.com/mymaps）を開きます。

2. 新しい地図を作成

左上の「新しい地図を作成」ボタンをクリックします。

3. 地図に名前を付ける

タイトル部分をクリックして、地図のタイトルと説明を入力します。

4. ポイントを追加

左上のアイコンの中から「マーカーを追加」を選択します。その後、任意の場所をクリックして地図上にピンを追加し、各ポイントに名前や説明を入力します。

5. ルートを追加

「ルートを追加」アイコンを押して、指定したポイント間のルートを作成します。

新たに開いた「無題のレイヤ」のA、Bの空欄に、先ほど追加したポイントの名前を入力する。候補にポイントが出てきたら選択する。

すると、ABポイント間のルートが入った地図ができあがる。

6. 地図を公開

地図が完成したら、「共有」をクリックし、地図の公開設定を行います。「共有」が見つからない場合は、左上の地図タイトルをクリックし、「保存」を押してから再度確認してください。

7. 埋め込みコードを取得

タイトル右のメニューを開き、「自分のサイトに埋め込む」を選択します。「埋め込みコードを取得」を選択し、表示されたコードをコピーしてワードプレスサイトに貼り付けます。

おすすめのプラグイン解説

Googleマップを簡単に埋め込むためのおすすめプラグインを紹介します。これらのプラグインを使用することで、コードの知識がなくても簡単にマップを埋め込むことができます。

1. WP Go Maps

• 主な機能：簡単にカスタムマップを作成・埋め込み可能。複数のマップやマーカーをサポートしています。デザイン性の高さと使いやすさから非常におすすめのプラグインです。
• 無料版と有料版の違い：無料版では1つしか地図が作成できません。有料版では複数の地図が作成できるほか、より多くのカスタマイズオプションが利用可能。例えば、複数のマーカー、ポリライン、ポリゴンなどの追加機能があります。
• 評価：高評価が多く、使いやすさが評判。ユーザーインターフェースが直感的で、初心者でも簡単に利用できます。

WordPress.org 日本語

WP Go Maps (formerly WP Google Maps) The easiest to use Google maps plugin! Create a custom Google map, map block, store locator or map widget with high quality markers containing categor …

2. MapPress Maps for WordPress

• 主な機能：シンプルな地図を簡単。カスタマイズ可能なマーカー。ショートコードを使用して、投稿やページに簡単にマップを挿入できます。
• 無料版と有料版の違い：無料版でもマップの数には制限がありません。
  有料版では追加のマップスタイルやカスタマイズオプションが利用可能。例えば、カスタムアイコンの使用やフィルタリングオプションが含まれます。
• 評価：MapPress Maps for WordPressは、投稿画面で地図の埋め込みを簡単に行えるように設計されています。プラグインを有効にすると、投稿画面に地図を埋め込むための専用入力フィールドが追加されます。住所を検索してそのまま記事に埋め込むことで、簡単に地図を作成および表示できるのが強みです。

WordPress.org

MapPress Maps for WordPress MapPress is the easiest way to add unlimited interactive Google and Leaflet maps to WordPress.

3. Maps Widget for Google Maps

• 主な機能：ウィジェットエリアに簡単にマップを埋め込み可能で、ウィジェット内で直接マップの設定を行うことができます。ロード時間が速いことも特徴です。
• 無料版と有料版の違い：有料版ではフルスクリーンモードやカスタムマーカーが利用可能。さらに、ウィジェットの外観をカスタマイズするための追加オプションが含まれます。
• 評価：
  Maps Widget for Google Mapsは、サイトカラーや好みに合わせて地図をカスタマイズできる高い自由度が特徴です。豊富なカスタム項目があり、無料版でも十分以上に活用できます。

WordPress.org 日本語

Maps Widget for Google Maps Are your Google Maps slow? Try Map Widget for Google Maps. You'll have a fast Google Maps widget with a thumbnail & lightbox map in minutes!

4. MapGeo

• 主な機能：カスタムマーカーや国ごとのカラーが利用可能で、広い範囲の地図を利用したい場合におすすめです。また、地図上にデータレイヤーを追加して、統計情報やその他のデータを視覚的に表示できます。
• 無料版と有料版の違い：無料版でも数の制限なく地図の作成が可能です。
  有料版では追加のデータレイヤーやフィルタリングオプションが利用可能。より高度なデータビジュアライゼーション機能が含まれています。
• 評価：ビジュアルに優れた地図を作成したいユーザーに最適です。シンプルで直感的な操作、高いカスタマイズ性と多機能性のほか、優れたサポートと迅速な対応も好評です。

WordPress.org

MapGeo – Interactive Geo Maps Create interactive vector maps of the world, continents, any country in the world and specific regions, including individual US state county maps.

プラグインの導入方法や導入する際の注意点についてはこちらの記事をご確認ください。

あわせて読みたい

【2024年最新版】WordPressで導入必須！ 便利でおすすめなプラグイン14選 WordPressユーザーにとって、プラグインは手軽に機能を拡張できる、欠かせないツールです。この記事では、WordPressユーザーにとって便利な機能を提供する必須プラグイ...

よくある質問 (FAQ)

マップが正しく表示されない場合はどうしたらいいですか？

以下の3つの方法を試してみてください。

1. キャッシュのクリア：ブラウザのキャッシュをクリアして、最新のデータを読み込むようにします。
2. プラグインの競合確認：他のプラグインとの競合が原因で表示されないことがあるため、一時的に他のプラグインを無効にして確認します。
3. コードの再取得：埋め込みコードに誤りがある場合があるため、再度Googleマップからコードを取得します。

複数のマップを埋め込む方法はありますか？

以下の手順でマップを埋め込みます。

1. 各マップのコードを取得：表示させたい各場所ごとに埋め込みコードを取得します。
2. コードを別々に貼り付け：WordPressの投稿やページに各マップの埋め込みコードを個別に貼り付けます。ブロックエディターを使用する場合は、各マップごとに新しいHTMLブロックを追加します。

モバイル対応について注意することはありますか？

以下の内容を実施し、モバイルでの見え方を確認してください。

1. レスポンシブデザインの採用：前述のCSSを使用して、マップが画面サイズに応じて自動的に調整されるようにします。
2. プレビューの確認：モバイルデバイスでマップの表示を確認し、必要に応じて調整します。特に、タッチ操作がスムーズに行えるかを確認します。

まとめ

Googleマップの埋め込みは、WordPressサイトにおいて訪問者に地理的情報を提供し、信頼性を向上させる効果的な方法です。正しい手順とカスタマイズオプションを活用することで、ユーザーエクスペリエンスを向上させ、SEOを強化することができます。また、おすすめのプラグインを利用することで、さらに簡単にマップを埋め込むことができます。

ぜひ、この記事を参考にして、ご自身のサイトにGoogleマップを埋め込んでみましょう。質問やフィードバックがあれば、コメント欄でお知らせください。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

↓