WordPress サイトに Google マップを追加する方法 (最も簡単な方法)

Web サイトに Google マップを追加すると、訪問者があなたのビジネスの場所を見つけやすくなるだけでなく、プロ意識と機能性も追加されます。 

しかし WordPressサイトにGoogleマップを追加する方法? 🤔

心配しないで！最も簡単な方法を紹介します。

• WordPress プラグイン (ElementsKit) の使用

なぜ ElementsKit を使用するのかと疑問に思われるかもしれません。 

まあ、それはあなたがちょうど挿入できるGoogleマップウィジェットを提供します ドラッグアンドドロップ。また、あなたは得ます 膨大なカスタマイズオプション Google マップをカスタマイズして、希望どおりに表示できるようにします。したがって、これを実現するためにコーディングの専門家である必要はありません。

飛び込んでみましょう！ 🥳

Google マップとは何ですか?

Google マップは、Google が開発した Web 地図サービスです。 正確な位置と方向を表示する あらゆるアドレスに対応します。 🗺️

Google マップは、Google が開発した Web 地図サービスです。 正確な位置と方向を表示する あらゆるアドレスに対応します。衛星画像、市街地図、 360°のパノラマビュー 通りの。さらに、Google マップはリアルタイムの交通状況も提供します。 最適なルート計画 徒歩、車、自転車、公共交通機関での移動の場合。 🛣️🚦

では、Google マップはどのように機能するのでしょうか? Google マップは主に 衛星画像と地上画像の完全な組み合わせ。同時に、検証プロセスを進めるためにユーザーからのフィードバックを継続的に収集し、常に変化する情報を常に最新の状態に保ちます。 リアルタイムの状況。 ⏳

5 つのステップで WordPress サイトに Google マップを追加する方法 

Google マップを WordPress に統合する最も簡単な方法は、WordPress プラグインを使用することです。手動で統合することも可能ですが、プラグインなしですべての機能とカスタマイズ オプションを入手するのは困難です。

Google マップを WordPress サイトに追加するには、 ElmenetKit WordPress プラグイン が最良の選択です。これは、WordPress Web サイト用の究極のオールインワン Elementor アドオンであり、すでに 100 万を超えるアクティブなインストールのマイルストーン。 

あなたは得ます 85+ カスタムElementorウィジェット Googleマップと一緒に。複数のタイプのマップ スタイルを使用すると、好み、Web サイトのタイプ、ユーザーのニーズに確実に適合する多数のカスタマイズ オプションが見つかります。

シンプルなものを探ってみましょう ElementsKit プラグインを使用して WordPress サイトに Google マップを追加する 5 つのステップ! 🙌 

✨✨ 要件 
✅ エレメンター – エレメンターをダウンロード
✅ ElementsKit Lite – ElementsKit Lite をダウンロード
✅ ElementsKit プロ – ElementsKit Pro を入手
✅ Google マップ API – Google Map APIを入手する

ステップ 1: ElementsKit プラグインをインストールする 

ElementsKit のインストールプロセスは、WordPress の他のプラグインのインストールと似ています。直接インストールしてアクティベートすることも、プラグインの zip ファイルをアップロードしてからライセンスをインストールしてアクティベートすることもできます。 ElementsKit をインストールするには、 

• WordPress ダッシュボードに移動します 
• クリック プラグイン ➔ 「新規追加」 
• ダウンロード ElementsKit WordPress プラグイン ファイルを圧縮してアップロードします 
• または、検索してください ElementsKit アドオン  検索ボックスに
• 次に、をクリックします "インストール"
• インストールしたら、 をクリックします "活性化"

🎯 Google マップ機能は プロウィジェット ElementsKit を使用するには、プレミアム パッケージを購入し、ライセンスをアクティベートする必要があります。 

👉 こちらがドキュメントガイドです ElementsKit Pro ライセンスを購入してアクティベートする方法. 

