WordPressに地図を表示する方法｜Googleマップの埋め込み手順とおすすめプラグインを解説

はじめに

WordPressに地図を表示すると、店舗や事務所、イベント会場などの場所を視覚的に伝えられます。住所を文字だけで掲載するよりも、周辺道路や最寄り駅との位置関係が分かりやすくなり、ユーザーが目的地までのルートを確認しやすくなる点がメリットです。

WordPressで地図を表示する代表的な方法には、Googleマップの埋め込みコードを貼り付ける方法と、地図表示プラグインを利用する方法があります。1店舗の所在地を案内するだけなら埋め込みコードで十分ですが、複数店舗の検索、複数ピン、カテゴリー絞り込みなどが必要な場合はプラグインが適しています。

この記事では、WordPressにGoogleマップを埋め込む手順、おすすめの地図プラグイン、レスポンシブ対応、地図が表示されない場合の対処法まで詳しく解説します。

1. WordPressに地図を表示する主な方法

1-1. Googleマップの埋め込みコードを使う方法

最も簡単なのは、Googleマップで取得した埋め込み用HTMLコードをWordPressに貼り付ける方法です。

パソコン版Googleマップで目的地を表示し、「共有」から「地図を埋め込む」を選択すると、iframe形式のHTMLコードをコピーできます。WordPress側では、コピーしたコードをカスタムHTMLブロックへ貼り付けます。Googleヘルプ

この方法には、次のような特徴があります。

• プラグインを追加する必要がない

• コーディングの知識がほとんど不要

• 店舗や会社の所在地を短時間で掲載できる

• WordPress本体やプラグインの更新による影響を受けにくい

• 地図の細かなデザイン変更や高度な検索機能には向かない

店舗案内ページやお問い合わせページに1つの地図を掲載するだけなら、まず埋め込みコードを使う方法を検討するとよいでしょう。

1-2. WordPressのブロックエディターで地図を表示する方法

WordPressの標準ブロックエディターには、通常の画像ブロックのようにGoogleマップを直接作成する専用ブロックが標準搭載されているわけではありません。そのため、基本的には「カスタムHTML」ブロックを利用します。

投稿または固定ページの編集画面で「＋」をクリックし、「カスタムHTML」と検索します。表示されたブロックにGoogleマップの埋め込みコードを貼り付ければ、地図を掲載できます。カスタムHTMLブロックは、ブロック追加画面から選択するほか、空の段落で「/html」と入力して追加することも可能です。WordPress.org 日本語

なお、地図プラグインによっては専用のブロックが追加されます。その場合は、HTMLコードではなく、住所やズーム倍率などをブロックの設定画面で指定できます。

1-3. 地図表示プラグインを使う方法

地図表示プラグインを導入すると、WordPressの管理画面から地図やマーカーを作成できます。

プラグインによって異なりますが、主に次のような機能を利用できます。

• 複数のマーカーを1つの地図に表示する

• 店舗をカテゴリー別に絞り込む

• 現在地や住所から近い店舗を検索する

• マーカーをまとめて表示する

• 店舗情報をポップアップで表示する

• 地図のデザインや操作ボタンを変更する

• CSVなどを使って店舗情報を一括登録する

複数店舗を運営している企業や、不動産情報、観光スポット、施工事例などを地図上で紹介したいサイトに適しています。

ただし、プラグインを増やすと、アップデートやセキュリティ管理が必要になります。必要な機能を整理し、過剰な機能を持つプラグインは避けましょう。

1-4. テーマやページビルダーの地図機能を使う方法

WordPressテーマやページビルダーに、地図表示機能が用意されていることもあります。

たとえば、ページビルダーの地図ウィジェットを使えば、住所、ズーム倍率、高さなどを入力するだけで地図を配置できます。すでに使用しているテーマやページビルダーに地図機能がある場合は、別のプラグインを導入する前に確認しましょう。

ただし、テーマやページビルダー独自の地図機能に依存すると、将来テーマを変更した際に地図が表示されなくなる可能性があります。長期的な運用を考える場合は、標準的な埋め込みコードや独立した地図プラグインを利用する方法も比較してください。

2. GoogleマップをWordPressに埋め込む手順

2-1. Googleマップで表示したい場所を検索する

