Places UI Kit
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.
Thư viện thành phần Places UI Kit cho phép bạn mang đến trải nghiệm người dùng quen thuộc của Google Maps cho Địa điểm trong các ứng dụng và trang web của mình, bằng cách sử dụng cùng một dữ liệu hỗ trợ Places API. Thư viện này bao gồm một bộ thành phần giao diện người dùng riêng lẻ có thể được dùng độc lập, cùng nhau và kết hợp với các API khác của Google Maps Platform để mang đến trải nghiệm phong phú về Địa điểm với chi phí và mã tối thiểu.
Places UI Kit bao gồm các phần tử HTML sau để hiển thị dữ liệu về Địa điểm:
Các phần tử Thông tin chi tiết về địa điểm
(Thông tin chi tiết về địa điểm và Thông tin chi tiết về địa điểm ở dạng thu gọn) hiển thị thông tin chi tiết như giờ mở cửa, trang web và bài đánh giá cho một địa điểm đã chọn.
Các phần tử tìm kiếm địa điểm (Tìm kiếm địa điểm lân cận và Tìm kiếm địa điểm bằng văn bản) hiển thị danh sách các địa điểm để phản hồi một cụm từ tìm kiếm lân cận hoặc cụm từ tìm kiếm bằng văn bản.
Basic Place Autocomplete Element (Phần tử cơ bản của tính năng tự động hoàn thành địa điểm) hiển thị một trường nhập văn bản, cung cấp các dự đoán về địa điểm trong danh sách chọn trên giao diện người dùng và trả về mã địa điểm cho địa điểm đã chọn.
Độ cao (thử nghiệm) kết xuất dữ liệu độ cao dưới dạng giá trị bằng số cho một điểm hoặc dưới dạng biểu đồ trực quan cho một đường dẫn.
Các tính năng và khả năng chính
- Kết hợp trải nghiệm đáng tin cậy của Google ngay từ đầu với mã tối thiểu.
- Đưa giao diện người dùng Google Maps cho Địa điểm vào ứng dụng của bạn với chi phí thấp hơn so với Places API.
- Chọn dữ liệu và các lựa chọn hiển thị phù hợp nhất với nhu cầu của bạn.
Thanh toán
Các yêu cầu Places UI Kit luôn được tính phí theo
mức phí Places UI Kit API, bất kể yêu cầu đó sử dụng phương thức tìm kiếm nào hoặc trả về loại dữ liệu nào. Ví dụ: tính năng Tìm kiếm lân cận trong Places UI Kit sẽ không phát sinh thêm bất kỳ khoản phí nào cho tính năng Tìm kiếm lân cận chuyên nghiệp trong Places API. Tương tự, một yêu cầu Chi tiết về địa điểm trong Places UI Kit có thể trả về ảnh, giá và điểm xếp hạng cho một địa điểm đã chọn, nhưng bạn sẽ chỉ bị tính phí cho yêu cầu Chi tiết về địa điểm trong Places UI Kit.
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-29 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-29 UTC."],[[["\u003cp\u003eThe Places UI Kit offers pre-built UI components for integrating Google Maps Places functionality into your apps and web pages.\u003c/p\u003e\n"],["\u003cp\u003eIt includes components like Place Details, Place List, and Elevation for displaying place information and elevation data.\u003c/p\u003e\n"],["\u003cp\u003eThis kit is cost-effective compared to the Places API and allows customization of data and display options.\u003c/p\u003e\n"],["\u003cp\u003eThis product or feature is currently in the Experimental (pre-GA) phase, which means it has limited support and potential for incompatibility.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/places-ui-kit-overview \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/places-ui-kit-overview \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/places-ui-kit/overview \"View this page for the JavaScript platform docs.\")\n\n\nThe Places UI Kit component library lets you bring the familiar Google Maps user experience for\nPlaces to your apps and web pages, using the same data that powers the Places API. It includes a\nset of individual UI components that can be used independently, together, and in conjunction with\nother Google Maps Platform APIs to deliver a Places-rich experience with minimal cost and code.\n\n\nThe Places UI Kit includes the following HTML elements for rendering Places data:\n- [Place Details Elements](/maps/documentation/javascript/places-ui-kit/place-details) (Place Details and Place Details Compact) render details such as opening hours, website, and reviews for a selected place.\n- [Place Search Elements](/maps/documentation/javascript/places-ui-kit/place-list) (Place Nearby Search and Place Text Search) render a list of places in response to either a nearby search or text search query.\n- [Basic Place Autocomplete Element](/maps/documentation/javascript/places-ui-kit/basic-autocomplete) renders a text input field, supplies place predictions in a UI pick list, and returns a place ID for the selected place.\n- [Elevation](/maps/documentation/javascript/places-ui-kit/elevation) (experimental) renders elevation data as a numerical value for a single point, or as a visual plot for a path.\n| **Tip:** The Places UI Kit offers extensive visual customization options at no extra charge. See [Places UI Kit Custom Styling](/maps/documentation/javascript/places-ui-kit/custom-styling) for more information.\n\nKey features and capabilities\n - Incorporate Google's trusted experience starting with minimal code.\n - Bring Google Maps UI for Places to your apps at a lower cost than the Places API.\n - Choose the data and display options that best suit your needs.\n\nBilling\n- Places UI Kit requests are always billed at the [Places UI Kit API rate](/maps/billing-and-pricing/sku-details#places_ui-kit-request-ess-sku), regardless of which search method they use or what data types they return. For example, a Places UI Kit Nearby Search won't incur any additional charges for Places API Nearby Search Pro. Similarly, a Places UI Kit Place Details request may return photos, price, and rating for a selected place, but you will only be billed for the Places UI Kit Place Details request.\n\nNext step:\n[Get started with the Places UI Kit](/maps/documentation/javascript/places-ui-kit/get-started)"]]