ステップ 2: Google Map API キーを生成する

さて、次のことを行う必要があります。 Google Map APIキーを生成する WordPress サイトに接続します。 Google Maps API (アプリケーション プログラミング インターフェイス) は、 ユニークなコード Google マップの機能を独自の Web サイトや他のアプリケーションに統合して利用するために Google から与えられたものです。 

• 案内する Cloud コンソールで設定する
• クリック 「新しいプロジェクトを作成」

• あなたのことを書いてください プロジェクト名 そして 位置 
• クリック "作成する"

• ハンバーガーメニューにリダイレクトされます
• を選択 "APIとサービス」 オプション
• クリック 「API とサービスを有効にする」

• 検索 地図 検索ボックスに
• または、  「マップJavaScript API」

• プレミアム プランをお持ちでない場合は、次のことを行う必要があります。 アカウントを設定する 必要な情報（国、カードの詳細、請求先住所など）を添えて

• 次に、 マップJavaScript API 
• さあ、に行ってください Google Maps Platform ➔ 認証情報ページ
• を選択 プロジェクト または作成することもできます 新しいプロジェクト ここから
• クリック 「認証情報の作成」、そしてそれは新しいものを生成します APIキー あなたのために

• 次に、クリックします 認証情報の作成 ➔ API キー
• Google マップ用に新しく作成された API キーが、[認証情報] ページの [API キー] の下にリストされていることを確認できます。
• コピー APIキーはこちらから
• 「閉じる」をクリックします

❗❗忘れずに APIを制限する WordPress ウェブサイトで使用する前にキーを確認してください❗❗

ステップ 3: Google Map API キーを ElementsKit に接続する 

さて、次のことを行う必要があります。 新しく作成した Google Map API キーを接続します あなたのWordPressウェブサイトに。これを行うには、ElementsKit の Google マップ セクションに API キーを貼り付ける必要があります。 

• WordPress ダッシュボードに移動します 
• クリック 「エレメンツキット」 
• に行きます 「ウィジェット」 オプション
• 下にスクロールすると、Google マップ ウィジェットが表示されます  
• オンにします "グーグルマップ" ウィジェット 
• クリック "変更内容を保存"

• ナビゲート  「ElementsKit」➔「ユーザー設定」
• 下にスクロールして、 "グーグルマップ" オプション 
• APIキーを貼り付けます 入力欄に 
• クリック "変更内容を保存"

ステップ 4: Google マップ ウィジェットをページ/投稿内にドラッグ アンド ドロップします。

ここで、ドラッグ アンド ドロップだけで WordPress サイトに Google マップを追加する方法を見てみましょう。

• 新しいを作成します ページ/投稿 または既存のページ/投稿を開きます 
• クリック 「エレメターで編集」 
• を検索してください "グーグルマップ" Elementetkitのウィジェット 
• ドラッグアンドドロップ 地図を表示したいブロック内のウィジェット

🟢 注: 複数のマップを追加し、同じウィジェットを使用して個別にカスタマイズできます。 Elementor ブロックを選択し、Google マップ ウィジェットをドラッグ アンド ドロップするだけです。 🟢

ステップ 5: Google マップの設定をカスタマイズする 

最後のステップは、好みに応じて Google マップをカスタマイズすることです。 ElementsKit は、次のような多数のカスタマイズ オプションを提供します。 コンテンツ、スタイル、詳細設定 レイアウト、モーション効果、応答性、カスタム CSS など。 

WordPress ウェブサイトで ElementsKit のカスタマイズ オプションを使用して Google マップをカスタマイズする方法を見てみましょう。 

コンテンツのカスタマイズ 

このセクションでは、地図の種類と住所の種類を選択し、カスタムの緯度と経度を設定して、Web サイトに表示する住所を追加できます。また、マップ マーカー、コントロール、テーマのカスタマイズ オプションもあります。 

🌎 マップの種類 

