開發人員可透過 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) 會根據附近搜尋或文字搜尋查詢,顯示地點清單。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間: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)"]]