完全ガイド：WordPressにGoogleマップを埋め込む方法

WordPressに単一のGoogleマップの場所を埋め込む方法

WordPressサイトにGoogleマップの場所を表示する最も基本的な方法から始めましょう。 単一の場所またはビューで地図を埋め込むだけの場合は、特別なツールやプラグインは必要ありません。必要なのは、Googleマップの埋め込みコードをWordPressサイトに貼り付けることだけです。

すべての仕組みは次のとおりです。

通常どおりGoogleマップのウェブサイトにアクセスして、埋め込みたい場所を検索します。 何でも検索できます。 あれは：

• 国全体
• 特定の都市
• 特定の事業
• あなたはそれに名前を付けます

それは本当に重要ではありません！

地図上に表示したい場所が決まったら、左側のサイドバーにある[共有]ボタンを探します。

小さなポップアップが表示されるはずです。 そのポップアップで[マップを埋め込む]オプションをクリックします。

次に、ドロップダウンから目的のサイズを選択します。 必要なサイズを選択したら、ボックス内のコードをコピーします。

次に、Googleマップボックスを埋め込むWordPressの投稿またはページに移動します。

WordPressエディターで、[テキスト]タブに切り替えて、Googleマップからコピーしたコードをマップを表示する場所に貼り付けます。

これで、通常のように投稿を公開すると、WordPressサイトのフロントエンドにGoogleマップボックスが表示されます。

簡単ですよね？

同様の方法を使用して、WordPressにGoogleマップのルート案内を埋め込むこともできます。 唯一の違いは、開始インターフェースです。 [共有]ボタンをすぐに表示する代わりに、ハンバーガーアイコンをクリックして、[共有]または[マップの埋め込み]オプションを選択する必要があります。

複数のロケーションマーカーを使用してGoogleマップをWordPressに埋め込む方法

複数のロケーションマーカーを含むGoogleマップボックスをWordPressに埋め込みたい場合は、状況が少し異なります。

次のセクションでは、これを実現するのに役立つ2つのGoogle Maps WordPressプラグインを紹介しますが、実際にはプラグインは必要ありません。

代わりに、Googleマイマップを使用して独自のマップを作成し、上記と同様の方法を使用してそのマップをWordPressに埋め込むことができます。

開始するには、Googleマイマップに移動し、[開始]をクリックしてインターフェースを起動します。 インターフェイスで、[新しいマップを作成する]オプションをクリックします。

次に、インターフェースを使用してマップを作成します。 始めるのは少し難しいかもしれませんが、一度コツをつかめば、使い方はとても簡単です。 検索ボックスを使用して物事を検索でき、[マーカー]ボタンを使用してマップにマーカーを追加できます。

マップに満足したら、上部の3つのドットアイコンをクリックして、[マイサイトに埋め込む]を選択します。

次に、前と同じように、Googleマップから提供されたコードをWordPressエディターの[テキスト]タブに貼り付けて、WordPressサイトに地図を表示できます。

Googleマップでの作業をさらに支援するWordPressプラグイン

上で示したような基本的なGoogleマップの埋め込みを処理するためのプラグインは実際には必要ありませんが、より柔軟性が必要な場合（または、その柔軟性を実装するためのよりユーザーフレンドリーな方法が必要な場合）にプラグインが役立ちます。

ほとんどのプラグインは、十分なエルボーグリースを使用して自分で実行できないことを実際には実行しませんが、ヘクバをはるかに簡単でユーザーフレンドリーにします。 Googleマップでの作業を改善するのに役立ついくつかの優れたプラグインを次に示します。

WPグーグルマップ

WP Google Mapsは、WordPress.orgプラグインディレクトリで最も人気のある無料のGoogleMapsプラグインです。

選択したマップマーカーとさまざまなマップテーマを使用して、独自のカスタムGoogleマップディスプレイを作成するのに役立ちます。 基本的に、これは先ほど概説したプロセスのよりユーザーフレンドリーな実装です。

唯一の欠点は、無料バージョンでは1つのマップしか作成できないことです。 複数のマップが必要な場合は、プレミアムバージョンを購入するか、別のソリューションを使用する必要があります。

