WordPressのディレクトリWebサイトにロケーション検索を簡単に追加する方法

公開: 2021-02-15

ディレクトリWebサイトを改善するにはさまざまな方法があり、そのうちの1つは位置情報ベースの検索を有効にすることです。 Yelp、TripAdvisor、Craigslist、またはロケーションベースの検索を必要とするその他の同様のWebサイトに類似したディレクトリまたは求人サイトを運営している場合は、Googleマップと統合することで簡単にこれを行うことができます。 一部のユーザーは、自分の地域の製品、サービス、または場所を検索できるため、これは不可欠な機能です。 また、Googleマッププラットフォームには無料の月間制限があり、ウェブサイトのトラフィックが中程度の場合はこれで十分です。

このステップバイステップのチュートリアルでは、ディレクトリWebサイトに場所検索を追加する方法を説明します。 無料のWordPressプラグインであるHivePressを使用して、ディレクトリWebサイトを一瞬で作成できるようにします。 また、無料のWordPressディレクトリテーマであるListingHiveと、Googleマップとの統合のためのHivePressGeolocation拡張機能を使用します。

ただし、別のプラグインまたはテーマで作成されたディレクトリWebサイトがすでにある場合は、最初の手順をスキップして、「修正方法」までスクロールできます。 何かがうまくいかなかった。 最も一般的なエラーのトラブルシューティングについては、このページでGoogleマップが正しく読み込まれませんでした。

それでは、最初のステップに移りましょう!

HivePressのインストール

まず、HivePressをインストールする必要があります。 WordPressの他の無料プラグインと同じようにインストールできます。 [プラグイン]>[新規追加]セクションに移動し、検索バーで検索して、インストールし、[アクティブ化]ボタンをクリックして最後にアクティブ化します。 インストールが完了したら、次のステップである拡張機能のインストールに進むことができます。

また、難しい場合は、以下のスクリーンキャストに従って、WordPressダッシュボードから直接HivePressをインストールできます。

拡張機能のインストール

次のステップは、Geolocation拡張機能をインストールして、ユーザーが場所でリストを検索できるようにすることです。 インストールするには、HivePressセクションにカーソルを合わせ、[拡張機能]リンクをクリックします。 リストからGeolocation拡張機能を見つけ、[インストール]ボタンをクリックして、最後に拡張機能をアクティブにします。

また、次のスクリーンキャストは、HivePress拡張機能をインストールする一般的なプロセスを示しているため、段階的に実行できます。

新しいプロジェクトの作成

プラグインのインストールとGeolocation拡張機能が完了したら、GoogleCloudPlatformでプロジェクトを作成します。 すでにGoogleアカウントをお持ちの場合は、問題なくこのダッシュボードにアクセスできるはずです。 ただし、お持ちでない場合は、Googleアカウントにサインアップする必要があります。

次に、「プロジェクトの作成」ボタンをクリックしてプロジェクトを作成し、名前を付けて、最後に「作成」ボタンをクリックする必要があります。

GoogleCloudPlatformで新しいプロジェクトを作成します。

請求の設定

現在、Googleの請求先アカウントをお持ちでない場合は、プロジェクトの請求を有効にするために新しいアカウントを作成する必要があります。 ただし、心配しないでください。今は何も支払う必要はありません。これは、GoogleMapsAPIを使用するための要件の1つにすぎません。 リンクをたどって、支払い方法の詳細を含むすべてのフォームフィールドに入力するだけです。

毎月200ドルの無料クレジットを獲得できます。ほとんどの場合、ウェブサイトでGoogleサービスを使用するための費用を賄うには十分です。 また、制限や通知を設定できるので、無料クレジットを超えることはありません。 価格をチェックして、それがどのように機能するかをよりよく理解し、マップを無料で使用できることを確認できます。

請求情報を追加すると、有効にするAPIの種類を示すポップアップウィンドウが表示されます。 下のスクリーンショットのように[マップと場所]を選択し、[有効にする]ボタンをクリックします。 また、ポップアップウィンドウがない場合は、GoogleAPIライブラリページからこれらのAPIを有効にできます。

GoogleAPIを有効にします。

APIキーの作成

次のステップは、WebサイトのAPIキーを作成することです。 これを行うには、[資格情報]ページに移動して、プロジェクトを選択します。