最初に、パソコンのブラウザでGoogleマップを開き、地図に表示したい店舗名、会社名、施設名または住所を検索します。

検索結果に同じ名称の施設が複数表示される場合があるため、次の情報を確認してください。

• 店舗名や施設名

• 郵便番号と住所

• 電話番号

• 建物名や階数

• 地図上のピンの位置

ピンが建物の裏側や別の区画に表示されていると、ユーザーが迷う原因になります。公開前に、入口や駐車場との位置関係も確認しておきましょう。

2-2. 共有メニューから埋め込みコードを取得する

目的の場所を表示したら、「共有」をクリックします。共有画面で「地図を埋め込む」を選択し、地図のサイズを指定して「HTMLをコピー」をクリックします。Googleの案内でも、ウェブページに掲載する場合は「地図を埋め込む」からHTMLをコピーする手順が示されています。Googleヘルプ

コピーされるコードは、次のようなiframeタグです。

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

src属性の内容は場所ごとに異なります。途中の文字列を削除すると地図が表示されなくなるため、基本的にはコード全体をコピーしてください。

2-3. WordPressのカスタムHTMLブロックに貼り付ける

WordPressの管理画面から、地図を表示したい投稿または固定ページを開きます。

編集画面で次の操作を行います。

1. 地図を挿入したい位置で「＋」をクリックする

2. 「カスタムHTML」と検索する

3. カスタムHTMLブロックを追加する

4. Googleマップからコピーしたコードを貼り付ける

5. 「プレビュー」を選択して表示を確認する

通常の段落ブロックへ貼り付けると、HTMLコードが文字として表示されたり、コードの一部が変更されたりすることがあります。必ずカスタムHTMLブロックを使用しましょう。

2-4. 地図のサイズを調整する

埋め込みコードには、横幅を指定するwidthと、高さを指定するheightが含まれています。

たとえば、次の指定では横幅600ピクセル、高さ450ピクセルで表示されます。

HTML
width="600"
height="450"

WordPressサイトでは、横幅を固定値ではなく100%にすると、コンテンツエリアに合わせて伸縮しやすくなります。

HTML
width="100%"
height="450"

高さは、ページの目的に合わせて調整します。アクセス案内の中心として大きく見せたい場合は400～500ピクセル程度、住所情報の補助として使う場合は250～350ピクセル程度から確認するとよいでしょう。

2-5. 公開前にスマホ表示を確認する

地図を貼り付けた後は、パソコンだけでなくスマートフォン表示も確認します。

特に確認したいポイントは次のとおりです。

• 地図が画面の横幅からはみ出していないか

• 高さが大きすぎてスクロールしにくくなっていないか

• 地図上の操作ボタンが押せるか

• 地図の前後にある文章やボタンと重なっていないか

• 住所や電話番号が読みやすいか

WordPressの編集画面にあるデバイス別プレビューに加え、可能であれば実際のスマートフォンでも確認してください。テーマやキャッシュ設定によっては、編集画面のプレビューと実際の表示が異なることがあります。

3. WordPressで地図を表示する場所別の設定方法

3-1. 固定ページに地図を表示する方法

会社概要、アクセス、店舗案内、お問い合わせなど、内容を継続的に掲載するページには固定ページを使用します。

固定ページに地図を表示する基本手順は次のとおりです。

1. 「固定ページ」から対象ページを編集する

2. 住所や交通案内を入力する

3. カスタムHTMLブロックを追加する

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

5. プレビュー後に更新または公開する

地図だけを掲載するのではなく、最寄り駅、徒歩時間、駐車場、建物の目印なども併記すると、初めて訪問するユーザーに親切です。

3-2. 投稿記事内に地図を表示する方法

ブログ記事やイベント情報、旅行記事、店舗紹介などにも地図を掲載できます。

地図を記事内に配置するときは、文章の流れを遮らない位置を選びましょう。たとえば、施設の基本情報を説明した直後や、「アクセス」の見出しの下に配置すると自然です。

同じ記事に複数の地図を埋め込むと、ページの読み込みが重くなる可能性があります。複数地点を紹介する場合は、1つの地図に複数ピンをまとめる方法や、地図をクリックしたときに読み込む仕組みも検討してください。

