Places UI Kit
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
開發人員可透過 Places UI Kit 元件程式庫，在應用程式和網頁中導入熟悉的 Google 地圖使用者體驗，呈現地點資訊，並使用與 Places API 相同的資料。這套工具包包含一組可單獨、一起使用，以及與其他 Google 地圖平台 API 搭配使用的個別 UI 元件，可讓您以最低成本和最少程式碼，提供豐富的地點體驗。
Places UI Kit 包含下列 HTML 元素，可用於算繪地點資料：
Place Details 元素
(Place Details 和 Place Details Compact) 會針對所選地點顯示營業時間、網站和評論等詳細資料。
Place Search 元素 (Place Nearby Search 和 Place Text Search) 會根據附近搜尋或文字搜尋查詢，顯示地點清單。
基本 Place Autocomplete 元素
會顯示文字輸入欄位、在 UI 選單中提供地點預測結果，以及傳回所選地點的地點 ID。
海拔高度 (實驗功能)：
將單一點的海拔高度資料以數值形式呈現，或將路徑的海拔高度資料以視覺化圖表形式呈現。
主要功能與特色
- 只要加入少量程式碼，即可整合 Google 的可靠體驗。
- 以比 Places API 更低的成本，在應用程式中導入 Google 地圖 Places UI。
- 選擇最符合需求的資料和顯示選項。
帳單
無論使用哪種搜尋方法或傳回哪些資料類型，系統一律會按照
Places UI Kit API 費率，對 Places UI Kit 要求收費。舉例來說，Places UI Kit 附近搜尋不會產生任何額外費用，因為這項功能已包含在 Places API 附近搜尋 Pro 中。同樣地，Places UI Kit Place Details 要求可能會傳回所選地點的相片、價格和評分，但您只須支付 Places UI Kit Place Details 要求的費用。
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-08-29 (世界標準時間)。
[null,null,["上次更新時間：2025-08-29 (世界標準時間)。"],[[["\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)"]]
