このドキュメントでは、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
: ホテルの場合は、「宿泊施設」タイプを除外し、適切なタイプ(レストラン、カフェ、公園、tourit_attraction など)のみを含めることができます。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 と 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 回クエリを発行します(予測入力ウィジェットを使用している場合)。カスタマイズも可能です。
- 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 ソリューション エンジニア