このドキュメントでは、Nearby Search（新規）API を使用してシンプルで費用対効果の高い
ローカル検索機能
ローカル検索では、ホテルや不動産を検索する際に、指定した場所の近くにある重要なスポットが表示されます。多くの場合、インタラクティブな地図と、スポット選択ツールと写真ギャラリーを含む追加パネルで構成されます。インタラクティブなエクスペリエンスを強化するための、さまざまな Google Maps Platform のプロダクトと機能が紹介されます。
ユースケース
次に、ローカル検出の統合の要素がユーザー価値を高める仕組みについて説明します。
探索 - さまざまな種類の関連する場所を表示して、1 つの場所の周辺の概要をユーザーに提供します。
インタラクティビティ - ユーザーが場所を選択してデータを動的に更新できるようにする
を基準に測定されます。
可視化 - 場所のレビューや写真を提供する
歩行時間と距離を表示して、ユーザーが自分のニーズに合っているかどうかをすばやく把握できるようにします。
リファレンス アーキテクチャ
ローカル検索
ローカル探索機能はさまざまな方法で作成できます。次の統合は、よく知られている Google Maps Platform API と、いくつかの新しい機能を活用したユーザー エクスペリエンスのカスタム例です。ローカル検出にテンプレート アプローチを使用する場合は、ウェブ コンポーネントを使用できます。
サンプル アプリケーション
サンプル チュートリアル
以下の表に、サンプル アプリケーションをステップごとに示し、Google Maps Platform API を使用した技術的な実装の説明を示します。
1. 場所の検索（AutocompleteSearch location）
- Maps JavaScript API を読み込みます。
- Places Autocomplete クエリを実行するか、地図上で場所を選択します。
2. Nearby Search（新版）API を使用してローカルのスポットを表示する
- 人気度ランキング（より関連性の高い結果）または距離ランキング。
includedTypes、excludedTypes: ホテルの場合は、「宿泊施設」の種類を除外し、適切な種類のみ（レストラン、カフェ、公園、観光スポットなど）を含めることができます。includedPrimaryTypesとexcludedPrimaryTypesを使用して、結果をさらに細かく制御します。- locationRestriction は、結果が不十分な場合や、場所が遠すぎる場合を回避するために使用します。結果がゼロの場合、結果を表示する前に円または長方形のサイズを広げます。
データフィールドをリクエストしてホテルを予約する場合のクエリ例:
- 基本（
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 API と Directions API を使用してインタラクティビティを追加する
- Directions API をクエリして、最新の区間とステップを取得。 * 次のセクションで使用します。
4. 操作時に場所の詳細情報を表示する
説明:
displayName、types、rating、userRatingCount、priceLevel。時間: 前の Directions API クエリから取得。
レビュー:
reviews[i].author、reviews[i].rating、reviews[i].text。画像: Nearby Search（新規）API の無制限プレビュー中は、
place.idを使用してPlaces Details をクエリし、photo_reference を取得してから、エクスペリエンスで 1 つずつクエリする必要があります。
クエリ数と関連する費用
- Maps JavaScript API: エクスペリエンスの読み込み時に 1 つの地図。
- Places Autocomplete API: 入力された文字ごとに 1 回（Autocomplete ウィジェットを使用している場合）。カスタマイズ可能です。
- Nearby Search（新規）API: 表示される場所 20 件ごとに 1 件のクエリ。クエリ レスポンスの一部である場所データに応じた課金。
- Directions API: ユーザーが選択した場所ごとに 1 件のクエリ。
- Place Photo API: 表示される写真ごとに 1 件のクエリ。
まとめ
ローカル検索は、ユーザーに価値を提供する強力な方法です。このデモ実装には、Google Maps Platform でこのようなエクスペリエンスを作成する際に、Nearby Search（新規）API の特別な機能とともに含める可能性のある多くの機能が含まれています。
次のステップ
おすすめの関連情報:
- Maps JavaScript API の Web Components
- Place Autocomplete の最適化
- その他の プレイス サービス
- 以下にフィードバックをお寄せください。
寄稿者
主な作成者:
Thomas Anglaret | Google Maps Platform ソリューション エンジニア