Nearby Search（新機能）API でローカル検索を改善

このドキュメントでは、Nearby Search（新）API を使用してシンプルで費用対効果の高い検索ソリューションを構築する方法について説明します。

ローカル検索を開始します。

ローカル検索エクスペリエンスでは、ホテルや不動産を検索する際に、指定した場所の近くにある主要なスポットがユーザーに表示されます。通常は、スポット選択ツールを含む追加のパネルと写真のギャラリーを含むインタラクティブな地図で構成されています。インタラクティビティを向上させるため、Google Maps Platform のさまざまなプロダクトと機能を紹介します。

ローカル検出のサンプル

ユースケース

ローカル検索の統合のどの要素がユーザーに価値をもたらすかを理解しましょう。

  • 発見 - さまざまなタイプの関連する場所を表示して、1 つの場所の周辺にあるものの概要をユーザーに提供します。

  • インタラクティビティ - ユーザーが場所を選択して動的にデータを更新できるようにします

    表示されます。

  • ビジュアリゼーション - 場所に関するクチコミや写真を提供する

    徒歩時間と距離を表示できるため、ユーザーは自分のニーズに合っているかどうかをすばやく判断できます。

リファレンス アーキテクチャ

alt_text

ローカル検索

ローカル検索のエクスペリエンスを構築するには、多くの方法があります。次の統合は、よく知られた Google Maps Platform API と画期的な新機能を活用したユーザー エクスペリエンスのカスタム例です。テンプレート化されたアプローチでローカルを検出したい場合は、Web Components を使用できます。

サンプル アプリケーション

サンプルのチュートリアル

下の表に、サンプル アプリケーションの各ステップと、Google Maps Platform API を使った技術的な実装の説明を掲載しています。

1. AutocompleteSearch の位置情報を使用した場所検索

  • Maps JavaScript API を読み込みます。
  • Places Autocomplete をクエリするか、地図上で場所を選択します。

オートコンプリートの例

2. Nearby Search（New）API を使用して地域のスポットを表示する

  • 人気度ランキング（関連性の高い検索結果）と距離ランキング。
  • includedTypes、excludedTypes。ホテルの場合は、「宿泊施設」タイプを除外し、適切なタイプ（「レストラン、カフェ、公園、tourit_attraction」など）のみを含めることができます。
  • includedPrimaryTypes、excludedPrimaryTypes を使用すると、結果をさらに制御できます。
  • locationRestriction で、結果の数が不十分な場合や、場所が離れすぎないようにします。結果が 0 件の場合は、結果を表示する前に円または長方形のサイズを広げます。

付近の場所のサンプル

リクエストされたデータ フィールドを使用してホテルを予約する場合のクエリ例:

  • 基本（displayName、types、openingHours、formattedAddress）
  • 連絡先（websiteUri、nationalPhoneNumber、internationalPhoneNumber）
  • 推奨（reviews、priceLevel、userRatingCount）
 { "includedTypes": ["restaurant","cafe","park"], "excludedTypes":
["lodging","convenience_store"], "includedPrimaryTypes":
["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes":
["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": {
"center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }

リクエストされたデータ フィールドを使用して不動産を検索する場合のクエリ例:

  • 基本（displayName、types、openingHours、formattedAddress）
 { "includedTypes": ["school","transport","bus","convenience_store"],
"excludedTypes": ["lodging"], "includedPrimaryTypes":
["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes":
["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": {
"center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }

3.Dynamic Maps と Directions API でインタラクティビティを追加する

  • Directions API にクエリを実行して、最新の区間とステップを確認する。* 時間は次のセクションで使用します。

ルートの例

4. 操作時に場所の詳細情報を表示する

  1. 説明: displayName、types、rating、userRatingCount、priceLevel。

    Time: 前の Directions API クエリから取得されます。

  2. クチコミ: reviews[i].author、reviews[i].rating、reviews[i].text。

  3. 画像: Nearby Search（新規）API の無制限プレビューでは、place.id を使用して Places Details をクエリし、photo_reference を取得して 1 つずつクエリする必要があります。

場所の詳細

クエリの数と関連する費用

  • Maps JavaScript API: エクスペリエンスの読み込み時に 1 つの地図
  • Places Autocomplete API: 入力された文字ごとに 1 回クエリを実行します（Autocomplete ウィジェットを使用している場合）。これはカスタマイズできます。
  • Nearby Search（New）API: 表示される場所 20 件ごとに 1 件のクエリを行います。クエリ レスポンスに含まれる場所データに応じて課金が異なる。
  • Directions API: ユーザーが選択したすべての場所に対して 1 つのクエリを実行します。
  • Place Photo API: 表示されるすべての写真を 1 回クエリします。

おわりに

ローカルな検出機能は、ユーザーに価値を提供する優れた方法です。このデモ実装には、Nearby Search（New）API の特別な機能を使用して、このようなエクスペリエンスを Google Maps Platform で作成する際に組み込むことができる多くの機能が含まれています。

次のステップ

関連資料:

協力者

主任執筆者:

Thomas Anglaret | Google Maps Platform ソリューション エンジニア