WordPressのウェブサイトに地図を追加するのは、わずか5分で完了する作業です。信頼性の向上やローカルSEOの強化につながり、ユーザーがあなたのビジネスを利用しやすくなります。しかし、地図を正しく表示させ、必要な機能を備えるには何時間もかかることがあります。さらに、モバイルユーザーへの対応を忘れると、小さな画面で地図が見切れていることに気づかないかもしれません。
このガイドでは、ワードプレス グーグルマップ 埋め込みの方法として、ネイティブiFrame、マッププラグイン、無料ウィジェットの3つのオプションを詳しく解説します。それぞれの注意点やトレードオフについても取り上げるので、あなたに最適な方法を選ぶ参考にしてください。
WordPressに地図を埋め込む3つの方法
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
ネイティブiFrame |
不要 |
無料 |
非対応（幅・高さ固定） |
非対応 |
約5分 |
|
WordPressプラグイン |
必要（月10,000マップロードまで無料） |
基本機能は無料、高度な機能は有料 |
プラグインによる |
対応（有料の場合が多い） |
約15〜25分 |
|
Jotform Googleマップウィジェット |
必要（月10,000マップロードまで無料） |
ウィジェットは無料、高度な機能も含む |
対応 |
対応（無料） |
約15分 |
方法1：ネイティブのGoogleマップiFrameを使う
GoogleマップのiFrameは、ウェブサイトに地図を表示する最もシンプルで手軽な方法です。Googleマップで自分のビジネスを検索し、共有をクリックしてコードをコピーし、WordPressのページに貼り付けるだけです。ここではステップバイステップの手順を紹介しますので、すぐに設定を完了できます。
ただし、そのシンプルさ自体が制約にもなります。地図の見た目をカスタマイズしたり、複数のピンを追加したり、デフォルトの表示に追加情報を重ねたりすることはできません。また、モバイルでも問題なく使えるように、地図のサイズやWordPressのページレイアウトを試行錯誤する必要があります。
GoogleマップのiFrameを埋め込む方法
始める前に、Googleビジネスプロフィールにビジネスを登録しておきましょう。これにより、営業時間、口コミ、フードメニューなど、Googleマップにビジネスの詳細情報を表示できるようになります。自分のビジネスではない住所やランドマークを指定するだけの場合は、最初のステップに進んでください。
Googleマップから埋め込みコードを取得する
- google.com/mapsにアクセスし、ビジネス名または住所を検索します。
- 画面左側のビジネス詳細を確認し、正しいピンが選択されていることを確かめます。
- 共有をクリックします。
- 画面にポップアップが表示されます。地図を埋め込むタブをクリックします。
- ウェブサイトでの地図の表示プレビューが表示されます。デフォルトでは中サイズに設定されていますが、左上のドロップダウンから小サイズや大サイズを選択したり、カスタムサイズを指定したりすることもできます。
- サイズを選択したら、HTMLをコピーをクリックします。これでiFrameのコードスニペットがクリップボードにコピーされます。
WordPressに埋め込む（ブロックエディター/Gutenberg）
- WordPressで、地図を配置したいページまたは投稿を開きます。
- +ブロック挿入アイコンをクリックし、HTMLと入力してフィルタリングし、カスタムHTMLをクリックしてブロックをページに追加します。
- 新しいブロックで、HTMLを編集をクリックします。
- ポップアップにiFrameコードを貼り付けます。右側にプレビューが表示されます。更新をクリックして完了です。
- ページにiFrameの地図が埋め込まれました。公開または保存をクリックしてウェブサイトに反映させ、ページを表示して見た目を確認しましょう。
上記の手順がWordPressでのページ編集方法と異なる場合は、以下のエディターでHTMLを追加する方法を参照してください：
方法2：専用のWordPressマッププラグインをインストールする
方法1と比べると、専用のWordPressプラグインはより多くのカスタマイズ機能を提供します。他のプラグインと同じようにサイトにインストールし、Google Maps APIキーを作成して設定に貼り付け、ページにマップ要素を追加するだけです。
この方法はやや複雑になります。Google Maps APIキーを取得するには、Google Cloud Platformでアカウントを作成し、請求先アカウントを設定して、技術的なセットアップ手順を進める必要があります。また、マッププラグインはフリーミアムモデルで提供されており、基本機能を備えた無料プランは用意されていますが、優れた機能は買い切りライセンスや年間料金の背後に制限されています。
プラグインが増えることになるため、セットアップ完了後にウェブサイトの表示速度をテストしましょう。低コストのホスティングプランを利用している場合、プラグインが多すぎるとサイト全体の速度が大幅に低下し、ユーザー体験に悪影響を及ぼして訪問者の離脱につながる可能性があります。
モバイルユーザーにとって地図が使いやすいかどうかは、プラグインとその設定方法に依存します。たとえば、WP Go Mapsでは、表示が窮屈にならないよう、高さと幅の具体的な値を設定することが推奨されています。
WordPressマッププラグインの設定方法
ここでは、最も人気のあるWordPress向けGoogleマッププラグインのひとつ、WP Go Mapsを使って説明します。
WP Go Mapsをセットアップする
- WP Go Mapsをインストールして有効化します。
- イントロダクションをスキップをクリックしてセットアップを完了します。
- 左側のメニューから設定をクリックします。
- 「全般」タブで、マップエンジンとしてGoogle Mapsを選択します。
Google Maps APIキーを取得する
Googleのプラットフォームから地図データを取得するには、まずアカウントを登録してAPIキーを取得する必要があります。
- Google Maps Platformのウェブサイトにアクセスし、アカウントを作成します。
- Google Cloud Platformの設定フローに移動します。名前、国、通貨を設定して新しい請求先アカウントを作成します。
- 連絡先情報と支払い方法を追加します。完了したら、送信して課金を有効にするボタンをクリックします。
このオプションでは、月間10,000回の無料マップ読み込みが提供されます。それを超えた場合は、1,000回あたり7ドルが課金されます。上限内であればカードに請求されることはありませんが、請求先アカウントの設定はいずれにしても必要です。（2025年3月、Googleは従来の月額200ドルのクレジットを廃止し、各APIごとに個別の無料枠に置き換えました。古いチュートリアルではまだこのクレジットに言及しているものがありますが、現在は存在しません。）
- Mapsサービスの利用目的に関するいくつかの質問が表示されます。回答して送信をクリックします。
- 左側のメニューからキーと認証情報をクリックします。
- 認証情報を作成のドロップダウンをクリックし、次にAPIキーを選択します。
- 表示されたモーダルで、新しいAPIキーの名前と権限を設定できます。これらの設定を変更する必要はありません。一番下までスクロールして作成をクリックします。
- APIキーをコピーします。
サイトを公開する前に、キーを制限することが重要です。制限されていないキーはページのソースコードからコピーされ、不正に使用されて課金額が膨らむ可能性があります。GoogleのAPIキーのベストプラクティスに従って、キーを自分のドメインに制限しましょう。
WordPressでプラグインの設定を完了する
- WordPressのWP Go Mapsプラグイン設定ページに戻り、「Google Maps APIキー」フィールドにAPIキーを貼り付けます。貼り付けたら設定を保存ボタンをクリックします。
- 左側のメニューからマップをクリックします。
- プラグインによって最初のマップがすでに作成されています。編集ボタンをクリックして確認しましょう。
- ここで、ウェブサイト上でのマップの表示方法を設定します。マーカータブをクリックして、ビジネスの場所を追加しましょう。
- 三点メニューをクリックし、あらかじめ設定されているマップマーカーを削除します。
- 上部のマーカーを追加をクリックします。
- ビジネスの住所を検索し、リストに表示されたら選択します。
- マーカーを追加ボタンをクリックして完了です。
- ビジネスの場所がマップ上にマーカーとして表示されました。ズームレベルやその他の表示設定をカスタマイズするには、戻って設定ボタンをクリックします。設定が完了したら、画面下部のマップを保存を忘れずにクリックしてください。
- ウェブサイトのページにマップを配置する準備ができたら、左下のショートコードを取得ボタンをクリックします。ショートコードがクリップボードにコピーされます。
- マップを追加したいページに移動し、新しいブロックを追加するためにクリックして、ショートコードと入力してオプションを絞り込みます。表示されたらクリックします。
- 入力フィールドにショートコードを貼り付け、公開または保存をクリックします。
- ページにアクセスすると、設定したマーカーとともにマップが表示されます。
方法3：無料でカスタマイズ可能なGoogleマップウィジェットを追加する（おすすめ）
JotformのGoogleマップウィジェットは、プラグインのインストールやライセンス料の支払いが不要な、無料で完全にカスタマイズ可能なマップです。このウィジェットを使えば、以下のことができます。
- 1つまたは複数の場所を同じマップ上に追加して表示できます。
- 道路地図や衛星写真など、マップの表示形式を選択できます。
- ライトテーマまたはダークテーマに対応し、ボックスの角丸も調整できます。
- マップのサイズ、レイアウト、ズームレベルを設定できます。
ネイティブのiFrameと比較すると、カスタマイズが可能で、同じマップ上に複数のピンを配置でき、最初からレスポンシブ対応です。プラグインと比較すると、ウェブサイトの動作を重くすることがなく、すべての機能を利用するために有料プランが必要になることもありません。
これらのメリットがある一方で、JotformのGoogleマップウィジェットにもGoogle Maps APIキーが必要です。セットアップ手順を実行し、Googleで請求先アカウントを作成する必要があります。
JotformのGoogleマップウィジェットをウェブサイトに追加する方法
- JotformのGoogleマップウィジェットページにアクセスします。ほとんどの場合、設定ツールが自動的に読み込まれますが、読み込まれない場合はCreate New Website Widgetをクリックして開始します。
- Google Maps APIキーの取得方法に関するこちらのガイドに従ってください。方法2で説明したすべての手順に加え、キーを安全に保つための制限方法についても解説しています。（Googleマップでは毎月10,000回のマップ読み込みが無料で、それ以降は1,000回ごとに7ドルかかります。）完了したら、Google Maps APIキーを入力フィールドに貼り付けます。
- 一般設定をお好みに合わせて調整します。マップの表示方法や、追加する場所の数などを設定できます。ここでのスクリーンショットでは、複数ピンのマップを示すためにJotformのサンフランシスコオフィスとカナダオフィスを使用していますが、1つの場所だけでも必要な数だけでも追加できます。設定が完了したらContinueをクリックします。
- テーマ、フォント、カスタムCSSなどのスタイル設定を変更します。設定が完了したらContinueをクリックします。
- この最後のステップで、レイアウトと追加機能をカスタマイズします。準備ができたらTry It on Your Website for Freeをクリックします。
- Jotformの無料アカウントに登録するか、既存のアカウントにログインします。ログイン完了後に埋め込みコードが表示されます。Copy Codeをクリックします。
- 方法1のステップ7〜11に従い、カスタムHTMLブロックを使って埋め込みコードをページに追加します。ブロックを挿入し、コードを貼り付けてから、公開または保存をクリックします。
- スマートフォンでページを開いてみましょう。方法1のネイティブiFrameとは異なり、このウィジェットは画面サイズに合わせて自動的にリサイズされるため、モバイルで切れてしまっていたマップもここでは全体が表示されます。
スマートなサーバーレスウィジェットでWordPressサイトを強化しよう
ウェブサイトにスマートな機能を組み込むには、通常、新しいプラグインへの課金やコードとの格闘が必要です。Jotformを使えば、そのすべてをスキップできます。Googleマップウィジェットに加え、Jotformウェブサイトウィジェットディレクトリでは、150以上の無料・ノーコードウィジェットが提供されており、シンプルなHTMLスニペットをウェブサイトに貼り付けるだけで設定できます。
以下のウィジェットは、マップウィジェットとの相性が抜群です。
- 営業時間ウィジェット：営業時間を表示するウィジェットで、リアルタイムの「営業中」「営業時間外」のステータスをマップの横に配置できます。マップであなたのお店を見つけた訪問者が、すぐに営業中かどうかを確認できます。APIキーは不要です。
- 予約ウィジェット：ウェブサイトに予約機能を追加し、訪問者があなたとの予定を簡単にスケジュールできるようになります。このウィジェットでは、空き時間の設定、サービスの種類・所要時間・料金の表示、そして追加ツールなしでの予約受付が可能です。
- FAQウィジェット：よくある質問とその回答を、検索可能なアコーディオン形式で一覧表示するウィジェットです。WordPressでも同じことは可能ですが、このウィジェットが提供する洗練された体験を実現するには、コードを扱うか、さらに別のプラグインをインストールする必要があります。
エントリーレベルのWordPressホスティングプランを利用している場合、プラグインは重要なサーバーリソースを消費し、ウェブサイトの速度を低下させ、訪問者に悪いユーザー体験を与えてしまいます。Jotformのウィジェットは Jotformのインフラ上で動作するため、あなたのウェブサイトに負荷がかかりません。これによりサーバーリソースが解放され、ウェブサイトがより高速で使いやすくなります。
WordPressサイトをさらにレベルアップしたいですか？以下をご覧ください。
- WordPressの使い方ガイドでは、ウェブデザインコースに投資しなくてもプロフェッショナルなウェブサイトを構築する方法を学べます
- JotformのWordPress連携では、自動化、決済、高度な機能を1つのプラットフォームで統合し、データ収集を効率化できます
よくある質問
はい、ウェブサイトが遅くなる可能性があります。インタラクティブなGoogleマップは100KBから2MBにもなる大量のJavaScriptを読み込みます。ある独立したテストでは、1つの埋め込みでページスピードスコアが14パーセント低下し、ウェブサイトが操作可能になるまでの時間が6.5秒増加しました。速度低下を防ぐには、マップのスクリプトを使用するページのみで読み込む、iFrameを遅延読み込みする、またはクリックで読み込むプレースホルダー画像を追加するなどの方法があります。
はい、ただし基本的なiFrame埋め込みでは対応できません。複数のマーカーを追加するには、Googleマイマップでマップを作成します。ピンを配置し、公開設定にして、埋め込みコードをコピーし、ウェブサイトに貼り付けます。ピンはいくつでも配置できますが、マップのスタイルを変更したり、カスタムの詳細パネルを追加したりすることはできません。複数のピンとカスタマイズ機能の両方が必要な場合は、JotformのGoogleマップウィジェットが最適です（Google Maps APIキーが必要です）。
はい。多くのWordPress Googleマッププラグインには、基本的なマップをカバーする無料プランがありますが、高度な機能は通常有料プランに限定されています。プラグインをインストールしたくない場合は、ネイティブのGoogleマップiFrameとGoogleマイマップがどちらも無料で利用できます。JotformのGoogleマップウィジェットも無料で使用でき、サーバー負荷を増やさずにカスタマイズや複数ピンのマップを追加できますが、Google Maps APIキーは必要です。
この記事は、埋め込み、プラグイン、カスタマイズ可能なウィジェットを使って、インタラクティブでモバイル対応のマップを追加する方法を比較したいWordPressサイトオーナー、地域ビジネス、不動産エージェント、イベントプランナー向けの内容です。
コメントの送信: