장소 UI 키트
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
장소 UI 키트 구성요소 라이브러리를 사용하면 Places API를 지원하는 동일한 데이터를 사용하여 앱과 웹페이지에 장소에 대한 익숙한 Google 지도 사용자 경험을 구현할 수 있습니다. 여기에는 독립적으로, 함께, 그리고 다른 Google Maps Platform API와 함께 사용하여 최소한의 비용과 코드로 장소 관련 풍부한 경험을 제공할 수 있는 개별 UI 구성요소 세트가 포함됩니다.
Places UI Kit에는 장소 데이터를 렌더링하기 위한 다음 HTML 요소가 포함되어 있습니다.
장소 세부정보 요소
(장소 세부정보 및 장소 세부정보 컴팩트)는 선택한 장소의 영업시간, 웹사이트, 리뷰와 같은 세부정보를 렌더링합니다.
장소 검색 요소(장소 주변 검색 및 장소 텍스트 검색)는 주변 검색 또는 텍스트 검색 쿼리에 대한 응답으로 장소 목록을 렌더링합니다.
기본 장소 자동 완성 요소는 텍스트 입력란을 렌더링하고, UI 선택 목록에 장소 예상 검색어를 제공하며, 선택한 장소의 장소 ID를 반환합니다.
고도 (실험적)는 고도 데이터를 단일 지점의 숫자 값 또는 경로의 시각적 플롯으로 렌더링합니다.
핵심 기능 및 역량
- 최소한의 코드로 시작하여 Google의 신뢰할 수 있는 환경을 통합하세요.
- Places API보다 저렴한 비용으로 장소용 Google 지도 UI를 앱에 가져올 수 있습니다.
- 필요에 가장 적합한 데이터 및 표시 옵션을 선택합니다.
결제
Places UI 키트 요청은 사용하는 검색 방법이나 반환하는 데이터 유형과 관계없이 항상
Places UI 키트 API 요율로 청구됩니다. 예를 들어 장소 UI 키트 주변 검색에는 Places API 주변 검색 Pro에 대한 추가 요금이 발생하지 않습니다. 마찬가지로 Places UI 키트 장소 세부정보 요청은 선택한 장소의 사진, 가격, 평점을 반환할 수 있지만 Places UI 키트 장소 세부정보 요청에 대해서만 요금이 청구됩니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-08-29(UTC)
[null,null,["최종 업데이트: 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)"]]