3-3. サイドバーやフッターに地図を表示する方法

サイドバーやフッターに地図を表示する場合は、テーマのウィジェット機能またはサイトエディターを使用します。

クラシックテーマでは「外観」から「ウィジェット」を開き、カスタムHTMLウィジェットに埋め込みコードを貼り付けます。ブロックテーマでは「外観」の「エディター」からフッターなどのテンプレートパーツを編集し、カスタムHTMLブロックを配置します。

サイドバーは横幅が狭いため、次のようにwidth="100%"を指定するのがおすすめです。

HTML
<iframe
  src="地図のURL"
  width="100%"
  height="250"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

ただし、すべてのページで地図を読み込むと表示速度に影響する場合があります。地図が必要なページだけに表示する設計も検討しましょう。

3-4. お問い合わせページや店舗案内ページに地図を表示する方法

お問い合わせページや店舗案内ページでは、地図と次の情報をセットで掲載すると分かりやすくなります。

• 正式な店舗名または会社名

• 郵便番号と住所

• 電話番号

• 営業時間と定休日

• 最寄り駅やバス停

• 駐車場の有無

• 建物の入口や受付階

• Googleマップで経路を開くリンク

「大きな地図で見る」「Googleマップで経路を確認」といったリンクやボタンを設置すると、スマートフォンのGoogleマップアプリへ移動しやすくなります。

4. WordPressで地図表示におすすめのプラグイン

4-1. WP Go Maps

WP Go Mapsは、Google Maps、Leaflet、OpenLayersなどを利用して地図を作成できるWordPressプラグインです。旧名称はWP Google Mapsで、地図ブロックやストアロケーター機能も提供されています。WordPress.org 日本語

管理画面で住所を入力してマーカーを追加し、作成した地図をブロックまたはショートコードで表示できます。レスポンシブ表示、複数マーカー、地図テーマなどに対応しているため、初心者から複数店舗を管理したい事業者まで利用しやすい選択肢です。WordPress.org

無料版と有料版では利用できる機能が異なるため、店舗検索、カテゴリー、インポートなどが必要な場合は事前に機能表を確認してください。

4-2. MapPress Maps for WordPress

MapPress Maps for WordPressは、GoogleマップとLeafletの地図をWordPressに追加できるプラグインです。Gutenbergの地図ブロックとクラシックエディターに対応し、複数の地図やマーカーを作成できます。WordPress.org

編集画面から地図を作成しやすいため、投稿ごとに異なる場所を紹介するブログや、物件情報、イベント情報との組み合わせに向いています。

地図サービスによってAPIキーや設定条件が異なるため、使用する地図プロバイダーを決めてから初期設定を行いましょう。

4-3. Leaflet Map

Leaflet Mapは、ショートコードを使ってLeafletベースの地図やマーカーを表示できるプラグインです。

基本的な地図は、次のようなショートコードで表示できます。

[leaflet-map address="東京都千代田区"]

マーカーを追加する場合は、地図用ショートコードとマーカー用ショートコードを組み合わせます。

[leaflet-map fitbounds]
[leaflet-marker address="東京駅"]東京駅[/leaflet-marker]
[leaflet-marker address="有楽町駅"]有楽町駅[/leaflet-marker]

複数マーカー、ポップアップ、緯度・経度による指定、GeoJSON、KML、GPXなどにも対応しています。WordPress.org 日本語

Googleマップ以外の地図を利用したい場合や、ショートコードを使って柔軟に構成したい場合に向いています。ただし、地図タイルや住所検索サービスにはそれぞれ利用条件があるため、商用利用やアクセス数の多いサイトでは規約を確認してください。

4-4. Advanced Google Maps Plugin for WordPress

Advanced Google Maps Plugin for WordPressは、現在「WP Maps Pro」として案内されることもある高機能な有料プラグインです。複数地点、ストアロケーター、検索や絞り込みなど、高度な地図機能を必要とするサイトに向いています。CodeCanyon

多店舗サイト、不動産検索、観光情報、営業拠点検索など、地図を中心としたコンテンツを構築したい場合に検討できます。

