Cải thiện khả năng khám phá địa phương bằng API Tìm kiếm lân cận (Mới)
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Trong tài liệu này, bạn sẽ tìm hiểu cách sử dụng Nearby Search (New) API
để tạo một ứng dụng đơn giản và tiết kiệm chi phí
trải nghiệm khám phá tại địa phương.
Trải nghiệm khám phá địa phương cho người dùng thấy những địa điểm quan trọng gần một vị trí mà bạn chỉ định khi tìm kiếm khách sạn hoặc bất động sản. Thành phần này thường bao gồm một bản đồ tương tác, với một bảng điều khiển bổ sung chứa bộ chọn địa điểm và một thư viện ảnh. Bạn sẽ thấy nhiều sản phẩm và chức năng của Google Maps Platform để nâng cao trải nghiệm bằng khả năng tương tác.
Trường hợp sử dụng
Bây giờ, hãy tìm hiểu những yếu tố của hoạt động tích hợp khám phá tại địa phương giúp mang lại giá trị cho người dùng:
Khám phá – Cung cấp cho người dùng thông tin tổng quan về những địa điểm xung quanh một vị trí duy nhất bằng cách hiển thị các địa điểm phù hợp thuộc nhiều loại.
Tính tương tác – Cho phép người dùng chọn một địa điểm và làm mới dữ liệu một cách linh hoạt
so với địa điểm đó.
Hình ảnh trực quan – Cung cấp bài đánh giá, ảnh về địa điểm
cũng như thời gian và khoảng cách đi bộ để người dùng nhanh chóng biết được thông tin này có phù hợp với nhu cầu của họ hay không.
Kiến trúc tham chiếu
Khám phá địa phương
Có nhiều cách để tạo trải nghiệm khám phá tại địa phương. Sau đây là một ví dụ tuỳ chỉnh về trải nghiệm người dùng tận dụng các API của Nền tảng Google Maps cũng như một số tính năng mới thú vị. Nếu muốn sử dụng phương pháp dựa trên mẫu để khám phá địa phương, bạn có thể dùng Web Components (Thành phần web).
Ứng dụng mẫu
Hướng dẫn từng bước về mẫu
Trong bảng bên dưới, bạn sẽ thấy ứng dụng mẫu được chia thành các bước cùng với nội dung mô tả về việc triển khai kỹ thuật bằng API Nền tảng Google Maps.
1. Tìm kiếm vị trí bằng tính năng Tự động hoàn thànhTìm kiếm vị trí
- Tải Maps JavaScript API.
- Truy vấn Tính năng tự động hoàn thành địa điểm hoặc chọn vị trí trên bản đồ.
2. Hiển thị các địa điểm yêu thích tại địa phương bằng Nearby Search (Mới) API
- Xếp hạng theo mức độ phổ biến (kết quả phù hợp hơn) hoặc Xếp hạng theo khoảng cách.
includedTypes, excludedTypes; nếu là khách sạn, bạn có thể loại trừ loại "lodging" (chỗ ở) và chỉ thêm các loại phù hợp, tức là "restaurant, cafe, park, tourit_attraction" (nhà hàng, quán cà phê, công viên, điểm du lịch).- Tận dụng
includedPrimaryTypes, excludedPrimaryTypes để kiểm soát kết quả chặt chẽ hơn nữa.
- `locationRestriction để tránh trường hợp không đủ số lượng kết quả hoặc địa điểm quá xa; trong trường hợp không có kết quả nào, hãy mở rộng kích thước hình tròn / hình chữ nhật trước khi hiển thị kết quả.
Mẫu truy vấn khi đặt phòng khách sạn với các trường Dữ liệu được yêu cầu:
- Cơ bản (
displayName, types, openingHours, formattedAddress)
- Liên hệ (
websiteUri, nationalPhoneNumber, internationalPhoneNumber)
- Ưu tiên (
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 } } }
Mẫu truy vấn khi tìm kiếm bất động sản bằng các trường Dữ liệu được yêu cầu:
- Cơ bản (
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. Thêm khả năng tương tác bằng Dynamic Maps và Directions API
- Chặng đường và các bước mới nhất bằng cách truy vấn Directions API.
* Sử dụng thời gian trong phần tiếp theo.
Nội dung mô tả: displayName, types, rating, userRatingCount, priceLevel.
Thời gian: lấy từ truy vấn Directions API trước đó.
Bài đánh giá: reviews[i].author, reviews[i].rating,reviews[i].text.
Hình ảnh: trong Bản xem trước không hạn chế của Nearby Search (New) API, bạn sẽ phải truy vấn Places Details bằng place.id để nhận photo_reference, sau đó truy vấn từng hình ảnh một trong trải nghiệm của bạn
Số lượng và chi phí liên quan đến các truy vấn
Kết luận
Trải nghiệm khám phá tại địa phương là một cách hiệu quả để mang lại giá trị cho người dùng. Việc triển khai minh hoạ này có nhiều tính năng mà bạn có thể đưa vào khi tạo một trải nghiệm như vậy trên Nền tảng Google Maps với các chức năng đặc biệt của API Tìm kiếm lân cận (mới)
.
Các bước tiếp theo
Tài liệu đọc thêm được đề xuất:
Người đóng góp
Tác giả chính:
Thomas Anglaret | Kỹ sư giải pháp Nền tảng Google Maps
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-27 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-27 UTC."],[[["\u003cp\u003eThis document demonstrates how to build a local discovery experience using the Nearby Search (New) API, enhancing user engagement with interactive maps and relevant place recommendations.\u003c/p\u003e\n"],["\u003cp\u003eLocal discovery experiences benefit users by offering discovery of nearby points of interest, interactive place selection and dynamic data refresh, and visualizations with reviews, photos, and travel times.\u003c/p\u003e\n"],["\u003cp\u003eThis guide presents a custom local discovery implementation leveraging Google Maps Platform APIs including Nearby Search (New) API, Places Autocomplete, Directions API, and Place Photo API for detailed place information.\u003c/p\u003e\n"],["\u003cp\u003eThe example application showcases the process of location search using Autocomplete, retrieving local points of interest with Nearby Search (New) API, adding interactivity with Dynamic Maps and Directions API, and displaying detailed place information upon interaction.\u003c/p\u003e\n"],["\u003cp\u003eCost considerations are outlined, highlighting API usage and billing based on the specific Google Maps Platform products involved in the local discovery experience.\u003c/p\u003e\n"]]],["This document details how to create a local discovery experience using Google Maps Platform APIs. Key actions include using the **Nearby Search (New) API** to surface relevant places near a specified location, filtering results with `includedTypes`, `excludedTypes`, `includedPrimaryTypes`, and `excludedPrimaryTypes`, and `locationRestriction`. The experience is enriched by using **Places Autocomplete**, **Directions API**, and **Places Details** for interactivity, detailed information, and visuals. Cost and billing considerations are also outlined for each API used.\n"],null,["In this document, you will look into how to use [Nearby Search (New) API](https://developers.google.com/maps/documentation/places/web-service/search-nearby-new)to\nbuild a simple and cost effective\n\nlocal discovery experience.\n\nA local discovery experience shows users key places of interest near a location\nyou specify when searching for a hotel or a real estate. It often consists of an\ninteractive map, with an additional panel containing a place chooser and a\ngallery of photos. You will be presented with different Google Maps Platform\nproducts and capabilities to enhance the experience with interactivity.\n\nUse Cases\n\nNow let's understand what elements of the local discovery integration drive user\nvalue:\n\n- **Discovery** - Give users an overview of what is around a single location\n by surfacing relevant places of various types.\n\n- **Interactivity** - Empower users to select a place and dynamically refresh the data\n\n relative to that place.\n- **Visualization** - Provide places reviews, photos\n\n and walking time and distance for the users to quickly understand if it fits\n their needs.\n\nReference Architecture\n\nLocal Discovery\n\nThere are many ways to create a local discovery experience. The following\nintegration is a **custom example** of a user experience that leverages well\nknown Google Maps Platform APIs as well as some exciting new features. If you\nwish to have a templated approach to local discovery you can use [Web\nComponents](https://github.com/googlemaps/extended-component-library/tree/main/place_overview).\n\nSample Application\n\nSample Walkthrough\n\nYou will find in the table below the sample application broken into steps\ntogether with a description of the technical implementation with Google Maps\nPlatform APIs.\n\n1. Location Search with AutocompleteSearch location\n\n- Load **Maps Javascript API**.\n- **Places Autocomplete** query or pick location on the map.\n\n2. Surface local points of interest using **[Nearby Search (New) API](https://developers.google.com/maps/documentation/places/web-service/search-nearby-new)**\n\n- Popularity ranking (more relevant results) or Distance ranking.\n- `includedTypes`, `excludedTypes` ; if you are a hotel you can exclude \"lodging\" type, and include only suited types, ie: \"restaurant, cafe, park, tourit_attraction\".\n- Leverage `includedPrimaryTypes`, `excludedPrimaryTypes` for even more control over results.\n- \\`locationRestriction to avoid insufficient number of results or too far away places ; in case of ZERO results, broaden the circle / rectangle size prior to display results.\n\nQuery sample when **booking a hotel** with Data fields requested:\n\n- Basic (`displayName`, `types`, `openingHours`, `formattedAddress`)\n- Contact (`websiteUri`, `nationalPhoneNumber`, `internationalPhoneNumber`)\n- Preferred (`reviews`, `priceLevel`, `userRatingCount`)\n\n```scdoc\n { \"includedTypes\": [\"restaurant\",\"cafe\",\"park\"], \"excludedTypes\":\n[\"lodging\",\"convenience_store\"], \"includedPrimaryTypes\":\n[\"restaurant\",\"tourist_attraction\",\"airport\"], \"excludedPrimaryTypes\":\n[\"lodging\"], \"maxResultCount\": 20, \"locationRestriction\": { \"circle\": {\n\"center\": { \"latitude\": 37.7937, \"longitude\": -122.3965 }, \"radius\": 500.0 } } }\n```\n\nQuery sample when **searching a real estate** with Data fields requested:\n\n- Basic (`displayName`, `types`, `openingHours`, `formattedAddress`)\n\n```scdoc\n { \"includedTypes\": [\"school\",\"transport\",\"bus\",\"convenience_store\"],\n\"excludedTypes\": [\"lodging\"], \"includedPrimaryTypes\":\n[\"restaurant\",\"tourist_attraction\",\"airport\"], \"excludedPrimaryTypes\":\n[\"lodging\"], \"maxResultCount\": 20, \"locationRestriction\": { \"circle\": {\n\"center\": { \"latitude\": 37.7937, \"longitude\": -122.3965 }, \"radius\": 500.0 } } }\n```\n\n3. Add **interactivity** with Dynamic Maps and Directions API\n\n- Up to date **leg and steps** by querying **[Directions\n API](https://developers.google.com/maps/documentation/directions/overview)**. \\* Use time in the next section.\n\n4. Display detailed information of the place upon interaction\n\n1. **Description** : `displayName`, `types`, `rating`, `userRatingCount`,\n `priceLevel`.\n\n **Time**: coming from the previous Directions API query.\n2. **Reviews** : `reviews[i].author`, `reviews[i].rating`,`reviews[i].text`.\n\n3. **Images** : during *Unrestricted Preview of Nearby Search (New) API* , you\n will have to query [Places\n Details](https://developers.google.com/maps/documentation/places/web-service/details)\n with [place.id](http://place.id) to get\n [photo_reference](https://developers.google.com/maps/documentation/places/web-service/details#Place-photos)\n to then query one at a time in your experience\n\nQueries count and cost associated\n\n- [Maps JavaScript\n API](https://developers.google.com/maps/documentation/javascript/usage-and-billing#pricing-for-product): 1 map at load of the experience.\n- Places Autocomplete API: 1 query every character typed (if using the [Autocomplete\n Widget](https://developers.google.com/maps/documentation/javascript/place-autocomplete)), it can be customised.\n- [Nearby Search (New)\n API](https://developers.google.com/maps/documentation/places/web-service/search-nearby-new): 1 query every 20 places displayed. Different billing according to [Place\n data](https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#data-skus) that are part of the query response.\n- [Directions\n API](https://developers.google.com/maps/documentation/directions/usage-and-billing#pricing-for-product): 1 query every place selected by the user.\n- [Place Photo\n API](https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#places-photo-new-ent-sku): 1 query every photo displayed.\n\nConclusion\n\nA local discovery experience is a powerful way to deliver user value. This\ndemonstration implementation has many features you are likely to include when\ncreating such an experience on Google Maps Platform with special capabilities\nfrom the [Nearby Search (New) API](https://developers.google.com/maps/documentation/places/web-service/search-nearby-new).\n\nNext Steps\n\nSuggested further reading:\n\n- [Web Components in the Maps JavaScript API](https://developers.google.com/maps/documentation/web-components/overview)\n- [Places Autocomplete Optimization](https://developers.google.com/maps/documentation/places/web-service/autocomplete#best-practices)\n- Other [Places Services](https://developers.google.com/maps/documentation/places/web-service/overview)\n- Leave feedback below.\n\nContributors\n\nPrincipal authors:\n\n[Thomas Anglaret](https://www.linkedin.com/in/thomas-anglaret/) \\| Google Maps\nPlatform Solutions Engineer"]]