APIキーを作成します。

[資格情報]ページで、すでに生成されたAPIキーを確認できます。 請求先アカウントを作成したばかりの場合は、キーが自動的に生成される場合があります。 この場合、クリックするだけで編集できます。 ただし、ページにAPIキーがない場合は、 [資格情報の作成]>[APIキー]セクションで新しいキーを作成できます。

APIキーを作成する方法の例。

次に、アプリケーション制限を設定してAPIキーを設定する必要があります。 キーを埋め込むだけで、Webサイトのソースコードにプレーンテキストで表示されるため、これは不可欠です。 そのため、他の人が自分のプロジェクトにAPIキーを使用できないように、これを制限する必要があります。 これを行うには、HTTPリファラーを追加して、WebサイトからのAPIリクエストのみを許可します。 ウェブサイトのアドレスを設定するだけでなく、最後に「/ *」の部分を追加して、ウェブサイトのサブページからのAPIリクエストを許可します。これにより、Googleマップはウェブサイトのすべてのページで機能します。

アプリケーションの制限を追加する方法の例。

次に、次のフィールドでAPI制限を設定する必要があります。 [制限]キーをクリックし、ドロップダウンメニューから[ Maps JavaScript API]、[Places API]、[GeocodingAPI ]を選択します。 上記のAPIの一部がリストされていない場合は、最初にMapsAPIライブラリページでそれらを有効にする必要があります。 3つのGoogleAPIがすべて有効になり、ドロップダウンメニューで選択されたら、[保存]ボタンをクリックします。

API制限を追加する方法の例。

Googleマップ統合の有効化

それでおしまい! APIキーを作成しました。最後の仕上げは、ウェブサイトでGoogleマップを有効にすることです。 まず、 [APIとサービス]>[認証情報]ページでAPIキーをコピーします。 ここで、HivePressプラグインを使用している場合は、WordPressダッシュボードに移動し、 [HivePress]>[設定]>[統合]>[Googleマップ]セクションに移動します。 次に、APIキーを適切なフィールドに貼り付け、[変更を保存]ボタンをクリックして、Webサイトに場所の検索を追加します。

WordPressのウェブサイトに位置検索を追加する方法の例。

おめでとうございます! この瞬間から、あなたのウェブサイトはグーグルマップと統合され、今ではリストセクションで既存のリストに場所を追加することができます。 また、ユーザーは新しく追加されたリストの場所を設定する必要があります。 さらに、あなたのウェブサイトとグーグルマップに場所検索フィールドがあるので、あなたはそれを試して、それらの場所でいくつかのリストを検索することができます。

WordPressで構築されたWebサイトでのロケーションベースの検索。
ロケーションベースの検索機能の例。

トラブルシューティング

作成したAPIキーに問題がある場合、マップに「おっと! 何かがうまくいかなかった。 このページはGoogleマップを正しくロードしませんでした」エラー。 APIキーの設定はあまりユーザーフレンドリーなプロセスではなく、ユーザーは設定手順の一部をスキップすることが多いため、これは非常に一般的なエラーです。 ただし、問題の原因がわかっていれば、すぐに修正できます。

そのエラーの理由を見つけるには、JavaScriptコンソールを開く必要があります。 ブラウザによって異なるいくつかのキーストロークで開くことができます。 JavaScriptコンソールを開く方法を説明しているStackOverflowの回答を確認してください。 Chromeブラウザを使用している場合は、 CTRL+Shift+Iを押すだけで開くことができます。 開くと、次のようなエラーメッセージが表示されます。

「おっと!何かがうまくいかなかった。このページはGoogleマップを正しくロードしませんでした」エラー

エラーの原因を正確に把握して、エラーを修正できるようにすることが重要です。 いくつかの異なるエラーが発生する可能性がありますが、最も頻繁に発生するエラーを解決する方法を示します。

  • MissingKeyMapError;
  • InvalidKeyMapError;
  • ApiNotActivatedMapError;
  • RefererNotAllowedMapError。

ただし、上記にリストされていないエラーがある場合は、Google Maps APIのエラーメッセージのドキュメントを確認して、何が問題であり、どのように修正するかを確認してください。

