このドキュメントでは、Nearby Search(新版)API を 使用して、シンプルで費用対効果の高い
ローカル検索エクスペリエンスを構築する方法について説明します。
ローカル検索エクスペリエンスでは、ホテルや不動産を検索する際に、指定した場所の付近にある、ユーザーとの関連性が高い重要なスポットを表示します。多くの場合、インタラクティブな地図と、スポット選択ツールや写真ギャラリーを含む追加のパネルで構成されます。Google Maps Platform のさまざまなプロダクトと機能を使用して、インタラクティブなエクスペリエンスを強化できます。

ユースケース
ローカル検索の統合のどの要素がユーザー価値を高めるのかを見てみましょう。
検索 - さまざまなタイプの関連する場所を表示することで、1 つの場所の周辺の概要をユーザーに提供します。
インタラクティブ性 - ユーザーが場所を選択し、データを動的に更新
その場所に関連するデータを動的に更新できるようにします。
可視化 - 場所のクチコミ、写真
、徒歩での所要時間と距離を提供することで、ユーザーがニーズに合っているかどうかをすばやく把握できるようにします。
リファレンス アーキテクチャ

ローカル検索
ローカル検索エクスペリエンスを作成する方法はたくさんあります。次の統合は、よく知られている Google Maps Platform API といくつかのエキサイティングな新機能を活用したユーザー エクスペリエンスのカスタム例 です。ローカル検索にテンプレート化されたアプローチが必要な場合は、Web Componentsを使用できます。
サンプル アプリケーション
サンプル チュートリアル
次の表に、サンプル アプリケーションをステップごとに分割した内容と、Google Maps Platform API を使用した技術的な実装の説明を示します。
1. Autocomplete を使用した場所の検索検索場所
- Maps JavaScript API を読み込みます。
- Places Autocomplete クエリを実行するか、地図上で場所を選択します。

2. Nearby Search(新版)API を使用して、付近のスポットを表示する
- 人気度ランキング(関連性の高い結果)または距離ランキング。
includedTypes、excludedTypes。ホテルを経営している場合は、「宿泊施設」タイプを除外し、「レストラン、カフェ、公園、観光スポット」などの適切なタイプのみを含めることができます。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 and Directions API でインタラクティブな機能 を追加する
- Directions API をクエリして、最新のルートとステップ を取得します。 * 次のセクションで時間を使用します。

4. 操作時に場所の詳細情報を表示する
説明:
displayName、types、rating、userRatingCount、priceLevel。時間: 前の Directions API クエリから取得します。
[Reviews]:
reviews[i].author、reviews[i].rating、reviews[i].text。画像: Nearby Search(新版)API の無制限プレビューでは、Place Detailsを
place.idでクエリしてphoto_referenceを取得し、エクスペリエンスで 1 つずつクエリする必要があります。

クエリ数と関連費用
- Maps JavaScript API: エクスペリエンスの読み込み時に 1 つの地図。
- Places Autocomplete API: Autocomplete ウィジェットを使用している場合は、入力した文字ごとに 1 つのクエリ。カスタマイズできます。
- Nearby Search(新版) API: 表示される 20 か所ごとに 1 つのクエリ。クエリ レスポンスに含まれる場所 データ に応じて、請求額が異なります。
- Directions API: ユーザーが選択した場所ごとに 1 つのクエリ。
- Place Photo API: 表示される写真ごとに 1 つのクエリ。
まとめ
ローカル検索エクスペリエンスは、ユーザー価値を高める強力な方法です。この デモの実装には、Nearby Search(新版)API の特別な機能を使用して Google Maps Platform でこのようなエクスペリエンスを作成する際に含める可能性の高い機能が多数含まれています。
次のステップ
おすすめのドキュメント:
- Maps JavaScript API の Web Components
- Places Autocomplete の最適化
- その他の Places サービス
- 下にフィードバックをお寄せください。
寄稿者
主な著者:
Thomas Anglaret | Google Maps Platform ソリューション エンジニア