WordPressに複数のピンを備えたGoogleマップの作成方法

ウェブサイトにマップを追加すると、訪問者がビジネスやイベントの場所を簡単に見つけることができます。あなたのビジネスに複数の場所がある場合、それらすべてを同じマップに表示することをお勧めします。これは、Googleマップで複数のピンを使用することが役立つ可能性がある場合です。

あなたのウェブサイトがElementorで構築されている場合、Googleマップに複数のピンを追加するのに多くの手間をかける必要はありません。代わりに、好きなだけ簡単に追加できます。初心者であっても、プロセスは非常に簡単です。

この投稿では、WordPressの複数のピンを使用してGoogleマップを作成する方法に関する詳細なチュートリアルについて説明します。しかし、その前に、WordPressのWebサイトで複数のピンを備えたGoogleマップを使用する理由といつ使用する必要があるかについて、いくつかの単語をカバーします。

WordPressサイトに複数のピンを備えたGoogleマップを使用する理由

複数のピンを備えたGoogleマップを使用すると、さまざまな方法でWebサイトを改善できます。場所を表示するだけではありません。ユーザーがあなたの店を簡単に見つけることができるので、ユーザーがあなたのサイトをより便利にするのに役立ちます。ここにあなたがそれを考慮すべきいくつかの主な理由があります。

1.すべての場所を1か所に表示します

あなたのビジネスにいくつかの支店、店舗、またはオフィスがある場合、複数のピンがそれらをすべて1つのマップに表示するのに役立ちます。これにより、訪問者は、さまざまなマップやページを切り替えることなく、すべての場所を一目で確認しやすくなります。

2.ユーザーが最も近いスポットを見つけるのを助けます

ユーザーが1つのマップですべての場所を見ると、彼らに最も近い場所をすばやく見つけることができます。これは彼らの経験を改善し、あなたの店を訪れたり、予約を予約したりするなど、彼らがより速く行動を起こすのに役立ちます。

3.訪問者のために時間を節約します

各アドレスをプレーンテキストに1つずつリストする代わりに、ピンで視覚的に表示できます。これにより、あなたとあなたの訪問者の両方の時間を節約できます。また、サイトをよりプロフェッショナルでモダンに見せます。

4.ロケーションデータを使用してローカルSEOをブーストします

Googleマップは、ウェブサイトのローカルSEOを支援できます。マップに実際のアドレスを追加すると、検索エンジンにビジネスの場所について伝えます。これは、あなたのサイトがローカル検索結果に登場するのに役立つかもしれません。 HappyAddonsで地元のSEOを改善する方法を探ります。

5.サイトをよりインタラクティブにします

複数のピンを備えたマップは、単なるテキストよりもインタラクティブでダイナミックに見えます。訪問者はズームインし、ピンをクリックして、マップを探索できます。これにより、サイトにより魅力的でユーザーフレンドリーになります。

6.サービスベースまたはマルチブランチビジネスに最適です

レストラン、診療所、店舗、または配達ポイントのチェーンを運営している場合、複数のピンがあなたのリーチをはっきりと説明するのに役立ちます。上記のように、これは信頼を構築し、ユーザーが最も近いスポットを選択するのに役立ちます。

Elementorと複数のピンを使用してGoogleマップを作成するための前提条件

最初は一つのことを明確にしましょう。 Elementorには、 Google Mapと呼ばれるウィジェットが組み込まれています。しかし、その機能は非常に限られています。このデフォルトウィジェットを使用して、マップに複数のピンを追加することはできません。そのためには、追加のアドオンが必要です。

素晴らしい選択肢の1つはHappyAddonsです。 Advanced Googleマップと呼ばれるウィジェットを提供します。これにより、手間をかけずにマップに複数のピンを簡単に作成して追加できます。

したがって、合計で、このチュートリアルのためにサイトに次のツールが必要です。

• Elementor
• HappyAddons
• HappyAddons Pro

高度なGoogleマップはプラグインのプレミアムウィジェットであるため、 HappyAddons Proが必要です。それらがサイトにインストールされてアクティブ化されたら、以下に説明するようにチュートリアルに従ってください。 HappyAddonsの他のすべてのウィジェットを探索してください。

WordPressに複数のピンを備えたGoogleマップの作成方法：ステップバイステップチュートリアル

このセクションでは、ElementorとHappyAddonsプラグインを備えたWordPressに複数のピンを備えたGoogleマップの作成方法について説明します。必要なスクリーンショットでもこのセクションを飾るので、完全なプロセスを理解できます。読み続けてください！

ステップ01：ページを開き、高度なGoogleマップウィジェットを見つけます

複数のピンを備えたGoogleマップを作成する投稿またはページを開きます。 ElementorパネルでAdvance Googleマップウィジェットを見つけます。 Elementorキャンバスにドラッグアンドドロップします。

ステップ02：Google APIキーを取得します

ウィジェットがキャンバスに追加されたら、Googleマップを表示するために資格情報を構成するように求められます。これを開始するには、パネルの一般的な設定セクションの下のクレデンシャルオプションをクリックします。

WebサイトのバックエンドにあるHappyAddonsの資格情報セクションに移動します。 Googleマップオプションを見つけます。次に、 Get APIキーオプションを押します。

Googleクラウドページにアクセスします。