有料プラグインを導入する際は、価格だけでなく、更新履歴、現在のWordPressとの互換性、サポート期間、ライセンス条件も確認してください。地図プラグインは外部APIとの連携が多いため、継続的にアップデートされている製品を選ぶことが重要です。

4-5. プラグインを選ぶときの比較ポイント

WordPressの地図プラグインを選ぶ際は、次の項目を比較しましょう。

表示したい地点数
1地点だけなのか、数十店舗、数百店舗を管理するのかで必要な機能が変わります。

対応する地図サービス
Google Mapsだけでなく、OpenStreetMapやLeafletに対応しているプラグインもあります。

APIキーの必要性
Google Maps Platformを利用する機能では、APIキーや請求先アカウントの設定が必要になる場合があります。

検索・絞り込み機能
店舗名、地域、カテゴリー、現在地からの距離などで検索できるか確認します。

データの一括登録
店舗数が多い場合は、CSVによるインポート・エクスポート機能があると管理しやすくなります。

レスポンシブ対応
スマートフォンで地図がはみ出さず、マーカーや検索フォームを操作できるか確認します。

更新状況とサポート
最終更新日、対応WordPressバージョン、サポートフォーラムの対応状況も重要です。

5. Googleマップ埋め込みとプラグインはどちらがおすすめか

5-1. 簡単に1つの場所を表示するならGoogleマップ埋め込み

会社や店舗の所在地を1つ表示するだけなら、Googleマップの埋め込みコードがおすすめです。

プラグインのインストールや設定が不要で、GoogleマップからHTMLをコピーし、WordPressのカスタムHTMLブロックへ貼り付けるだけで設置できます。

次のようなケースに向いています。

• 会社概要ページに本社所在地を掲載する

• お問い合わせページに店舗を1つ表示する

• イベント会場の場所を案内する

• ブログ記事で訪問した施設を紹介する

更新作業も少なく、プラグインの互換性を気にせず運用できる点がメリットです。

5-2. 複数店舗や複数ピンを表示するならプラグイン

複数店舗を1つの地図に表示したい場合は、プラグインが適しています。

地図プラグインを利用すれば、店舗情報をWordPressの管理画面で登録し、複数のマーカーとして表示できます。プラグインによっては、地域別の絞り込み、現在地からの距離検索、マーカークラスタリングなども利用できます。

数店舗であればGoogleマイマップを作成して埋め込む方法もありますが、店舗の追加や削除が頻繁に発生する場合は、WordPress内で情報を一元管理できるプラグインのほうが効率的です。

5-3. デザインを細かく調整したい場合の選び方

地図の色、マーカー画像、ポップアップ、操作ボタンなどを細かく調整したい場合は、カスタマイズ機能の多いプラグインを選びます。

ただし、デザイン機能が多いほど設定が複雑になる傾向があります。見た目を変えることだけを目的に高機能なプラグインを導入すると、管理の負担が増える可能性があります。

必要なデザイン要件を次のように整理してから選びましょう。

• ブランドカラーに合わせたい

• オリジナルのピン画像を使いたい

• 店舗情報を吹き出しで表示したい

• 地図上に営業エリアを描画したい

• 航空写真や地形表示を選択させたい

5-4. 表示速度や管理のしやすさで比較する

一般的には、単純な埋め込みコードのほうが管理項目は少なくなります。一方、プラグインはJavaScript、スタイルシート、検索機能などを追加で読み込むため、設定内容によってはページ表示が重くなることがあります。

ただし、同じページに多数のiframeを埋め込む場合も負荷は増えます。表示速度を優先するなら、次の対策が有効です。

• 地図を必要なページだけに掲載する

• loading="lazy"を利用する

• 複数地点を1つの地図にまとめる

• 地図の代わりに画像を表示し、クリック後に読み込む

• 使用していない地図プラグインを削除する

• キャッシュや遅延読み込みとの動作を確認する

6. WordPressの地図表示をカスタマイズする方法

6-1. 地図の横幅や高さを変更する

Googleマップの埋め込みコードでは、widthとheightを変更してサイズを調整できます。

HTML
<iframe
  src="地図のURL"
  width="100%"
  height="400"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

横幅を100%にすると、親要素の横幅に合わせて表示されます。高さはピクセル値で指定する方法が簡単です。