MissingKeyMapError

このエラーは、APIキーがまったくないことを意味します。そのため、WebサイトでGoogleマップを有効にする場合は、APIキーを作成する必要があります。 このエラーが発生した場合は、APIキーを作成し、マップを正しく設定するために、最初のステップからこのチュートリアルに従うことをお勧めします。

InvalidKeyMapError

このエラーは、間違ったAPIキーを使用している場合に表示されます。 おそらくあなたはそれを作成しましたが、あなたのウェブサイトに正しく追加しませんでした。 このエラーを修正するには、[資格情報]ページに移動し、APIキーをコピーします。

GoogleAPIキーの例。

HivePressプラグインとそのGeolocation拡張機能を使用している場合は、 [WordPressダッシュボード]>[HivePress]>[設定]>[統合]>[Googleマップ]セクションに移動し、APIキーを適切なフィールドに貼り付けて、[変更を保存]ボタンをクリックします。

ApiNotActivatedMapError

このタイプのエラーが発生した場合は、必要なAPIを有効にしていないことを意味します。 Google Maps APIライブラリにはさまざまなAPIがあるため、ライブラリに移動して、プロジェクトに必要なAPIを有効にする必要があります。 それらを有効にしたら、[資格情報]セクションのAPIキー設定の[API制限]セクションにも追加することを忘れないでください。

たとえば、Geolocation拡張機能を備えたHivePressプラグインを使用していて、ディレクトリWebサイトに位置検索を追加する場合は、 Maps JavaScript API、Places API、GeocodingAPIのGoogleAPIへのアクセスを有効にして許可する必要があります。 必要なAPIを含むスクリーンショットを見ることができます。

RefererNotAllowedMapError

このエラーは、APIリファラーの制限が正しく設定されていない場合に発生します。 たとえば、マップがWebサイトの1つのページで機能し、他のページでは機能しない場合、おそらく同じ問題に直面しています。

幸いなことに、APIキーを正しく設定して入力したので、修正する必要のある細部は1つだけです。 [資格情報]ページに移動し、APIキーをクリックして編集します。 [アプリケーションの制限]セクションで、[HTTPリファラー(Webサイト)]を選択します。 次に、以下に示すようにWebサイトの制限を入力しますが、「example」をドメイン名に置き換えて、「Save」ボタンをクリックします。 設定が有効になるまで最大5分かかる場合があります。

APIキーのWebサイト制限を追加する方法の例

最後に「/*」の部分を追加して、任意のWebサイトサブページからのAPIリクエストを許可することが重要です。これにより、GoogleマップはWebサイトのすべてのページで機能します。

それでも機能しない

  • APIキーの制限で何かを変更した場合–設定が有効になるまで最大5分待ちます。
  • それでもエラーが発生する場合は、JavaScriptコンソールで詳細をもう一度確認してください。 最初の問題を解決した後、エラーが発生する可能性があります。
  • ブラウザのキャッシュをクリアすることもできます。

結論

それでおしまい! 彼らは、意志があれば道があると言います。 ディレクトリWebサイトに場所検索機能を追加したところ、ユーザーは場所でリストを検索できるようになりました。 これは、ほとんどのディレクトリにとって非常に重要な機能です。 グーグルマップを追加するのは少し複雑なプロセスのように見えるかもしれませんが、それはその塩の価値があります。 ウェブサイトに位置検索を追加すると、ユーザーエクスペリエンスにプラスの影響を与えます。 UXは、トラフィックを増やすための基礎の1つであるため、どのWebサイトにとっても非常に重要です。

ご覧のとおり、コーディングスキルがなくてもGoogleマップをウェブサイトに統合できます。 ディレクトリWebサイトの構築に使用するプラグインをまだ決定していない場合は、HivePressを検討してください。 それはあなたがあらゆるタイプのディレクトリとリストのウェブサイトを作成することを可能にします。 また、位置情報ベースの検索を可能にする無料の拡張機能と、役立つと思われるいくつかの無料機能がすでに含まれています。

さらに、私たちの記事をチェックしてください:

  • 最も人気のある無料のWordPressディレクトリプラグイン
  • WordPressディレクトリのトップテーマ
  • WordPressディレクトリサイトを構築するときに避けるべき間違い