これで、「マップJavaScript API」を見つける必要があります。このため、タイプは検索ボックスにJavaScript APIをマップします。オプションが表示されたら、クリックします。

マップJavaScript APIページに来た後、オプションを有効にします。

ESM＆CONNINGボタンを押します。その前に、あなたはあなたの国を選ぶことができます。私たちは私たちのケースのためにそれを曖昧にしました。

Google APIキーは技術的に無料ではありません。 APIを取得するには、請求情報を記入する必要があります。

注（どのように無料であるか）：技術的には無料ではありませんが、月額200ドルに相当するトークンがかかりません。このトークンを使用すると、Googleマップを最大28,000回ロードまたは表示できます。このビュー/負荷制限が交差する場合にのみ、カードに充電されます。

その後、ポップアップが提供されます。このマップが使用される場合、ビジネスに関する情報を提供する必要があります。完了したら、ポップアップの右下隅にある[送信]ボタンをクリックします。

Google Map APIキーは、新しいポップアップで画面に即座に表示されます。 APIキーをコピーします。

HappyAddons Google APIキーキーオプションに戻り、コードを貼り付けてください。最後に保存変更ボタンを押します。

さて、あなたのElementor Canvasに来て、それを更新/リロードしてください。 Googleマップがキャンバスに表示されます。

Elementorを使用してWordPressでタイムラインを作成する方法を確認してください。

ステップ03：マップに複数のピンを追加します

デフォルトでは、マップに1つのピンのみが表示されます。マップにピンを追加して表示するには、パネルのマップマーカーセクションを展開します。

マップマーカーセクションが展開されたら、 +アイテムの追加ボタンをクリックして、必要なだけピンを追加できます。

これで、緯度と経度の値を配置することにより、各場所に正確にピンを正確に設定できます。

ステップ04：マップ設定を構成します

同様に、マップ設定セクションを展開します。

このセクションには多くのオプションがあります。

次に、デザインが必要とするものに最終的に留まることができるように、それらがどのように機能するかを確認して切り替えて各オプションを親切に検討してください。

WordPressで自動スクロール画像ギャラリーを作成する方法を学びます。

ステップ05：高度なGoogleマップウィジェットを様式化します

すべての設定とコンテンツパーツが完了したら、 [スタイル]タブにご覧ください。ここから、高さ、幅、ボーダータイプ、境界半径などをカスタマイズできます。

同様に、他のオプションも展開し、ピンの外観を変更するために必要なカスタマイズを行います。

ステップ06：デザインをプレビューします

オンラインで公開する前に、設計が完了したら、それをプレビューして、修正または変更が必要かどうかを確認します。以下に添付されているビデオクリップの端でウィジェットが正常に動作していることがわかります。

したがって、WordPressに複数のピンを使用したGoogleマップをElementorを使用して作成できます。

複数のピンを備えたGoogleマップの高度なヒント

Googleマップに複数のピンを追加したら、訪問者とウェブサイトのマップをより良く機能させるためにできることが増えます。これらの高度なヒントは、マップをよりプロフェッショナルに見せ、ユーザーエクスペリエンスを向上させ、地元のSEOの取り組みをサポートするのに役立ちます。

1.アイコンの代わりにカスタム画像を使用します

デフォルトの赤いピンの代わりに、各場所にカスタムアイコンまたは画像を使用してみてください。 HappyAddonsを使用すると、コンテンツタブ>マップマーカーセクションからこれを行うことができます。カスタム画像とアイコンは、マップをより視覚的に透明で魅力的にすることができます。

2。ズームとセンターの設定

マップのズームレベルと中央を調整して、すべてのピンを適切に表示します。一部のピンが遠く離れている場合は、ズームレベルが十分に広いことを確認して、マップがロードされたときにすべてが表示されるようにします。これにより、マップを手動で移動する必要なく、ユーザーが完全な概要を提供します。

3.モバイルに優しいものにします

マップがモバイルデバイスでどのように見えるかを常に確認してください。高速でロードされ、ピンがクリック可能であり、情報ボックスは小さな画面で読み取り可能であることを確認してください。デスクトップとモバイルの両方でうまく機能するマップは、より多くのユーザーを満足させます。

4.連絡先ページまたはロケーションページにマップを埋め込みます

1つのページにマップを残さないでください。 「Contact Us」、「私たちの場所」、「Visit Us」ページなどの他のページに埋め込むことで、同じマップを再利用できます。これにより、ユーザーはサイトのどこにいても適切な場所を見つけることができます。

Elementorを使用してWordPressで動的なWebページを作成する方法を学びます。

結論

複数のピンを備えたGoogleマップを作成することは、Webデザインの簡単なステップまたはパーツかもしれませんが、長続きする印象を与えることができます。訪問者があなたの場所を見つけるのに役立つだけでなく、地元のSEOスコアを高め、あなたのウェブサイトをより専門的に見せることもできます。

ElementorとHappyAddonsプラグインの助けを借りて、あまり面倒ではウェブサイトに簡単に追加できます。上記のチュートリアルに従うだけで、初心者でさえこれを行うことができるほど簡単です。まだ質問がない場合は、下のコメントボックスからお知らせください。

実行可能な返信ですぐにご連絡いたします。最後まで私たちと一緒にいてくれてありがとう。次の投稿で説明したいトピックをお知らせください。