ElementsKit は、この 1 つのウィジェットから多用途のマッピング プラットフォームを提供します。ドロップダウン セクションからマップ タイプを選択できます。 

• [設定] ➔ [マップ タイプの選択] をクリックします。  

ここで入手できます Googleマップは7種類、 のような：

1️⃣ 基本: 基本的な Google マップ機能を使用すると、Web サイト ユーザーは次のことができます。 場所を検索し、 地図を表示し、さまざまな目的地への道順を取得します。 

初心者で、マーカー付きのシンプルな Google マップを WordPress ウェブサイトに追加したい場合は、基本的なマップ タイプを選択してください。 

2️⃣ 複数のマーカー: 複数の Google マップを使用することは、旅行を計画したり、さまざまな場所をハイライトしたりする場合に最適です。ウェブサイトの訪問者は、 複数の点にマークとラベルを付ける 単一のマップ上で興味深い情報を得ることができます。 

3️⃣ 静的: ElementsKit の静的マップ機能を使用すると、ユーザーがマップの静的画像を生成できるようになります。このタイプのマップは、必要に応じて WordPress Web サイトに埋め込むことができます。 オフライン表示を共有する. 

4️⃣ ポリライン:  WordPress サイトでポリライン タイプの Google マップを使用して、ユーザーが作成および表示できるようにしている 地図上の線 ルート、境界、または特定の関心領域を表示します。

5️⃣ 過剰: ElementsKit の Google マップ ウィジェットは、オーバーレイ統合機能もサポートしています。このタイプのマップを使用すると、オーバーレイを表示できます 追加データ 気象情報、交通状況、カスタム レイヤーなどを地図上に追加して視覚化を強化します。 

6️⃣ ルートの場合: ElementsKit のルート マップを使用すると、Web サイトの訪問者は自分のルート マップを入力できます。 出発地と目的地 ターンバイターンごとの詳細な道順を取得します。さらに、推定移動時間とリアルタイムの交通状況の最新情報を確認できます。 

これは、現在地からの距離を確認するのに役立ちます。また、Web サイトに複数のオフィス/支店の住所を追加する必要がある場合に適しています。

7️⃣ パノラマ: ElementsKitのGoogleマップウィジェットを使用してパノラマビューを表示することもできます。ストリート ビューとしても知られるパノラマ ビューは、ユーザーに次のような情報を提供します。 360度バーチャル さまざまな場所のツアー。これにより、Web サイトの訪問者は、あたかも物理的にその場にいるかのように場所を探索できるようになります。

👉👉 マップのカスタマイズの各タイプの詳細については、このドキュメントを確認してください – WordPressサイト内のGoogleマップ.

📌 住所の種類 

タイプごとに、アドレスとしてアドレス タイプを選択できます。 地名を直接書く または、それぞれの住所の緯度と経度を設定します。 

ただし、緯度と経度は、 地理的座標 地球の表面上の特定の場所を表すため。 

緯度は点の距離の測定値です 北か南か 一方、経度は点の距離の測定を定義します 東か西か 本初子午線の。

緯度と経度を取得します。 

• に行く https://www.google.com/maps/
• を検索してください 名前 あなたの場所の
• 右クリック 地図上のピンポイントで
• ご覧いただけます。 緯度（左）と経度（右）の値
• 今 コピー 緯度と経度
• 次、 ペースト それらを入力フィールドに入力します

🔖 マーカー設定 

ここでは、タイトル、コンテンツ、アイコンなどを使用して場所をマークするオプションをカスタマイズできます。 

• 追加 Googleマップのタイトル 誰かがあなたの場所を検索しているときに名前を表示するには
• 1～2行の内容を書きます 住所を説明する 地図上にマウスを置いたとき 
• トグルを有効にして追加します カスタムマーカーアイコン
• マーカー アイコンをアップロードすると、会社のロゴやその他のアイコンを使用してアイデンティティを説明できます 
• セット カスタムの幅と高さ マーカーアイコンの場合 