開始するには、WPGoogleマップをインストールしてアクティブ化します。 WordPress.orgにリストされているため、WordPressダッシュボードから直接行うことができます。

有効にしたら、サイドバーの新しい[マップ]オプションに移動して開始します。

ただし、最初のマップを作成する前に、Google Maps JavaScript APIキーを取得して、プラグインの設定に入力する必要があります。 あなたはこれらの指示に従うことによってそれをすることができます：

APIキーを入力すると、デフォルトのMy firstマップを編集できます（覚えておいてください-このプラグインの無料バージョンでは、1つのマップしか作成できません）。

インターフェースを使用してマップを作成します。 次に、終了したら、ショートコードを使用してサイトのどこにでも埋め込むことができます。

これは非常に簡単で柔軟性があります。唯一の欠点は、無料バージョンでの1つのマップの制限です。

マップビルダー

WordPressプラグインを使用してGoogleマップの埋め込みを作成するためのもう1つの優れたオプションは、マップビルダーです。

プラグインをインストールしてアクティブ化すると、ダッシュボードのサイドバーに新しいGoogleマップタブが表示されます。 WP Google Mapsと同様に、プラグインを開始する前に、GoogleMapsAPIキーを追加する必要があります。

それが済んだら、 Googleマップ→新規追加に移動して新しいマップを作成できます。 そのインターフェイスで、[マップビルダーを開く]ボタンをクリックして、ユーザーフレンドリーなインターフェイスを起動します。

そこで、プラグインのサイドバーを使用してマップを作成できます。

終了したら、プラグインによって作成されたショートコードを使用して、WordPressサイトの任意の場所にマップを埋め込むことができます。

WPストアロケーター

特にGoogleマップを使用してWordPressサイトに複数の店舗の場所を表示したい場合（一般的な要望です！ ）、専用の店舗検索プラグインを使用することをお勧めします。

これを行うためのプラグインをいくつか見つけることができますが、柔軟性があり見栄えがよいWPStoreLocatorが好きです。

お気に入りのページビルダーのGoogleマップモジュールを使用する

ほとんどのWordPressページビルダーには、Googleマップのコンテンツをデザインに埋め込むのに役立つ専用のGoogleマップ要素/モジュールが含まれています。

たとえば、人気のあるDivi Builderプラグインには、プラグインのインターフェースを介してかなりカスタマイズできるGoogleマップモジュールが含まれています。

したがって、すでにページビルダーを使用している場合は、専用のGoogleマッププラグインを探す前に、ページビルダーにGoogleマップツールがあるかどうかを確認してください。

上級ユーザー向けの楽しい調整

この方法は高度であり、コードの知識が必要です。したがって、初心者の場合は、これを無視してかまいません。

ただし、WordPressとカスタムフィールドの使い方を知っている場合は、カスタムフィールドを使用して、GoogleマップのマップURLスキームに基づいてマップを自動的に作成できます。

たとえば、WordPressバックエンドにフィールドを作成して、ユーザーがアドレスを場所に貼り付けるだけで済むようにすることができます。

次に、スペースを削除するための少しの前処理で、テーマのテンプレートファイルのiframe内の以下のようなアドレスにそのアドレスを挿入できます。

そして出来上がり！ ユーザーが行う必要があるのは、WordPress Editorに住所を入力することだけで、Googleマップの埋め込みがその場所のフロントエンドに自動的に表示されます。

繰り返しになりますが、この方法にはPHPとカスタムフィールドの基本的な知識が必要ですが、時間を節約するためのクールなハックです。

まとめ

通常のGoogleマップの場所をWordPressに埋め込むなどの基本的なことをしたいだけでも、複数のマップマーカーや自動マップ作成でさらに高度なことをしたい場合でも、たくさんのオプションがあります。

単一のマップを埋め込む場合は、プラグインをスキップして、通常のGoogleマップの埋め込みコードを使用することができます。 ただし、複数の場所で地図を作成し、スタイルを簡単に制御したい場合は、2つのGoogleマッププラグインが適しています。

最後に、ページビルダーを使用している場合は、外部ソリューションを使用する前に、Googleマップ要素が既に存在するかどうかを必ず確認する必要があります。