地図が大きすぎるとページ内での存在感が強くなり、小さすぎると周辺情報を確認しにくくなります。住所やアクセス情報とのバランスを見ながら調整してください。

6-2. スマホ対応のレスポンシブ表示にする

より安定したレスポンシブ表示にしたい場合は、地図を専用の要素で囲みます。

HTML
<div class="map-container">
  <iframe
    src="地図のURL"
    loading="lazy"
    allowfullscreen>
  </iframe>
</div>

追加CSSには次のように記述します。

CSS
.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

padding-top: 56.25%は、横16対縦9の比率です。縦を少し大きくしたい場合は、数値を増やします。

テーマによっては埋め込み要素に独自のCSSが適用されているため、変更後はパソコン、タブレット、スマートフォンで確認してください。

6-3. 複数のピンを表示する

複数ピンを表示する主な方法は、次の3つです。

• Googleマイマップで複数地点を登録して埋め込む

• 複数マーカー対応のWordPressプラグインを使う

• Maps JavaScript APIなどを利用して独自に実装する

Googleマイマップでは、地点、線、エリアなどを追加した独自の地図を作成できます。ウェブサイトに埋め込む際は、地図を公開または共有可能な状態にする必要があります。Googleヘルプ

店舗数が多い場合や、WordPressの投稿・カスタム投稿と地点情報を連携したい場合は、プラグインまたはAPIによる実装が適しています。

6-4. 店舗情報や営業時間を地図と一緒に表示する

地図の近くには、店舗情報をテキストで掲載しましょう。

HTML
<div class="shop-info">
  <h3>〇〇店</h3>
  <p>〒100-0000 東京都〇〇区〇〇1-2-3</p>
  <p>営業時間：10:00～19:00</p>
  <p>定休日：毎週水曜日</p>
  <p>電話番号：00-0000-0000</p>
</div>

複数店舗を掲載する場合は、「店舗情報の下に地図を置く」「左側に店舗情報、右側に地図を置く」など、一定のレイアウトに統一します。

地図上のポップアップだけに営業時間や電話番号を記載すると、スマートフォンでは情報を見落とされることがあります。重要な情報は通常のHTMLテキストでも掲載してください。

6-5. 地図のデザインやズーム倍率を調整する

Googleマップの共有画面から取得する一般的な埋め込みコードでは、詳細なデザイン変更に限界があります。

ズーム倍率、地図テーマ、操作コントロール、独自マーカーなどを細かく設定したい場合は、地図プラグインやMaps JavaScript APIを利用します。Maps JavaScript APIでは、独自のグラフィック、アニメーション、データレイヤーなどを地図に追加できます。Google for Developers

ただし、APIを使った独自実装には、APIキーの管理、請求先設定、利用量の監視、セキュリティ設定などが必要です。単純なアクセス案内であれば、高度なカスタマイズを行わず、標準の埋め込み地図を利用するほうが管理しやすい場合があります。

7. WordPressで地図が表示されないときの原因と対処法

7-1. 埋め込みコードが正しく貼り付けられていない

地図が表示されない場合は、最初に埋め込みコードを確認します。

次のような状態になっていないか確認してください。

• iframeタグの一部が削除されている

• src属性のURLが途中で切れている

• 開始タグまたは終了タグが欠けている

• 全角の引用符や記号に置き換わっている

• 地図のURLではなく共有用の短縮リンクを貼っている

修正が難しい場合は、Googleマップから埋め込みコードをもう一度取得し、既存のコードと入れ替える方法が確実です。

7-2. ビジュアルエディターでコードが崩れている

クラシックエディターを使用している場合、ビジュアルモードで編集すると、埋め込みコードが変更または削除されることがあります。

クラシックエディターでは「テキスト」モードへ切り替えて貼り付けます。ブロックエディターではカスタムHTMLブロックを使用してください。

地図コードを貼り付けた後に通常の文章ブロックへ変換すると、コードが文字として表示される場合があります。ブロックの種類も確認しましょう。

7-3. プラグインやテーマと競合している

地図プラグインを使用している場合は、テーマや別のプラグインとの競合も考えられます。

特に影響しやすいのは、次のような機能です。

• JavaScriptの圧縮や結合

• JavaScriptの遅延実行

• iframeの遅延読み込み

• Cookie同意管理

• セキュリティフィルター

• ページビルダー

• モーダルやタブ表示

原因を調べるときは、バックアップを取得したうえで、キャッシュを削除し、関連しそうなプラグインを一時的に停止します。停止によって地図が表示された場合は、除外設定や読み込み順を調整してください。

7-4. Google Maps APIキーの設定に問題がある

プラグインや独自開発でGoogle Maps Platformを利用している場合は、APIキーの問題を確認します。

主な原因は次のとおりです。

• APIキーが入力されていない

• APIキーが無効になっている

• 必要なAPIが有効化されていない

• 請求先アカウントが設定されていない

• HTTPリファラー制限が正しくない

• 許可したドメインと実際のURLが一致していない

• 利用上限や割り当てに達している

Maps Embed APIでは、有効なAPIキーが必要であり、APIがプロジェクトで有効化されていない場合や、キーの制限に違反している場合はエラーになります。Google for Developers

ブラウザの開発者ツールを開き、「Console」に表示されるエラーメッセージを確認すると、原因を特定しやすくなります。

7-5. キャッシュやセキュリティ設定が影響している

設定を変更しても地図が直らない場合は、WordPress、サーバー、CDN、ブラウザのキャッシュを削除します。

セキュリティ設定では、Content Security PolicyによってGoogleマップのドメインやiframeがブロックされている場合があります。また、Cookie同意ツールが外部コンテンツを同意前に停止している可能性もあります。

広告ブロック機能やブラウザ拡張機能が原因になることもあるため、シークレットウィンドウや別のブラウザでも確認してください。

8. WordPressに地図を表示するときの注意点

8-1. ページ表示速度への影響に注意する

地図は外部サーバーから画像、JavaScript、操作機能などを読み込むため、通常のテキストや画像よりも通信量が増える傾向があります。

特に、1ページへ複数の地図を掲載するときは注意が必要です。表示速度を改善するには、次の方法を検討します。

• loading="lazy"を指定する

• 地図を1つにまとめる

• ファーストビュー直下への掲載を避ける

• 地図画像を先に表示し、クリック後に地図を読み込む

• 不要な地図用スクリプトを読み込まない

• 地図を掲載するページを限定する

表示速度だけでなく、ユーザーが本当に操作可能な地図を必要としているかも考えましょう。簡単な場所紹介であれば、周辺地図の画像とGoogleマップへのリンクで十分なケースもあります。

8-2. Google Maps APIの料金や利用条件を確認する

Googleマップの利用方法によって、料金やAPIキーの条件が異なります。

Google Maps Platformの各APIは、基本的に利用量に応じた料金体系で提供されています。サービスやSKUごとに料金、無料利用枠、課金単位が異なるため、利用前に最新の料金表を確認する必要があります。Google for Developers+1

一方、Maps Embed APIのリクエストは無償で利用できますが、有効なAPIキーが必要です。Google for Developers+1

Googleマップの「共有」画面からコピーする一般的な埋め込みコードと、Google Cloudで設定するMaps Embed APIやMaps JavaScript APIは、導入手順が異なります。利用しているプラグインの説明書を確認し、必要なAPIだけを有効にしましょう。

8-3. 店舗名・住所・電話番号の情報を統一する

WordPressサイト内の店舗名、住所、電話番号は、Googleビジネスプロフィールなどに登録している情報と統一しましょう。

たとえば、ページによって次の表記が混在すると、ユーザーが同じ店舗か判断しにくくなります。

• 株式会社の有無

• ビル名や階数の有無

• 番地のハイフン表記

• 電話番号の区切り方

• 支店名と店舗名の違い

移転や電話番号の変更があった場合は、地図だけでなく、フッター、会社概要、構造化データ、店舗一覧などもまとめて更新してください。

8-4. ユーザーが迷わない導線を設計する

地図を掲載するだけでは、ユーザーが目的地へ到着できるとは限りません。

次のような補足情報を掲載すると、迷いにくくなります。

• 駅の出口番号

• 駅からの徒歩ルート

• 目印となる建物

• 入口の位置

• 受付の階数

• 駐車場や駐輪場

• 一方通行や進入禁止の情報

• バリアフリー経路