🟢 複数のマーカー タイプの Google マップの場合、場所ごとに複数のアイコンをアップロードしてカスタマイズできます。 🟢

🎛️ コントロール

この設定から、ズーム レベル、ストリート ビュー、地図の種類、地図のスクロールなどを制御できます。 

• ズームレベルの制御: 任意の数値を入力してズーム レベルを定義します。
• ストリートビューコントロールを有効にする: ストリートビューで地図を表示できるようにします。
• マップ タイプ コントロールをオンにします。 オンにすると、ユーザーがマップ タイプ (道路地図、衛星など) を制御できるようになります。
• ズーム制御を有効にする: オンにすると、マップを拡大 (+) および縮小 (-) するためのズーム コントロール アイコンが追加されます。
• 全画面制御を有効にする: このオプションをオンにすると、ユーザーはマップを全画面モードで表示できるようになります。
• スクロール ホイール ズームを有効にする: スクロール コントロール ホイールを有効にすると、上下のクリックごとにズーム率が 10% ずつ増減します。

🎨 テーマ

Google マップのテーマのソースとスタイルをカスタマイズできます。また、カスタム テーマを追加できる場合は、ElementsKit Google マップ ウィジェットで追加できます。 

✨ Google標準テーマソース 

• テーマをクリック ➔ テーマを選択します ソースタイプ: Google 標準  
• ドロップダウン セクションから標準のテーマ スタイルを選択します。
  • スタンダード、シルバー、レトロ、ダーク、ナイト、オーベルジン

✨ Snazzy Maps テーマのソース 

• さまざまな配色を追加したい場合は、Snazzy Map が最適です。 
• テーマをクリック ➔ テーマを選択します ソースタイプ: Snazzy Maps
• ドロップダウン セクションからスタイルを選択します。
  • デフォルト、シンプル、カラフル、複雑、ダーク、グレースケール、モノクロ、ラベルなし、ツートーン 

✨カスタムテーマ

• 好みやニーズに応じてカスタム テーマを追加することもできます。 
• を選択してください テーマソース ➔ カスタム
• 指定されたフィールドにカスタムテーマスタイルを追加します 
• クリック "ここをクリック" 選択したスタイルの JSON スタイル コードを取得するには 

スタイルのカスタマイズ

Web ページのデザインに基づいてカスタムの高さ、幅、地図の配置を柔軟に設定できます。 

➡️身長: マップのカスタム高さを設定する

➡️幅: 好みに応じて幅を調整してください

➡️ アライメント: Google マップの配置を左、右、中央に設定します

高度なカスタマイズ 

マップ レイアウトのすべてのスタイルとその他の機能を制御し、ElementsKit Google マップ ウィジェットの詳細設定からカスタマイズできます。 

⏺️ のカスタム値を設定します。 全体のレイアウト 幅、マージン、パディング、位置、および Z インデックス 

⏺️セット モーションエフェクト 入力フィールド用 (例: ズームイン、ズームアウト、フェードイン、フェードアウトなど)

⏺️ レイアウトを選択してください 背景の種類と色

⏺️ をカスタマイズする 境界線のタイプ、半径、マスク、デバイスの応答性 (PC、タブ、モバイル)

⏺️挿入 属性とカスタムCSS 追加機能用 

WordPress ウェブサイトに Google マップを挿入する 5 つのメリット 

Google マップをウェブサイトに追加すると、多くの利点が得られます。ここにあります 5大メリット WordPress ウェブサイトに Google マップを統合する方法:

1. ビジネスの可視性を高める 

訪問者があなたのウェブサイトにアクセスすると、Google マップはあなたの位置情報を確認するのに役立ちます。 明確なアイデアを提供する あなたのビジネスの所在地の情報。 

この機能は、物理的な店舗やオフィスを持つビジネスに特に役立ちます。したがって、複数のブランチがある場合は、それらを 1 つのマップ上で紹介できます。 

これにより、顧客は新しい支店や近くの支店を見つけることができます。マーカーをクリックするだけで、各場所の住所と道順を確認できます。 

結果として、あなたの能力を高めることができます 潜在顧客に対するビジネスの可視性 WordPress サイト上で。 

2. 正確な道順を提供します 

Google マップを WordPress ウェブサイトに組み込む主な利点の 1 つは、 正確な指示を提供する あなたのビジネスに。訪問者は現在地を入力すると、あなたの場所までの詳しい道案内を受け取ることができます。 

土地勘のないお客様や公共交通機関をご利用のお客様にとって大変便利な機能です。正確な道案内により、潜在的な顧客が貴社のビジネスに簡単にアクセスできるようになります。 面倒や混乱もなく。 

3. ローカル SEO を紹介する

ローカル検索エンジンの最適化 (SEO) これは、特定の地理的エリアをターゲットとするビジネスにとって非常に重要です。 Google マップを WordPress ウェブサイトに統合すると、検索結果にビジネスの場所を表示できます。 

最近の研究によると、およそ すべての検索のうち 46% にはローカル インテントが含まれています。これは、インターネット ユーザーが最も近くにあるビジネス、サービス、製品を探していることを示しています。

Google マップを追加すると、 ローカルパックまたはマップパック。 これは、検索クエリに関連する地元のビジネスを含む地図を表示する検索結果のセクションです。 

その結果、この膨大なローカル検索ユーザー層を活用し、ローカル顧客を引き付ける可能性を高めることができます。 

4. イベント計画の促進 

Google マップを WordPress サイトに統合すると、 イベント企画のプロセス あなたとあなたの出席者の両方にとって、あらゆるビジネスイベントや集まりに最適です。イベント ページに地図を埋め込んで、 正確な位置と道順 会場へ。 

この意志 訪問者の時間と労力を節約します 会場は別途お探しいたします。さらに、近くの公共交通機関の停留所、駐車場、宿泊施設のマーカーを含めることで、出席者が訪問を計画しやすくなります。 

5. 信頼、信頼性、ユーザーエクスペリエンスの向上 

最後に重要なことですが、Google マップに住所があれば、訪問者の間で信頼を築くことができます。それ 透明度を示します そして顧客にあなたの存在を視覚的に証明します。 

さらに、訪問者があなたの所在地を簡単に確認できる場合、特にあなたの所在地に関連する肯定的なレビューや評価を見つけられる場合、訪問者はあなたのビジネスを信頼する可能性が高くなります。

また、WordPress サイトに Google マップを追加すると、 ブランドを確実に高める また、ビジネスの場所を正確に指示することでユーザー エクスペリエンスをスムーズにします。これにより、ユーザーが外部の地図サービスで道順を調べたり、お店やサービスを検索したりするためにプラットフォーム間を切り替える必要性が軽減されます。 

訪問者をウェブサイトに留めておくことで、 シームレスな体験、 コンバージョンの可能性と顧客満足度を高めます。

🔔 こんな記事も読まれています – WordPress でニュースティッカーを作成する: 3 つの簡単なステップ

WordPress で Google マップを使用するための 5 つのベスト プラクティス

ここにあります 5 つのベスト プラクティス WordPress サイトで Google マップを使用してユーザー エクスペリエンスを向上させ、SEO の競争に先んじることに対して。 

✔️ 地図を適切に配置する

マップを適切に配置することは、使いやすさと 検索エンジン最適化 (SEO)。たとえば、現在地の地図を お問い合わせページまたはフッター。 

Web サイトに地図を配置するための厳密なルールはありません。ただ、地図を適切な場所に配置する必要があります。 訪問者にとって簡単 見つけて使用します。  

✔️ マップの読み込み時間とパフォーマンスを最適化する