スマートフォン利用者向けに、「現在地から経路を検索する」ボタンを設置するのも効果的です。

8-5. 地図だけでなく住所テキストも掲載する

住所を地図上だけに表示するのは避けましょう。

地図が読み込めない環境や、外部コンテンツをブロックしているブラウザでは、所在地を確認できなくなる可能性があります。また、ユーザーが住所をコピーしたい場合、通常のテキストで掲載されているほうが便利です。

最低限、次の情報はHTMLテキストとして記載してください。

• 店舗名または会社名

• 郵便番号

• 住所

• 電話番号

• 営業時間

• 最寄り駅

9. WordPressの地図表示に関するよくある質問

9-1. WordPressにGoogleマップを無料で埋め込める？

パソコン版Googleマップの「共有」から取得した埋め込みコードを、WordPressのカスタムHTMLブロックへ貼り付ける方法で地図を掲載できます。Googleヘルプ

ただし、プラグインや独自開発でGoogle Maps PlatformのAPIを利用する場合は、APIの種類によって料金体系や無料利用枠が異なります。導入前に、使用するAPIと最新の料金条件を確認してください。

9-2. プラグインなしで地図を表示できる？

プラグインなしでも表示できます。

Googleマップで埋め込みコードを取得し、WordPressのカスタムHTMLブロックに貼り付ければ設置できます。1つの店舗や会社所在地を掲載するだけなら、プラグインを使わない方法が簡単です。

複数マーカー、店舗検索、絞り込みなどが必要になった時点で、プラグインの導入を検討するとよいでしょう。

9-3. 複数店舗の地図を表示するには？

主な方法は、Googleマイマップまたは複数マーカー対応のWordPressプラグインを利用することです。

店舗数が少なく更新頻度も低い場合は、Googleマイマップでも対応できます。店舗数が多い場合や、営業時間、カテゴリー、店舗検索などをWordPress上で管理したい場合は、WP Go MapsやMapPressなどのプラグインが便利です。Googleヘルプ+2WordPress.org 日本語+2

9-4. スマホで地図がはみ出す場合はどうすればいい？

埋め込みコードの横幅を、固定ピクセルではなく100%に変更します。

HTML
<iframe
  src="地図のURL"
  width="100%"
  height="350"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>

それでもはみ出す場合は、親要素の幅、テーマのCSS、余白、ページビルダーの設定を確認してください。レスポンシブ用のラッパー要素を作り、CSSでiframeの横幅を制御する方法も有効です。

9-5. Google Maps APIキーは必ず必要？

必ず必要とは限りません。

Googleマップの「共有」から取得した一般的な埋め込みコードを貼り付ける方法では、通常、利用者がGoogle CloudでAPIキーを作成してコードへ入力する作業はありません。

一方、Maps Embed APIを直接利用する場合はAPIキーが必要です。Maps JavaScript APIを使用するプラグインや独自実装でも、APIキー、APIの有効化、請求先アカウントなどの設定が必要になることがあります。Maps Embed APIは利用料金がかからないと案内されていますが、有効なAPIキーとCloudプロジェクトの設定は必要です。Google for Developers+2Google for Developers+2

利用しているプラグインがどの地図サービスやAPIを使用しているかを確認し、開発元の設定手順に従ってください。

まとめ

WordPressに地図を表示する最も簡単な方法は、Googleマップの「共有」メニューから埋め込みコードを取得し、カスタムHTMLブロックに貼り付ける方法です。

1店舗や会社所在地を掲載するだけなら、プラグインを導入する必要はありません。横幅を100%に設定し、公開前にスマートフォン表示を確認すれば、基本的な地図案内を作成できます。

一方、複数店舗、複数ピン、現在地検索、カテゴリー絞り込み、オリジナルマーカーなどが必要な場合は、WP Go Maps、MapPress Maps for WordPress、Leaflet Map、Advanced Google Maps Plugin for WordPressなどを比較しましょう。

地図を設置するときは、表示速度やAPIの利用条件にも注意が必要です。また、地図だけに頼らず、店舗名、住所、電話番号、営業時間、最寄り駅などをテキストでも掲載してください。

サイトの目的と管理する地点数に合った方法を選び、ユーザーが迷わず目的地へ到着できるページを作成しましょう。