持っていることを確認してください ロード時間を最適化しました 地図の。なぜなら、地図の読み込みが遅いと訪問者がイライラする可能性があり、SEO にも悪影響を与える可能性があるからです。 

を使用できます 軽量の Google マップ プラグイン ElementsKit などのすべてのカスタマイズ オプションを使用できます。プラグインの代わりに別の方法を使用する場合、 JavaScript と CSS を縮小して圧縮する Google マップをウェブサイトに公開する前に、ファイルを作成してください。 

✔️ モバイルデバイスのレスポンシブデザインを確保

デバイスの応答性は必須です。マップのサイズとレイアウトが自動的に調整されることを確認してください。 あらゆる画面サイズにフィット 例: PC、タブ、携帯電話。 

これは、訪問者が確実に 良い経験 PC や大画面だけでなく、モバイル デバイスでも地図を表示できます。

✔️ Google Maps API の利用規約を確実に遵守する

Google マップには、 一連の利用規約 それらに同意して従う必要があります。 

これらの利用規約は、Google マップの使用方法とその他のルールに関するものです。したがって、重要なことは、 それらを注意深く読んでください API を使用する前に。

✔️ Google マップ プラグインの最新バージョンを維持する

Google マップは、API の新しいバージョンを定期的にリリースします。これらのリリースには以下が含まれます 新機能とバグ修正。 

したがって、Google マップ プラグインを維持することが重要です 最新の 最新バージョンの API を使用していること、および新機能を見逃していないことを確認してください。

📢 こちらもご覧ください – WordPress 6.2 の新機能: 11 の主な機能とその先!

よくある質問

WordPress ウェブサイトに追加することが重要なのはなぜですか? 

Google マップを WordPress Web サイトに追加すると、Web サイトのローカル SEO が向上し、訪問者の信頼を築き、Web サイトのトラフィックが増加し、訪問者により良いユーザー エクスペリエンスを提供できます。

WordPressでGoogleマップのショートコードを作成する方法?

WordPress で Google マップのショートコードを作成するには、 

• 案内する グーグルマップ
• 希望の場所を検索 
• 案内する  「シェア」➔ 「地図を埋め込む」
• コピー 埋め込みHTMLコード
• 次に、既存のページ/投稿を作成するか開きます
• 新規追加 カスタムHTMLブロック
• ペースト このブロックの埋め込みコード
• この埋め込まれた iFrame コードは次のようになります。 ショートコードに変換される ページまたは投稿を編集するとき

WordPress サイトに Google マップを追加する方法 プラグインなしで？

使用できます Googleマイマップ 新しいマップを作成すると、プラグインをインストールせずに基本的なマップ機能を WordPress Web サイトに追加できます。さらに、デフォルトの iFrame/ショートコード メソッドを使用して、好みの場所の Google マップの HTML コードを Web ページに埋め込むことができます。 

私の WordPress サイトで Google マップが機能しないのはなぜですか?

不適切な API キー構成、認証の問題、または他のプラグインやテーマとの競合により、WordPress サイトでは Google マップが機能しない場合があります。そのため、API キーの設定を確認し、更新されたバージョンのプラグインを使用し、他のプラグイン/テーマとの互換性を確保することをお勧めします。

急いでください

ビジネスの認知度を高め、訪問者の信頼を築き、ローカル SEO を強化し、Web サイトへのトラフィックを増やすには、次のことを追加します。 Google マップから WordPress サイトへ は効果的な解決策です。

そして、「WordPress サイトに Google マップを追加する方法」はロケット科学ではないことがわかりました。上記に従ってください ElementsKit と Google Map API を使用する 5 つのステップを使用すると、単一または複数の場所の地図を Web サイトに簡単に統合できます。 Google マップをサイトに統合する際には、ベスト プラクティスに従っていることを確認してください。 

ご質問やご提案がございましたら、お知らせください。喜んでご連絡させていただきます。読んでくれてありがとう！