Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Places Widgets

PlaceAutocompleteElement 클래스

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
library "places"

PlaceAutocompleteElement는 Places Autocomplete API의 UI 구성요소를 제공하는 HTMLElement 서브클래스입니다.

PlaceAutocompleteElement는 내부적으로 AutocompleteSessionToken를 자동으로 사용하여 사용자의 자동 완성 검색의 쿼리 및 선택 단계를 그룹화합니다.

PlacePrediction.toPlace에서 반환한 Place에서 Place.fetchFields를 처음 호출하면 PlacePrediction를 가져오는 데 사용된 세션 토큰이 자동으로 포함됩니다.

세션 작동 방식에 관한 자세한 내용은 https://developers.google.com/maps/documentation/places/web-service/place-session-tokens를 참고하세요.

<gmp-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-place-autocomplete>

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");

생성자
`PlaceAutocompleteElement`	`PlaceAutocompleteElement([options])` 매개변수: `options: PlaceAutocompleteElementOptions optional`

속성
`description` attr: description	유형: `string optional` 입력 요소에 사용할 설명입니다. 이는 입력 요소에 포커스가 있을 때 스크린 리더에 의해 감지됩니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby를 참고하세요. HTML 속성: `description="string"`
`disabled` attr: disabled	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 요소가 사용 중지되었는지 여부입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled를 참고하세요. HTML 속성: `disabled`
`futureOpeningBusinessesIncluded` attr: future-opening-businesses-included	유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 장소를 포함할지 여부입니다. HTML 속성: `future-opening-businesses-included`
`includedPrimaryTypes` attr: included-primary-types	유형: `Array<string> optional` 포함된 기본 장소 유형 (예: 'restaurant' 또는 'gas_station') 장소는 기본 유형이 이 목록에 포함된 경우에만 반환됩니다. 값을 최대 5개까지 지정할 수 있습니다. 유형을 지정하지 않으면 모든 장소 유형이 반환됩니다. HTML 속성: `included-primary-types="type1 type2 type3..."`
`includedRegionCodes` attr: included-region-codes	유형: `Array<string> optional` 지정된 리전의 결과만 포함합니다. 최대 15개의 CLDR 2자리 리전 코드로 지정됩니다. 빈 집합은 결과를 제한하지 않습니다. `locationRestriction`와 `includedRegionCodes`가 모두 설정된 경우 결과는 교차 영역에 위치합니다. HTML 속성: `included-region-codes="c1 c2 c3..."`
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`locationBias`	유형: `LocationBias optional` 장소를 검색할 때 사용할 소프트 경계 또는 힌트입니다.
`locationRestriction`	유형: `LocationRestriction optional` 검색 결과를 제한하는 경계입니다.
`maxlength` attr: maxlength	유형: `number optional` 사용자가 입력할 수 있는 최대 문자 수입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength를 참고하세요. HTML 속성: `maxlength="number"`
`name` attr: name	유형: `string optional` 입력 요소에 사용할 이름입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name을 참고하세요. 입력의 name 속성과 동일한 동작을 따릅니다. 이 이름은 양식이 제출될 때 사용됩니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form을 참고하세요. HTML 속성: `name="string"`
`noClearButton` attr: no-clear-button	입력 유형: `boolean optional` 출력 유형: `boolean` 지우기 버튼을 숨길지 여부입니다. HTML 속성: `no-clear-button`
`noInputIcon` attr: no-input-icon	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 아이콘을 숨길지 여부입니다. HTML 속성: `no-input-icon`
`origin` attr: origin	입력 유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 출력 유형: `LatLngAltitude optional` 거리를 계산할 출발지입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 지정된 경우 계산에 사용되지 않습니다. HTML 속성: `origin="lat,lng"` `origin="lat,lng,altitude"`
`placeholder` attr: placeholder	유형: `string optional` 입력 요소에 사용할 플레이스홀더 텍스트입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder를 참고하세요. HTML 속성: `placeholder="string"`
`pureServiceAreaBusinessesIncluded` attr: pure-service-area-businesses-included	유형: `boolean optional` 순수 방문 서비스 업체인 장소를 포함할지 여부입니다. HTML 속성: `pure-service-area-businesses-included`
`readonly` attr: readonly	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 요소가 읽기 전용인지 여부입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly를 참고하세요. HTML 속성: `readonly`
`requestedLanguage` attr: requested-language	유형: `string optional` 가능한 경우 결과를 반환할 언어의 언어 식별자입니다. 선택한 언어로 된 검색 결과에 더 높은 순위가 부여될 수 있지만 추천이 이 언어로만 제한되지는 않습니다. 지원 언어 목록을 참조하세요. HTML 속성: `requested-language="string"`
`requestedRegion` attr: requested-region	유형: `string optional` 결과 형식 지정 및 결과 필터링에 사용되는 지역 코드입니다. 추천을 이 국가로 제한하지는 않습니다. 지역 코드는 ccTLD ('최상위 도메인') 2자리 값을 허용합니다. 대부분의 ccTLD 코드는 ISO 3166-1 코드와 동일하지만 일부 특별한 예외가 있습니다. 예를 들어 영국의 ccTLD는 'uk' (`.co.uk`)이지만 ISO 3166-1 코드는 'gb'입니다(엄밀히 말하면 'The United Kingdom of Great Britain and Northern Ireland'의 항목). HTML 속성: `requested-region="string"`
`unitSystem` attr: unit-system	입력 유형: `UnitSystem optional` 출력 유형: `UnitSystem optional` 거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 requestedRegion에 따라 단위 시스템이 결정됩니다. HTML 속성: `unit-system="value-name"`
`value`	입력 유형: `string optional` 출력 유형: `string` 입력 요소의 값입니다.

슬롯
`clear-icon`	슬롯 요소를 지우기 아이콘 위치에 배치합니다. 입력란에 텍스트가 있으면 입력란 끝에 지우기 버튼이 표시됩니다.
`input-icon`	슬롯 요소를 입력 아이콘 위치에 배치합니다. 입력 아이콘은 인라인 모드의 입력 상자 시작 부분에 표시됩니다.
`prediction-item-icon`	이 슬롯은 예측 항목 옆에 표시되는 아이콘으로 렌더링할 `<template>` 요소를 정확히 하나만 허용합니다.

부품
`focus-ring`	포커스가 있는 요소 (입력 또는 예측 항목) 주위에 포커스 링을 표시하는 데 사용되는 요소
`input`	자동 완성 요소의 입력 요소입니다.
`prediction-item`	단일 예측을 나타내는 예측 드롭다운의 항목입니다.
`prediction-item-icon`	예상 검색어 목록에서 각 항목의 왼쪽에 표시되는 아이콘.
`prediction-item-main-text`	예상 검색어의 기본 텍스트인 예상 검색어 항목의 일부입니다. 지리적 위치의 경우 '시드니'와 같은 장소 이름이나 '10. King Street'와 같은 도로명과 번지가 포함됩니다. 기본적으로 prediction-item-main-text는 검은색으로 지정됩니다. prediction-item에 추가 텍스트가 있으면 prediction-item-main-text의 외부에 있으며 prediction-item의 스타일을 상속합니다. 기본적으로 색상은 회색으로 지정됩니다. 추가 텍스트는 일반적으로 주소입니다.
`prediction-item-match`	사용자의 입력과 일치하는 반환된 예상 검색어의 일부. 기본적으로, 일치하는 텍스트는 굵은 텍스트로 강조됩니다. 일치하는 텍스트는 prediction-item-main-text 내에서만 강조 표시됩니다.
`prediction-item-nonmatch`	사용자의 입력과 일치하지 않는 예상 검색어 기본 텍스트의 일부.
`prediction-item-secondary-text`	예상 검색어의 보조 텍스트인 prediction-item의 일부입니다. 추가 텍스트는 일반적으로 주소입니다.
`prediction-item-selected`	사용자가 키보드로 탐색하는 항목. 참고: 선택한 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 모두 받습니다.
`prediction-list`	장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래에 드롭다운 목록으로 표시됩니다.

CSS 속성
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color`	요소의 글꼴을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font`	요소의 글꼴을 재정의합니다.
`font-family`	요소의 글꼴을 재정의합니다.
`font-size`	요소의 글꼴을 재정의합니다.
`font-style`	요소의 글꼴을 재정의합니다.
`font-weight`	요소의 글꼴을 재정의합니다.
`line-height`	요소의 글꼴을 재정의합니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(errorEvent)` 인수: `errorEvent: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-select`	`function(placePredictionSelectEvent)` 인수: `placePredictionSelectEvent: PlacePredictionSelectEvent optional` 이 이벤트는 사용자가 예상 장소를 선택할 때 실행됩니다. Place 객체로 변환할 수 있는 PlacePrediction 객체를 포함합니다.

PlaceAutocompleteElementOptions 인터페이스

인터페이스 google.maps.places.PlaceAutocompleteElementOptions
PlaceAutocompleteElement에서 구현됨

PlaceAutocompleteElement를 구성하는 옵션입니다. 각 속성에 대한 설명은 PlaceAutocompleteElement 클래스에서 동일한 이름의 속성을 참고하세요.

속성
`description` 선택사항	유형: `string optional` 입력 요소에 사용할 설명입니다. 이는 입력 요소에 포커스가 있을 때 스크린 리더에 의해 감지됩니다.
`disabled` 선택사항	유형: `boolean optional`
`futureOpeningBusinessesIncluded` 선택사항	유형: `boolean optional`
`includedPrimaryTypes` 선택사항	유형: `Array<string> optional`
`includedRegionCodes` 선택사항	유형: `Array<string> optional`
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional`
`locationBias` 선택사항	유형: `LocationBias optional`
`locationRestriction` 선택사항	유형: `LocationRestriction optional`
`maxlength` 선택사항	유형: `number optional`
`name` 선택사항	유형: `string optional`
`noClearButton` 선택사항	유형: `boolean optional`
`noInputIcon` 선택사항	유형: `boolean optional`
`origin` 선택사항	유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional`
`placeholder` 선택사항	유형: `string optional`
`pureServiceAreaBusinessesIncluded` 선택사항	유형: `boolean optional`
`readonly` 선택사항	유형: `boolean optional`
`requestedLanguage` 선택사항	유형: `string optional`
`requestedRegion` 선택사항	유형: `string optional`
`unitSystem` 선택사항	유형: `UnitSystem optional`
`value` 선택사항	유형: `string optional` 입력 요소의 값입니다.

PlacePredictionSelectEvent 클래스

class google.maps.places.PlacePredictionSelectEvent extends Event
library "places"

이 이벤트는 사용자가 PlaceAutocompleteElement를 사용하여 예상 검색어 항목을 선택한 후에 생성됩니다. event.placePrediction를 사용하여 선택 항목에 액세스합니다.

PlacePrediction.toPlace를 호출하여 placePrediction을 Place로 변환합니다.

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");

속성
`placePrediction` readonly	유형: `PlacePrediction` `PlacePrediction.toPlace`를 호출하여 이를 `Place`로 변환합니다.

BasicPlaceAutocompleteElement 클래스

class google.maps.places.BasicPlaceAutocompleteElement extends HTMLElement implements BasicPlaceAutocompleteElementOptions
library "places"

BasicPlaceAutocompleteElement는 Places Autocomplete API의 UI 구성요소를 제공하는 HTMLElement 서브클래스입니다.

<gmp-basic-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-basic-place-autocomplete>

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");

생성자
`BasicPlaceAutocompleteElement`	`BasicPlaceAutocompleteElement([options])` 매개변수: `options: BasicPlaceAutocompleteElementOptions optional`

속성
`description` attr: description	유형: `string optional` 입력 요소에 사용할 설명입니다. 이는 입력 요소에 포커스가 있을 때 스크린 리더에 의해 감지됩니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby를 참고하세요. HTML 속성: `description="string"`
`disabled` attr: disabled	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 요소가 사용 중지되었는지 여부입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled를 참고하세요. HTML 속성: `disabled`
`futureOpeningBusinessesIncluded` attr: future-opening-businesses-included	유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 장소를 포함할지 여부입니다. HTML 속성: `future-opening-businesses-included`
`includedPrimaryTypes` attr: included-primary-types	유형: `Array<string> optional` 포함된 기본 장소 유형 (예: 'restaurant' 또는 'gas_station') 장소는 기본 유형이 이 목록에 포함된 경우에만 반환됩니다. 값을 최대 5개까지 지정할 수 있습니다. 유형을 지정하지 않으면 모든 장소 유형이 반환됩니다. HTML 속성: `included-primary-types="type1 type2 type3..."`
`includedRegionCodes` attr: included-region-codes	유형: `Array<string> optional` 지정된 리전의 결과만 포함합니다. 최대 15개의 CLDR 2자리 리전 코드로 지정됩니다. 빈 집합은 결과를 제한하지 않습니다. `locationRestriction`와 `includedRegionCodes`가 모두 설정된 경우 결과는 교차 영역에 위치합니다. HTML 속성: `included-region-codes="c1 c2 c3..."`
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`locationBias`	유형: `LocationBias optional` 장소를 검색할 때 사용할 소프트 경계 또는 힌트입니다.
`locationRestriction`	유형: `LocationRestriction optional` 검색 결과를 제한하는 경계입니다.
`maxlength` attr: maxlength	유형: `number optional` 사용자가 입력할 수 있는 최대 문자 수입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength를 참고하세요. HTML 속성: `maxlength="number"`
`name` attr: name	유형: `string optional` 입력 요소에 사용할 이름입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name을 참고하세요. 입력의 name 속성과 동일한 동작을 따릅니다. 이 이름은 양식이 제출될 때 사용됩니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form을 참고하세요. HTML 속성: `name="string"`
`noClearButton` attr: no-clear-button	입력 유형: `boolean optional` 출력 유형: `boolean` 지우기 버튼을 숨길지 여부입니다. HTML 속성: `no-clear-button`
`noInputIcon` attr: no-input-icon	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 아이콘을 숨길지 여부입니다. HTML 속성: `no-input-icon`
`origin` attr: origin	입력 유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 출력 유형: `LatLngAltitude optional` 거리를 계산할 출발지입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 지정된 경우 계산에 사용되지 않습니다. HTML 속성: `origin="lat,lng"` `origin="lat,lng,altitude"`
`placeholder` attr: placeholder	유형: `string optional` 입력 요소에 사용할 플레이스홀더 텍스트입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder를 참고하세요. HTML 속성: `placeholder="string"`
`pureServiceAreaBusinessesIncluded` attr: pure-service-area-businesses-included	유형: `boolean optional` 순수 방문 서비스 업체인 장소를 포함할지 여부입니다. HTML 속성: `pure-service-area-businesses-included`
`readonly` attr: readonly	입력 유형: `boolean optional` 출력 유형: `boolean` 입력 요소가 읽기 전용인지 여부입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly를 참고하세요. HTML 속성: `readonly`
`requestedLanguage` attr: requested-language	유형: `string optional` 가능한 경우 결과를 반환할 언어의 언어 식별자입니다. 선택한 언어로 된 검색 결과에 더 높은 순위가 부여될 수 있지만 추천이 이 언어로만 제한되지는 않습니다. 지원 언어 목록을 참조하세요. HTML 속성: `requested-language="string"`
`requestedRegion` attr: requested-region	유형: `string optional` 결과 형식 지정 및 결과 필터링에 사용되는 지역 코드입니다. 추천을 이 국가로 제한하지는 않습니다. 지역 코드는 ccTLD ('최상위 도메인') 2자리 값을 허용합니다. 대부분의 ccTLD 코드는 ISO 3166-1 코드와 동일하지만 일부 특별한 예외가 있습니다. 예를 들어 영국의 ccTLD는 'uk' (`.co.uk`)이지만 ISO 3166-1 코드는 'gb'입니다(엄밀히 말하면 'The United Kingdom of Great Britain and Northern Ireland'의 항목). HTML 속성: `requested-region="string"`
`unitSystem` attr: unit-system	입력 유형: `UnitSystem optional` 출력 유형: `UnitSystem optional` 거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 requestedRegion에 따라 단위 시스템이 결정됩니다. HTML 속성: `unit-system="value-name"`

슬롯
`clear-icon`	슬롯 요소를 지우기 아이콘 위치에 배치합니다. 입력란에 텍스트가 있으면 입력란 끝에 지우기 버튼이 표시됩니다.
`input-icon`	슬롯 요소를 입력 아이콘 위치에 배치합니다. 입력 아이콘은 인라인 모드의 입력 상자 시작 부분에 표시됩니다.
`prediction-item-icon`	이 슬롯은 예측 항목 옆에 표시되는 아이콘으로 렌더링할 `<template>` 요소를 정확히 하나만 허용합니다.

부품
`focus-ring`	포커스가 있는 요소 (입력 또는 예측 항목) 주위에 포커스 링을 표시하는 데 사용되는 요소
`input`	자동 완성 요소의 입력 요소입니다.
`prediction-item`	단일 예측을 나타내는 예측 드롭다운의 항목입니다.
`prediction-item-icon`	예상 검색어 목록에서 각 항목의 왼쪽에 표시되는 아이콘.
`prediction-item-main-text`	예상 검색어의 기본 텍스트인 예상 검색어 항목의 일부입니다. 지리적 위치의 경우 '시드니'와 같은 장소 이름이나 '10. King Street'와 같은 도로명과 번지가 포함됩니다. 기본적으로 prediction-item-main-text는 검은색으로 지정됩니다. prediction-item에 추가 텍스트가 있으면 prediction-item-main-text의 외부에 있으며 prediction-item의 스타일을 상속합니다. 기본적으로 색상은 회색으로 지정됩니다. 추가 텍스트는 일반적으로 주소입니다.
`prediction-item-match`	사용자의 입력과 일치하는 반환된 예상 검색어의 일부. 기본적으로, 일치하는 텍스트는 굵은 텍스트로 강조됩니다. 일치하는 텍스트는 prediction-item-main-text 내에서만 강조 표시됩니다.
`prediction-item-nonmatch`	사용자의 입력과 일치하지 않는 예상 검색어 기본 텍스트의 일부.
`prediction-item-secondary-text`	예상 검색어의 보조 텍스트인 prediction-item의 일부입니다. 추가 텍스트는 일반적으로 주소입니다.
`prediction-item-selected`	사용자가 키보드로 탐색하는 항목. 참고: 선택한 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 모두 받습니다.
`prediction-list`	장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래에 드롭다운 목록으로 표시됩니다.

CSS 속성
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color`	요소의 글꼴을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font`	요소의 글꼴을 재정의합니다.
`font-family`	요소의 글꼴을 재정의합니다.
`font-size`	요소의 글꼴을 재정의합니다.
`font-style`	요소의 글꼴을 재정의합니다.
`font-weight`	요소의 글꼴을 재정의합니다.
`line-height`	요소의 글꼴을 재정의합니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(errorEvent)` 인수: `errorEvent: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-select`	`function(placeSelectEvent)` 인수: `placeSelectEvent: PlaceSelectEvent optional` 이 이벤트는 사용자가 예상 장소를 선택할 때 실행됩니다. Place 객체를 포함합니다.

BasicPlaceAutocompleteElementOptions 인터페이스

인터페이스 google.maps.places.BasicPlaceAutocompleteElementOptions
BasicPlaceAutocompleteElement에서 구현됨

BasicPlaceAutocompleteElement를 구성하기 위한 옵션입니다.

속성
`description` 선택사항	유형: `string optional` 입력 요소에 사용할 설명입니다. 이는 입력 요소에 포커스가 있을 때 스크린 리더에 의해 감지됩니다.
`disabled` 선택사항	유형: `boolean optional`
`futureOpeningBusinessesIncluded` 선택사항	유형: `boolean optional`
`includedPrimaryTypes` 선택사항	유형: `Array<string> optional`
`includedRegionCodes` 선택사항	유형: `Array<string> optional`
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional`
`locationBias` 선택사항	유형: `LocationBias optional`
`locationRestriction` 선택사항	유형: `LocationRestriction optional`
`maxlength` 선택사항	유형: `number optional`
`name` 선택사항	유형: `string optional`
`noClearButton` 선택사항	유형: `boolean optional`
`noInputIcon` 선택사항	유형: `boolean optional`
`origin` 선택사항	유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional`
`placeholder` 선택사항	유형: `string optional`
`pureServiceAreaBusinessesIncluded` 선택사항	유형: `boolean optional`
`readonly` 선택사항	유형: `boolean optional`
`requestedLanguage` 선택사항	유형: `string optional`
`requestedRegion` 선택사항	유형: `string optional`
`unitSystem` 선택사항	유형: `UnitSystem optional`

PlaceDetailsElement 클래스

class google.maps.places.PlaceDetailsElement extends HTMLElement implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"

전체 레이아웃으로 장소의 세부정보를 표시합니다. PlaceDetailsPlaceRequestElement 또는 PlaceDetailsLocationRequestElement를 추가하여 렌더링할 장소를 지정합니다. PlaceContentConfigElement, PlaceStandardContentElement 또는 PlaceAllContentElement를 추가하여 렌더링할 콘텐츠를 지정합니다.

예:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details>

이 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 장소 UI 키트 API를 사용 설정하세요.

<gmp-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-place-details>

const {PlaceDetailsElement} = await google.maps.importLibrary("places");

생성자
`PlaceDetailsElement`	`PlaceDetailsElement([options])` 매개변수: `options: PlaceDetailsElementOptions optional`

속성
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`place` readonly	유형: `Place optional` 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.

CSS 속성
`--gmp-button-border-color`	'지도에서 열기' 버튼의 테두리 색상입니다.
`--gmp-button-border-radius`	'지도에서 열기' 버튼의 테두리 반경
`--gmp-button-border-width`	'지도에서 열기' 버튼의 테두리 너비입니다.
`--gmp-collage-border-radius-outer`	미디어 콜라주의 바깥쪽 모서리의 테두리 반경입니다.
`--gmp-dialog-border-radius`	Google 지도 공개 대화상자의 테두리 반경입니다.
`--gmp-mat-color-disabled-surface`	사용 중지 상태 또는 부재를 전달하기 위한 표면 색상입니다. 빈 리뷰 별표에 사용됩니다.
`--gmp-mat-color-info`	정보 감정이 있는 UI 요소의 색상입니다. 휠체어 아이콘에 사용됩니다.
`--gmp-mat-color-negative`	부정적인 감정이 있는 UI 요소의 색상입니다. 현재 영업 중 상태에서 '영업 종료' 텍스트에 사용됩니다.
`--gmp-mat-color-neutral-container`	중성 채우기 UI 요소의 컨테이너 색상입니다. 이미지 자리표시자 및 리뷰 게시일 배지에 사용됩니다.
`--gmp-mat-color-on-neutral-container`	중립 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. 리뷰 게시일 배지 및 EV 충전기 사용 가능 여부 배지(사용할 수 없는 경우)에 사용됩니다.
`--gmp-mat-color-on-positive-container`	긍정 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. 가능한 경우 EV 충전기 사용 가능 여부 배지에 사용됩니다.
`--gmp-mat-color-on-secondary-container`	보조 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. '지도에서 열기' 버튼의 텍스트 및 아이콘에 사용됩니다.
`--gmp-mat-color-on-surface`	모든 표면 색상에 대비되는 텍스트 및 아이콘 색상입니다. 일반 텍스트에 사용됩니다.
`--gmp-mat-color-on-surface-variant`	표면 색상에 대비하여 텍스트와 아이콘에 사용되는 강조도가 낮은 색상입니다. 덜 강조된 텍스트에 사용됩니다.
`--gmp-mat-color-outline-decorative`	상호작용 요소가 아닌 요소의 윤곽선 색상입니다. 요소의 테두리에 사용됩니다.
`--gmp-mat-color-positive`	긍정적인 감정이 있는 UI 요소의 색상입니다. 현재 영업 중 상태의 '영업 중' 텍스트에 사용됩니다.
`--gmp-mat-color-positive-container`	긍정적인 감정을 전달하는 UI 요소의 컨테이너 색상입니다. 가능한 경우 EV 충전기 사용 가능 여부 배지에 사용됩니다.
`--gmp-mat-color-primary`	표면 색상과 대비되는 대화형 텍스트 및 아이콘의 색상입니다. 리뷰 수, Google 지도 공개 대화상자의 링크, 웹사이트 링크, 개요 탭의 아이콘, 탭 표시줄 제목의 (마우스 오버/포커스/텍스트 색상)에 사용됩니다.
`--gmp-mat-color-secondary-container`	색조 버튼과 같은 열성 구성요소의 경우 표면 대비 눈에 덜 띄는 채우기 색상입니다. '지도에서 열기' 버튼의 배경에 사용됩니다.
`--gmp-mat-color-surface`	배경 색상입니다. 요소 및 Google 지도 공개 대화상자의 배경에 사용됩니다.
`--gmp-mat-font-body-medium`	Google 지도 공개 대화상자의 장소 주소, 평점, 유형, 가격, 현재 영업 중 상태, 영업시간, 리뷰, 전화번호, 웹사이트, Plus Code, 주요 기능, 본문 텍스트에 사용됩니다.
`--gmp-mat-font-body-small`	'정보' 탭의 기능 목록에서 본문 텍스트에 사용됩니다.
`--gmp-mat-font-display-small`	'정보' 탭의 각 기능 제목에 대한 장소 이름과 텍스트에 사용됩니다.
`--gmp-mat-font-family`	모든 텍스트에 사용되는 기본 글꼴 모음입니다.
`--gmp-mat-font-headline-medium`	Google 지도 공개 대화상자의 제목 텍스트에 사용됩니다.
`--gmp-mat-font-label-large`	탭 제목, '지도에서 열기' 버튼, 사진 갤러리의 리뷰 작성자 저작자 표시 텍스트, 리뷰 섹션의 리뷰 작성자 저작자 표시 텍스트, Google 지도 공개 대화상자의 링크에 사용됩니다.
`--gmp-mat-font-label-medium`	사진 수 배지 및 리뷰 게시일 배지에 사용됩니다.
`--gmp-mat-font-title-small`	'정보' 탭의 각 섹션 제목에 사용됩니다.
`--gmp-mat-spacing-extra-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-extra-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-medium`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-two-extra-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-star-rating-color`	평점에서 채워진 별의 색상입니다.
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font-size`	요소의 모든 텍스트와 아이콘의 크기를 조정합니다. 이는 내부적으로 em 단위로 정의됩니다. 기본값은 `16px`입니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(event)` 인수: `event: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-load`	`function(event)` 인수: `event: Event optional` 이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.

PlaceDetailsElementOptions 인터페이스

인터페이스 google.maps.places.PlaceDetailsElementOptions
AdvancedPlaceDetailsElementOptions에 의해 확장됨
AdvancedPlaceDetailsElement, PlaceDetailsElement에 의해 구현됨

PlaceDetailsElement 옵션

속성
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.

PlaceDetailsCompactElement 클래스

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"

장소의 세부정보를 압축 레이아웃으로 표시합니다. PlaceDetailsPlaceRequestElement 또는 PlaceDetailsLocationRequestElement를 추가하여 렌더링할 장소를 지정합니다. PlaceContentConfigElement, PlaceStandardContentElement 또는 PlaceAllContentElement를 추가하여 렌더링할 콘텐츠를 지정합니다.

예:

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact>

이 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 장소 UI 키트 API를 사용 설정하세요.

<gmp-place-details-compact
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  truncation-preferred>
</gmp-place-details-compact>

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");

생성자
`PlaceDetailsCompactElement`	`PlaceDetailsCompactElement([options])` 매개변수: `options: PlaceDetailsCompactElementOptions optional`

속성
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`orientation` attr: orientation	유형: `PlaceDetailsOrientation optional` 기본값: `PlaceDetailsOrientation.VERTICAL` 요소의 방향 변형 (세로 또는 가로)입니다. HTML 속성: `orientation="value-name"`
`place` readonly	유형: `Place optional` 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.
`truncationPreferred` attr: truncation-preferred	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` true인 경우 장소 이름과 주소를 줄바꿈하지 않고 한 줄에 맞게 자릅니다. HTML 속성: `truncation-preferred`

CSS 속성
`--gmp-button-border-color`	'지도에서 열기' 버튼의 테두리 색상입니다.
`--gmp-button-border-radius`	'지도에서 열기' 버튼의 테두리 반경
`--gmp-button-border-width`	'지도에서 열기' 버튼의 테두리 너비입니다.
`--gmp-dialog-border-radius`	Google 지도 공개 대화상자의 테두리 반경입니다.
`--gmp-mat-color-info`	정보 감정이 있는 UI 요소의 색상입니다. 휠체어 아이콘에 사용됩니다.
`--gmp-mat-color-negative`	부정적인 감정이 있는 UI 요소의 색상입니다. 현재 영업 중 상태에서 '영업 종료' 텍스트에 사용됩니다.
`--gmp-mat-color-neutral-container`	중성 채우기 UI 요소의 컨테이너 색상입니다. 이미지 자리표시자에 사용됩니다.
`--gmp-mat-color-on-secondary-container`	보조 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. '지도에서 열기' 버튼의 텍스트 및 아이콘에 사용됩니다.
`--gmp-mat-color-on-surface`	모든 표면 색상에 대비되는 텍스트 및 아이콘 색상입니다. 일반 텍스트에 사용됩니다.
`--gmp-mat-color-on-surface-variant`	표면 색상에 대비하여 텍스트와 아이콘에 사용되는 강조도가 낮은 색상입니다. 덜 강조된 텍스트에 사용됩니다.
`--gmp-mat-color-outline-decorative`	상호작용 요소가 아닌 요소의 윤곽선 색상입니다. 요소의 테두리에 사용됩니다.
`--gmp-mat-color-positive`	긍정적인 감정이 있는 UI 요소의 색상입니다. 현재 영업 중 상태의 '영업 중' 텍스트에 사용됩니다.
`--gmp-mat-color-primary`	표면 색상과 대비되는 대화형 텍스트 및 아이콘의 색상입니다. 리뷰 수와 Google 지도 공개 대화상자의 링크에 사용됩니다.
`--gmp-mat-color-secondary-container`	색조 버튼과 같은 열성 구성요소의 경우 표면 대비 눈에 덜 띄는 채우기 색상입니다. '지도에서 열기' 버튼의 배경에 사용됩니다.
`--gmp-mat-color-surface`	배경 색상입니다. 요소 및 Google 지도 공개 대화상자의 배경에 사용됩니다.
`--gmp-mat-font-body-medium`	Google 지도 공개 대화상자의 본문 텍스트에 사용됩니다.
`--gmp-mat-font-body-small`	장소 주소, 평점, 유형, 가격, 현재 영업 중 상태에 사용됩니다.
`--gmp-mat-font-family`	모든 텍스트에 사용되는 기본 글꼴 모음입니다.
`--gmp-mat-font-headline-medium`	Google 지도 공개 대화상자의 제목 텍스트에 사용됩니다.
`--gmp-mat-font-label-large`	'지도에서 열기' 버튼과 Google 지도 공개 대화상자의 링크, 사진 갤러리의 리뷰 작성자 저작자 표시 텍스트에 사용됩니다.
`--gmp-mat-font-label-medium`	사진 수 배지에 사용됩니다.
`--gmp-mat-font-title-small`	장소 이름에 사용됩니다.
`--gmp-mat-spacing-extra-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-medium`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-star-rating-color`	평점에서 채워진 별의 색상입니다.
`--gmp-thumbnail-border-radius`	장소 썸네일 이미지의 테두리 반경입니다.
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font-size`	요소의 모든 텍스트와 아이콘의 크기를 조정합니다. 이는 내부적으로 em 단위로 정의됩니다. 기본값은 `16px`입니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(event)` 인수: `event: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-load`	`function(event)` 인수: `event: Event optional` 이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.

PlaceDetailsCompactElementOptions 인터페이스

인터페이스 google.maps.places.PlaceDetailsCompactElementOptions
AdvancedPlaceDetailsCompactElementOptions에 의해 확장됨
AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement에 의해 구현됨

PlaceDetailsCompactElement 옵션

속성
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.
`orientation` 선택사항	유형: `PlaceDetailsOrientation optional` `PlaceDetailsCompactElement.orientation`를 참조하세요.
`truncationPreferred` 선택사항	유형: `boolean optional` `PlaceDetailsCompactElement.truncationPreferred`를 참조하세요.

AdvancedPlaceDetailsElement 클래스

class google.maps.places.AdvancedPlaceDetailsElement extends PlaceDetailsElement, HTMLElement implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"

전체 레이아웃으로 장소의 세부정보를 표시합니다. PlaceDetailsPlaceRequestElement 또는 PlaceDetailsLocationRequestElement를 추가하여 렌더링할 장소를 지정합니다. PlaceStandardContentElement, PlaceAllContentElement 또는 장소 세부정보 요소를 직접 추가하여 렌더링할 콘텐츠를 구성합니다.

예:

 <gmp-advanced-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-standard-content>
   </gmp-place-standard-content>
 </gmp-advanced-place-details>

이 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 장소 UI 키트 API를 사용 설정하세요.

<gmp-advanced-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details>

const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");

생성자
`AdvancedPlaceDetailsElement`	`AdvancedPlaceDetailsElement([options])` 매개변수: `options: AdvancedPlaceDetailsElementOptions optional`

속성
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`place` readonly	유형: `Place optional` 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.

슬롯
`action-corner`	`PlaceLinkElement` 및 `PlaceButtonElement`의 슬롯입니다.
`action-main`	`PlaceLinkElement` 및 `PlaceButtonElement`의 슬롯입니다.

CSS 속성
상속됨: `--gmp-button-border-color`, `--gmp-button-border-radius`, `--gmp-button-border-width`, `--gmp-collage-border-radius-outer`, `--gmp-dialog-border-radius`, `--gmp-mat-color-disabled-surface`, `--gmp-mat-color-info`, `--gmp-mat-color-negative`, `--gmp-mat-color-neutral-container`, `--gmp-mat-color-on-neutral-container`, `--gmp-mat-color-on-positive-container`, `--gmp-mat-color-on-secondary-container`, `--gmp-mat-color-on-surface`, `--gmp-mat-color-on-surface-variant`, `--gmp-mat-color-outline-decorative`, `--gmp-mat-color-positive`, `--gmp-mat-color-positive-container`, `--gmp-mat-color-primary`, `--gmp-mat-color-secondary-container`, `--gmp-mat-color-surface`, `--gmp-mat-font-body-medium`, `--gmp-mat-font-body-small`, `--gmp-mat-font-display-small`, `--gmp-mat-font-family`, `--gmp-mat-font-headline-medium`, `--gmp-mat-font-label-large`, `--gmp-mat-font-label-medium`, `--gmp-mat-font-title-small`, `--gmp-mat-spacing-extra-large`, `--gmp-mat-spacing-extra-small`, `--gmp-mat-spacing-large`, `--gmp-mat-spacing-medium`, `--gmp-mat-spacing-small`, `--gmp-mat-spacing-two-extra-large`, `--gmp-star-rating-color`, `background-color`, `border`, `border-radius`, `color-scheme`, `font-size`

CSS 속성

상속됨: --gmp-button-border-color, --gmp-button-border-radius, --gmp-button-border-width, --gmp-collage-border-radius-outer, --gmp-dialog-border-radius, --gmp-mat-color-disabled-surface, --gmp-mat-color-info, --gmp-mat-color-negative, --gmp-mat-color-neutral-container, --gmp-mat-color-on-neutral-container, --gmp-mat-color-on-positive-container, --gmp-mat-color-on-secondary-container, --gmp-mat-color-on-surface, --gmp-mat-color-on-surface-variant, --gmp-mat-color-outline-decorative, --gmp-mat-color-positive, --gmp-mat-color-positive-container, --gmp-mat-color-primary, --gmp-mat-color-secondary-container, --gmp-mat-color-surface, --gmp-mat-font-body-medium, --gmp-mat-font-body-small, --gmp-mat-font-display-small, --gmp-mat-font-family, --gmp-mat-font-headline-medium, --gmp-mat-font-label-large, --gmp-mat-font-label-medium, --gmp-mat-font-title-small, --gmp-mat-spacing-extra-large, --gmp-mat-spacing-extra-small, --gmp-mat-spacing-large, --gmp-mat-spacing-medium, --gmp-mat-spacing-small, --gmp-mat-spacing-two-extra-large, --gmp-star-rating-color, background-color, border, border-radius, color-scheme, font-size

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
상속됨: `gmp-error`, `gmp-load`

AdvancedPlaceDetailsElementOptions 인터페이스

interface google.maps.places.AdvancedPlaceDetailsElementOptions extends PlaceDetailsElementOptions
implemented by AdvancedPlaceDetailsElement

AdvancedPlaceDetailsElement 옵션

속성
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.

AdvancedPlaceDetailsCompactElement 클래스

class google.maps.places.AdvancedPlaceDetailsCompactElement extends PlaceDetailsCompactElement, HTMLElement implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"

장소의 세부정보를 압축 레이아웃으로 표시합니다. PlaceDetailsPlaceRequestElement 또는 PlaceDetailsLocationRequestElement를 추가하여 렌더링할 장소를 지정합니다. PlaceStandardContentElement, PlaceAllContentElement를 추가하거나 특정 콘텐츠 하위 요소를 지정하여 렌더링할 콘텐츠를 구성합니다.

이 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 장소 UI 키트 API를 사용 설정하세요.

<gmp-advanced-place-details-compact
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details-compact>

const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");

생성자
`AdvancedPlaceDetailsCompactElement`	`AdvancedPlaceDetailsCompactElement([options])` 매개변수: `options: AdvancedPlaceDetailsCompactElementOptions optional`

속성
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`place` readonly	유형: `Place optional` 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.
상속됨: `orientation` (attr: `orientation`), `truncationPreferred` (attr: `truncation-preferred`)

슬롯
`action-corner`	`PlaceLinkElement` 및 `PlaceButtonElement`의 슬롯입니다.
`action-main`	`PlaceLinkElement` 및 `PlaceButtonElement`의 슬롯입니다.

CSS 속성
상속됨: `--gmp-button-border-color`, `--gmp-button-border-radius`, `--gmp-button-border-width`, `--gmp-dialog-border-radius`, `--gmp-mat-color-info`, `--gmp-mat-color-negative`, `--gmp-mat-color-neutral-container`, `--gmp-mat-color-on-secondary-container`, `--gmp-mat-color-on-surface`, `--gmp-mat-color-on-surface-variant`, `--gmp-mat-color-outline-decorative`, `--gmp-mat-color-positive`, `--gmp-mat-color-primary`, `--gmp-mat-color-secondary-container`, `--gmp-mat-color-surface`, `--gmp-mat-font-body-medium`, `--gmp-mat-font-body-small`, `--gmp-mat-font-family`, `--gmp-mat-font-headline-medium`, `--gmp-mat-font-label-large`, `--gmp-mat-font-label-medium`, `--gmp-mat-font-title-small`, `--gmp-mat-spacing-extra-small`, `--gmp-mat-spacing-large`, `--gmp-mat-spacing-medium`, `--gmp-mat-spacing-small`, `--gmp-star-rating-color`, `--gmp-thumbnail-border-radius`, `background-color`, `border`, `border-radius`, `color-scheme`, `font-size`

CSS 속성

상속됨: --gmp-button-border-color, --gmp-button-border-radius, --gmp-button-border-width, --gmp-dialog-border-radius, --gmp-mat-color-info, --gmp-mat-color-negative, --gmp-mat-color-neutral-container, --gmp-mat-color-on-secondary-container, --gmp-mat-color-on-surface, --gmp-mat-color-on-surface-variant, --gmp-mat-color-outline-decorative, --gmp-mat-color-positive, --gmp-mat-color-primary, --gmp-mat-color-secondary-container, --gmp-mat-color-surface, --gmp-mat-font-body-medium, --gmp-mat-font-body-small, --gmp-mat-font-family, --gmp-mat-font-headline-medium, --gmp-mat-font-label-large, --gmp-mat-font-label-medium, --gmp-mat-font-title-small, --gmp-mat-spacing-extra-small, --gmp-mat-spacing-large, --gmp-mat-spacing-medium, --gmp-mat-spacing-small, --gmp-star-rating-color, --gmp-thumbnail-border-radius, background-color, border, border-radius, color-scheme, font-size

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
상속됨: `gmp-error`, `gmp-load`

AdvancedPlaceDetailsCompactElementOptions 인터페이스

interface google.maps.places.AdvancedPlaceDetailsCompactElementOptions extends PlaceDetailsCompactElementOptions
implemented by AdvancedPlaceDetailsCompactElement

AdvancedPlaceDetailsCompactElement 옵션

속성
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.
상속됨: `orientation`, `truncationPreferred`

PlaceDetailsOrientation 상수

상수 google.maps.places.PlaceDetailsOrientation
라이브러리 "places"

PlaceDetailsCompactElement의 방향 변형입니다.

이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 PlaceDetailsOrientationString 유형으로 정의됩니다.

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");

상수
`HORIZONTAL`	가로 방향
`VERTICAL`	세로 방향

PlaceDetailsPlaceRequestElement 클래스

class google.maps.places.PlaceDetailsPlaceRequestElement extends HTMLElement implements PlaceDetailsPlaceRequestElementOptions
library "places"

장소 객체, ID 또는 리소스 이름을 기반으로 데이터를 로드하도록 PlaceDetailsCompactElement 또는 PlaceDetailsElement를 구성합니다. 이 요소를 PlaceDetailsCompactElement 또는 PlaceDetailsElement의 하위 요소로 추가하여 지정된 장소의 데이터를 로드합니다. 예를 들면 다음과 같습니다.

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details>

<gmp-place-details-place-request
  place="places/###">
</gmp-place-details-place-request>

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");

생성자
`PlaceDetailsPlaceRequestElement`	`PlaceDetailsPlaceRequestElement([options])` 매개변수: `options: PlaceDetailsPlaceRequestElementOptions optional`

속성
`place` attr: place	입력 유형: `Place\|string optional` 출력 유형: `Place optional` 기본값: `null` 장소 세부정보 간략 요소에 세부정보를 렌더링할 장소 객체, ID 또는 리소스 이름입니다. 이 속성은 속성에 리소스 이름으로 반영됩니다. HTML 속성: `place="places/###"`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceDetailsPlaceRequestElementOptions 인터페이스

인터페이스 google.maps.places.PlaceDetailsPlaceRequestElementOptions
PlaceDetailsPlaceRequestElement에서 구현됨

PlaceDetailsPlaceRequestElement 옵션

속성
`place` 선택사항	유형: `Place\|string optional` `PlaceDetailsPlaceRequestElement.place` 보기

PlaceDetailsLocationRequestElement 클래스

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
library "places"

위치를 기반으로 데이터를 로드하도록 PlaceDetailsCompactElement 또는 PlaceDetailsElement를 구성합니다. 이 요소를 PlaceDetailsCompactElement 또는 PlaceDetailsElement의 하위 요소로 추가하여 지정된 위치의 데이터를 로드합니다. 예를 들면 다음과 같습니다.

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details>

<gmp-place-details-location-request
  location="lat,lng">
</gmp-place-details-location-request>

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");

생성자
`PlaceDetailsLocationRequestElement`	`PlaceDetailsLocationRequestElement([options])` 매개변수: `options: PlaceDetailsLocationRequestElementOptions optional`

속성
`location` attr: location	입력 유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 출력 유형: `LatLngAltitude optional` 기본값: `null` 장소 세부정보 요소에서 세부정보를 렌더링할 위치입니다. `LatLngAltitude`로 정규화합니다. HTML 속성: `location="lat,lng"`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceDetailsLocationRequestElementOptions 인터페이스

인터페이스 google.maps.places.PlaceDetailsLocationRequestElementOptions
PlaceDetailsLocationRequestElement에서 구현됨

PlaceDetailsLocationRequestElement 옵션

속성
`location` 선택사항	유형: `LatLng\|LatLngLiteral\|LatLngAltitude\|LatLngAltitudeLiteral optional` 장소를 렌더링할 위치입니다.

PlaceSearchElement 클래스

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"

장소 검색 결과를 목록으로 표시합니다. PlaceTextSearchRequestElement 또는 PlaceNearbySearchRequestElement를 추가하여 결과를 렌더링할 요청을 지정합니다. PlaceContentConfigElement, PlaceStandardContentElement 또는 PlaceAllContentElement를 추가하여 렌더링할 콘텐츠를 지정합니다.

예:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

장소 검색 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 장소 UI 키트 API를 사용 설정하세요.

<gmp-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-place-search>

const {PlaceSearchElement} = await google.maps.importLibrary("places");

생성자
`PlaceSearchElement`	`PlaceSearchElement([options])` 매개변수: `options: PlaceSearchElementOptions optional`

속성
`attributionPosition` attr: attribution-position	입력 유형: `PlaceSearchAttributionPosition optional` 출력 유형: `PlaceSearchAttributionPosition` 기본값: `PlaceSearchAttributionPosition.TOP` 저작자 표시 로고 및 법적 정보 공개 버튼의 위치입니다. HTML 속성: `attribution-position="value-name"`
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`orientation` attr: orientation	입력 유형: `PlaceSearchOrientation optional` 출력 유형: `PlaceSearchOrientation` 기본값: `PlaceSearchOrientation.VERTICAL` 요소의 방향 변형 (세로 또는 가로)입니다. HTML 속성: `orientation="value-name"`
`places` readonly	유형: `Array<Place>` 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 `Place` 객체의 배열입니다.
`selectable` attr: selectable	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` 목록 항목을 선택할 수 있는지 여부입니다. true인 경우 목록 항목은 클릭 시 `gmp-select` 이벤트를 전달하는 버튼이 됩니다. 접근성 키보드 탐색 및 선택도 지원됩니다. HTML 속성: `selectable`
`truncationPreferred` attr: truncation-preferred	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` true인 경우 특정 콘텐츠 줄을 줄바꿈하는 대신 한 줄에 맞게 자릅니다. HTML 속성: `truncation-preferred`

CSS 속성
`--gmp-button-border-color`	'지도에서 열기' 버튼의 테두리 색상입니다.
`--gmp-button-border-radius`	'지도에서 열기' 버튼의 테두리 반경입니다.
`--gmp-button-border-width`	'지도에서 열기' 버튼의 테두리 너비입니다.
`--gmp-card-border-radius`	장소 카드의 테두리 반경입니다.
`--gmp-dialog-border-radius`	Google 지도 정보 공개 대화상자의 테두리 반경입니다.
`--gmp-mat-color-info`	정보 감정이 있는 UI 요소의 색상입니다. 휠체어 이용 가능 출입구 아이콘에 사용됩니다.
`--gmp-mat-color-negative`	부정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '휴무' 라벨에 사용됩니다.
`--gmp-mat-color-neutral-container`	중성 채우기 UI 요소의 컨테이너 색상입니다. 리뷰 날짜 배지 및 자리표시자 도형 로드에 사용됩니다.
`--gmp-mat-color-on-neutral-container`	중립 컨테이너의 텍스트 및 아이콘 색상입니다. 리뷰 날짜 텍스트 및 로드 오류 텍스트에 사용됩니다.
`--gmp-mat-color-on-secondary-container`	보조 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. 버튼 텍스트 및 아이콘에 사용됩니다.
`--gmp-mat-color-on-surface`	표면 색상과 대비되는 텍스트 및 아이콘 색상입니다. 제목 및 대화상자 콘텐츠에 사용됩니다.
`--gmp-mat-color-on-surface-variant`	표면 색상과 대비되는 텍스트 및 아이콘의 강조도가 낮은 색상입니다. 장소 정보에 사용됩니다.
`--gmp-mat-color-outline-decorative`	상호작용 요소가 아닌 요소의 윤곽선 색상입니다. 컨테이너 테두리에 사용됩니다.
`--gmp-mat-color-positive`	긍정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '영업 중' 라벨에 사용됩니다.
`--gmp-mat-color-primary`	표면 색상과 대비되는 대화형 텍스트 및 아이콘의 색상입니다. 링크, 로드 표시기, 개요 아이콘에 사용됩니다.
`--gmp-mat-color-secondary-container`	표면에 비해 눈에 띄지 않는 채우기 색상입니다. 버튼 배경에 사용됩니다.
`--gmp-mat-color-surface`	배경 색상입니다. 컨테이너 및 대화상자 배경에 사용됩니다.
`--gmp-mat-font-body-small`	장소 정보에 사용됩니다.
`--gmp-mat-font-family`	모든 텍스트의 기본 글꼴 모음입니다.
`--gmp-mat-font-headline-medium`	대화상자 제목에 사용됩니다.
`--gmp-mat-font-label-large`	버튼 콘텐츠에 사용됩니다.
`--gmp-mat-font-title-medium`	장소 이름에 사용됩니다.
`--gmp-mat-spacing-extra-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-medium`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-star-rating-color`	별표 평점에서 채워진 별의 색상입니다.
`--gmp-thumbnail-border-radius`	장소 썸네일 이미지의 테두리 반경입니다.
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font-size`	요소의 모든 텍스트와 아이콘의 크기를 조정합니다. 기본값은 `16px`입니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(event)` 인수: `event: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-load`	`function(event)` 인수: `event: Event optional` 이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-select`	`function(event)` 인수: `event: PlaceSelectEvent optional` 이 이벤트는 목록에서 장소를 선택할 때 실행됩니다. 선택한 장소의 ID, 위치, 표시 영역이 포함된 `Place` 객체를 포함합니다.

PlaceSearchElementOptions 인터페이스

인터페이스 google.maps.places.PlaceSearchElementOptions
AdvancedPlaceSearchElementOptions에 의해 확장됨
AdvancedPlaceSearchElement, PlaceSearchElement에 의해 구현됨

PlaceSearchElement 옵션

속성
`attributionPosition` 선택사항	유형: `PlaceSearchAttributionPosition optional` `PlaceSearchElement.attributionPosition`를 참조하세요.
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.
`orientation` 선택사항	유형: `PlaceSearchOrientation optional` `PlaceSearchElement.orientation`를 참조하세요.
`selectable` 선택사항	유형: `boolean optional` `PlaceSearchElement.selectable` 보기
`truncationPreferred` 선택사항	유형: `boolean optional` `PlaceSearchElement.truncationPreferred`를 참조하세요.

AdvancedPlaceSearchElement 클래스

class google.maps.places.AdvancedPlaceSearchElement extends PlaceSearchElement, HTMLElement implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"

고급 장소 검색 결과를 목록으로 표시합니다. PlaceTextSearchRequestElement 또는 PlaceNearbySearchRequestElement를 추가하여 결과를 렌더링할 요청을 지정합니다. PlaceStandardContentElement, PlaceAllContentElement 또는 <template slot="details-item">를 추가하여 렌더링할 콘텐츠를 지정합니다.

예:

 <gmp-advanced-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-search>

고급 장소 검색 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 Places UI Kit API를 사용 설정하세요.

<gmp-advanced-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-advanced-place-search>

const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");

생성자
`AdvancedPlaceSearchElement`	`AdvancedPlaceSearchElement([options])` 매개변수: `options: AdvancedPlaceSearchElementOptions optional`

속성
`attributionPosition` attr: attribution-position	입력 유형: `PlaceSearchAttributionPosition optional` 출력 유형: `PlaceSearchAttributionPosition` 기본값: `PlaceSearchAttributionPosition.TOP` 저작자 표시 로고 및 법적 정보 공개 버튼의 위치입니다. HTML 속성: `attribution-position="value-name"`
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`orientation` attr: orientation	입력 유형: `PlaceSearchOrientation optional` 출력 유형: `PlaceSearchOrientation` 기본값: `PlaceSearchOrientation.VERTICAL` 요소의 방향 변형 (세로 또는 가로)입니다. HTML 속성: `orientation="value-name"`
`selectable` attr: selectable	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` 목록 항목을 선택할 수 있는지 여부입니다. true인 경우 목록 항목은 클릭 시 `gmp-select` 이벤트를 전달하는 버튼이 됩니다. 접근성 키보드 탐색 및 선택도 지원됩니다. HTML 속성: `selectable`
`truncationPreferred` attr: truncation-preferred	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` true인 경우 특정 콘텐츠 줄을 줄바꿈하는 대신 한 줄에 맞게 자릅니다. HTML 속성: `truncation-preferred`
상속됨: `places`

슬롯
`details-item`	검색 결과의 각 장소에 대해 렌더링할 gmp-place 위젯이 포함된 HTML 템플릿입니다.

CSS 속성
`--gmp-button-border-color`	'지도에서 열기' 버튼의 테두리 색상입니다.
`--gmp-button-border-radius`	'지도에서 열기' 버튼의 테두리 반경입니다.
`--gmp-button-border-width`	'지도에서 열기' 버튼의 테두리 너비입니다.
`--gmp-card-border-radius`	장소 카드의 테두리 반경입니다.
`--gmp-dialog-border-radius`	Google 지도 정보 공개 대화상자의 테두리 반경입니다.
`--gmp-mat-color-info`	정보 감정이 있는 UI 요소의 색상입니다. 휠체어 이용 가능 출입구 아이콘에 사용됩니다.
`--gmp-mat-color-negative`	부정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '휴무' 라벨에 사용됩니다.
`--gmp-mat-color-neutral-container`	중성 채우기 UI 요소의 컨테이너 색상입니다. 리뷰 날짜 배지 및 자리표시자 도형 로드에 사용됩니다.
`--gmp-mat-color-on-neutral-container`	중립 컨테이너의 텍스트 및 아이콘 색상입니다. 리뷰 날짜 텍스트 및 로드 오류 텍스트에 사용됩니다.
`--gmp-mat-color-on-secondary-container`	보조 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. 버튼 텍스트 및 아이콘에 사용됩니다.
`--gmp-mat-color-on-surface`	표면 색상과 대비되는 텍스트 및 아이콘 색상입니다. 제목 및 대화상자 콘텐츠에 사용됩니다.
`--gmp-mat-color-on-surface-variant`	표면 색상과 대비되는 텍스트 및 아이콘의 강조도가 낮은 색상입니다. 장소 정보에 사용됩니다.
`--gmp-mat-color-outline-decorative`	상호작용 요소가 아닌 요소의 윤곽선 색상입니다. 컨테이너 테두리에 사용됩니다.
`--gmp-mat-color-positive`	긍정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '영업 중' 라벨에 사용됩니다.
`--gmp-mat-color-primary`	표면 색상과 대비되는 대화형 텍스트 및 아이콘의 색상입니다. 링크, 로드 표시기, 개요 아이콘에 사용됩니다.
`--gmp-mat-color-secondary-container`	표면에 비해 눈에 띄지 않는 채우기 색상입니다. 버튼 배경에 사용됩니다.
`--gmp-mat-color-surface`	배경 색상입니다. 컨테이너 및 대화상자 배경에 사용됩니다.
`--gmp-mat-font-body-small`	장소 정보에 사용됩니다.
`--gmp-mat-font-family`	모든 텍스트의 기본 글꼴 모음입니다.
`--gmp-mat-font-headline-medium`	대화상자 제목에 사용됩니다.
`--gmp-mat-font-label-large`	버튼 콘텐츠에 사용됩니다.
`--gmp-mat-font-title-medium`	장소 이름에 사용됩니다.
`--gmp-mat-spacing-extra-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-medium`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-star-rating-color`	별표 평점에서 채워진 별의 색상입니다.
`--gmp-thumbnail-border-radius`	장소 썸네일 이미지의 테두리 반경입니다.
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font-size`	요소의 모든 텍스트와 아이콘의 크기를 조정합니다. 기본값은 `16px`입니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(event)` 인수: `event: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-load`	`function(event)` 인수: `event: Event optional` 이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-select`	`function(event)` 인수: `event: PlaceSelectEvent optional` 이 이벤트는 목록에서 장소를 선택할 때 실행됩니다. 선택한 장소의 ID, 위치, 표시 영역이 포함된 `Place` 객체를 포함합니다.

AdvancedPlaceSearchElementOptions 인터페이스

interface google.maps.places.AdvancedPlaceSearchElementOptions extends PlaceSearchElementOptions
implemented by AdvancedPlaceSearchElement

AdvancedPlaceSearchElement 옵션

속성
`attributionPosition` 선택사항	유형: `PlaceSearchAttributionPosition optional` `PlaceSearchElement.attributionPosition`를 참조하세요.
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.
`orientation` 선택사항	유형: `PlaceSearchOrientation optional` `PlaceSearchElement.orientation`를 참조하세요.
`selectable` 선택사항	유형: `boolean optional` `PlaceSearchElement.selectable` 보기
`truncationPreferred` 선택사항	유형: `boolean optional` `PlaceSearchElement.truncationPreferred`를 참조하세요.

AdvancedPlaceListElement 클래스

class google.maps.places.AdvancedPlaceListElement extends HTMLElement implements AdvancedPlaceListElementOptions
library "places"

장소 검색 결과를 목록으로 표시합니다. 하나 이상의 PlaceDetailsPlaceRequestElement를 추가하거나 places 속성을 설정하여 표시할 장소를 지정합니다. PlaceStandardContentElement 또는 PlaceAllContentElement를 추가하여 렌더링할 콘텐츠를 지정합니다.

예:

 <gmp-advanced-place-list>
   <gmp-place-details-place-request
     place="PLACE_ID"
   </gmp-place-details-place-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-list>

고급 장소 목록 요소를 사용하려면 Google Cloud 콘솔에서 프로젝트에 Places UI Kit API를 사용 설정하세요.

<gmp-advanced-place-list
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  places="space separated strings"
  selectable
  truncation-preferred>
</gmp-advanced-place-list>

const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");

생성자
`AdvancedPlaceListElement`	`AdvancedPlaceListElement([options])` 매개변수: `options: AdvancedPlaceListElementOptions optional`

속성
`attributionPosition` attr: attribution-position	입력 유형: `PlaceSearchAttributionPosition optional` 출력 유형: `PlaceSearchAttributionPosition` 기본값: `PlaceSearchAttributionPosition.TOP` 저작자 표시 로고 및 법적 정보 공개 버튼의 위치입니다. HTML 속성: `attribution-position="value-name"`
`internalUsageAttributionIds` attr: internal-usage-attribution-ids	입력 유형: `Iterable<string> optional` 출력 유형: `Array<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다. HTML 속성: `internal-usage-attribution-ids="space separated strings"`
`orientation` attr: orientation	입력 유형: `PlaceSearchOrientation optional` 출력 유형: `PlaceSearchOrientation` 기본값: `PlaceSearchOrientation.VERTICAL` 요소의 방향 변형 (세로 또는 가로)입니다. HTML 속성: `orientation="value-name"`
`places` attr: places	입력 유형: `Iterable<Place\|string> optional` 출력 유형: `Array<Place>` 이 요소에 표시되어야 하는 ID가 포함된 Place 객체의 목록입니다. 장소 속성에 설정된 모든 장소가 렌더링되지 않는 경우(예: 잘못된 ID, 네트워크 요청 오류 등) 표시되지 않을 수 있습니다. places 속성을 읽어 현재 표시된 장소를 가져올 수 있습니다. HTML 속성: `places="space separated strings"`
`selectable` attr: selectable	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` 목록 항목을 선택할 수 있는지 여부입니다. true인 경우 목록 항목은 클릭 시 `gmp-select` 이벤트를 전달하는 버튼이 됩니다. 접근성 키보드 탐색 및 선택도 지원됩니다. HTML 속성: `selectable`
`truncationPreferred` attr: truncation-preferred	입력 유형: `boolean optional` 출력 유형: `boolean` 기본값: `false` true인 경우 특정 콘텐츠 줄을 줄바꿈하는 대신 한 줄에 맞게 자릅니다. HTML 속성: `truncation-preferred`

슬롯
`details-item`	목록의 각 장소에 대해 렌더링할 gmp-place 위젯이 포함된 HTML 템플릿입니다.

CSS 속성
`--gmp-button-border-color`	'지도에서 열기' 버튼의 테두리 색상입니다.
`--gmp-button-border-radius`	'지도에서 열기' 버튼의 테두리 반경입니다.
`--gmp-button-border-width`	'지도에서 열기' 버튼의 테두리 너비입니다.
`--gmp-card-border-radius`	장소 카드의 테두리 반경입니다.
`--gmp-dialog-border-radius`	Google 지도 정보 공개 대화상자의 테두리 반경입니다.
`--gmp-mat-color-info`	정보 감정이 있는 UI 요소의 색상입니다. 휠체어 이용 가능 출입구 아이콘에 사용됩니다.
`--gmp-mat-color-negative`	부정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '휴무' 라벨에 사용됩니다.
`--gmp-mat-color-neutral-container`	중성 채우기 UI 요소의 컨테이너 색상입니다. 리뷰 날짜 배지 및 자리표시자 도형 로드에 사용됩니다.
`--gmp-mat-color-on-neutral-container`	중립 컨테이너의 텍스트 및 아이콘 색상입니다. 리뷰 날짜 텍스트 및 로드 오류 텍스트에 사용됩니다.
`--gmp-mat-color-on-secondary-container`	보조 컨테이너 색상과 대비되는 텍스트 및 아이콘 색상입니다. 버튼 텍스트 및 아이콘에 사용됩니다.
`--gmp-mat-color-on-surface`	표면 색상과 대비되는 텍스트 및 아이콘 색상입니다. 제목 및 대화상자 콘텐츠에 사용됩니다.
`--gmp-mat-color-on-surface-variant`	표면 색상과 대비되는 텍스트 및 아이콘의 강조도가 낮은 색상입니다. 장소 정보에 사용됩니다.
`--gmp-mat-color-outline-decorative`	상호작용 요소가 아닌 요소의 윤곽선 색상입니다. 컨테이너 테두리에 사용됩니다.
`--gmp-mat-color-positive`	긍정적인 감정이 있는 UI 요소의 색상입니다. 장소의 영업시간에 대한 '영업 중' 라벨에 사용됩니다.
`--gmp-mat-color-primary`	표면 색상과 대비되는 대화형 텍스트 및 아이콘의 색상입니다. 링크, 로드 표시기, 개요 아이콘에 사용됩니다.
`--gmp-mat-color-secondary-container`	표면에 비해 눈에 띄지 않는 채우기 색상입니다. 버튼 배경에 사용됩니다.
`--gmp-mat-color-surface`	배경 색상입니다. 컨테이너 및 대화상자 배경에 사용됩니다.
`--gmp-mat-font-body-small`	장소 정보에 사용됩니다.
`--gmp-mat-font-family`	모든 텍스트의 기본 글꼴 모음입니다.
`--gmp-mat-font-headline-medium`	대화상자 제목에 사용됩니다.
`--gmp-mat-font-label-large`	버튼 콘텐츠에 사용됩니다.
`--gmp-mat-font-title-medium`	장소 이름에 사용됩니다.
`--gmp-mat-spacing-extra-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-large`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-medium`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-mat-spacing-small`	텍스트 주변의 여백 및 패딩과 같이 요소 내의 간격에 사용됩니다.
`--gmp-star-rating-color`	별표 평점에서 채워진 별의 색상입니다.
`--gmp-thumbnail-border-radius`	장소 썸네일 이미지의 테두리 반경입니다.
`background-color`	요소의 배경 색상을 재정의합니다.
`border`	요소의 테두리를 재정의합니다.
`border-radius`	요소의 테두리 반경을 재정의합니다.
`color-scheme`	이 요소를 렌더링할 수 있는 색 구성표를 나타냅니다. 자세한 내용은 `color-scheme` 문서를 참고하세요. 기본값은 `color-scheme: light dark`입니다.
`font-size`	요소의 모든 텍스트와 아이콘의 크기를 조정합니다. 기본값은 `16px`입니다.

메서드
상속됨: `addEventListener`, `removeEventListener`

이벤트
`gmp-error`	`function(event)` 인수: `event: Event optional` 이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-load`	`function(event)` 인수: `event: Event optional` 이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.
`gmp-select`	`function(event)` 인수: `event: PlaceSelectEvent optional` 이 이벤트는 목록에서 장소를 선택할 때 실행됩니다. 선택한 장소의 ID, 위치, 표시 영역이 포함된 `Place` 객체를 포함합니다.

AdvancedPlaceListElementOptions 인터페이스

인터페이스 google.maps.places.AdvancedPlaceListElementOptions
AdvancedPlaceListElement에서 구현됨

AdvancedPlaceListElement 옵션

속성
`attributionPosition` 선택사항	유형: `PlaceSearchAttributionPosition optional` `PlaceSearchElement.attributionPosition`를 참조하세요.
`internalUsageAttributionIds` 선택사항	유형: `Iterable<string> optional` 특정 패키지 또는 OSS 라이브러리에 대한 호출을 식별하는 데 사용되는 식별자입니다.
`orientation` 선택사항	유형: `PlaceSearchOrientation optional` `PlaceSearchElement.orientation`를 참조하세요.
`places` 선택사항	유형: `Iterable<Place\|string> optional` `AdvancedPlaceListElement.places`를 참조하세요.
`selectable` 선택사항	유형: `boolean optional` `PlaceSearchElement.selectable` 보기
`truncationPreferred` 선택사항	유형: `boolean optional` `PlaceSearchElement.truncationPreferred`를 참조하세요.

PlaceSearchAttributionPosition 상수

상수 google.maps.places.PlaceSearchAttributionPosition
라이브러리 "places"

PlaceSearchElement의 기여 분석 위치입니다.

이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 PlaceSearchAttributionPositionString 유형으로 정의됩니다.

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");

상수
`BOTTOM`	PlaceSearchElement 하단의 저작자 표시
`TOP`	PlaceSearchElement 상단의 저작자 표시

PlaceSearchOrientation 상수

상수 google.maps.places.PlaceSearchOrientation
라이브러리 "places"

PlaceSearchElement의 방향 변형입니다.

이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 PlaceSearchOrientationString 유형으로 정의됩니다.

const {PlaceSearchOrientation} = await google.maps.importLibrary("places");

상수
`HORIZONTAL`	가로 방향
`VERTICAL`	세로 방향

PlaceSelectEvent 클래스

class google.maps.places.PlaceSelectEvent extends Event
library "places"

이 이벤트는 장소 목록에서 장소가 선택될 때 실행됩니다. event.place를 사용하여 선택 항목에 액세스합니다.

const {PlaceSelectEvent} = await google.maps.importLibrary("places");

속성
`place` readonly	유형: `Place` 선택한 장소입니다.

PlaceNearbySearchRequestElement 클래스

class google.maps.places.PlaceNearbySearchRequestElement extends HTMLElement implements PlaceNearbySearchRequestElementOptions
library "places"

주변 지역 검색 요청을 기반으로 결과를 로드하도록 PlaceSearchElement를 구성합니다. 검색 요소를 로드하려면 locationRestriction 속성이 필요합니다. locationRestriction가 설정되지 않은 경우 구성된 다른 속성은 무시됩니다. 결과를 로드하려면 이 요소를 PlaceSearchElement의 하위 요소로 추가하세요. 예를 들면 다음과 같습니다.

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

<gmp-place-nearby-search-request
  excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
  excluded-types="excluded-type1 excluded-type2..."
  included-primary-types="included-primary-type1 included-primary-type2..."
  included-types="included-type1 included-type2..."
  location-restriction="radius@lat,lng"
  max-result-count="number"
  rank-preference="value-name">
</gmp-place-nearby-search-request>

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");

생성자
`PlaceNearbySearchRequestElement`	`PlaceNearbySearchRequestElement([options])` 매개변수: `options: PlaceNearbySearchRequestElementOptions optional`

속성
`excludedPrimaryTypes` attr: excluded-primary-types	입력 유형: `Array<string> optional` 출력 유형: `Array<string> optional` 기본값: `null` 제외된 기본 장소 유형입니다. HTML 속성: `excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."`
`excludedTypes` attr: excluded-types	입력 유형: `Array<string> optional` 출력 유형: `Array<string> optional` 기본값: `null` 제외된 장소 유형입니다. HTML 속성: `excluded-types="excluded-type1 excluded-type2..."`
`futureOpeningBusinessesIncluded`	입력 유형: `boolean optional` 출력 유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 비즈니스의 장소 예상을 포함합니다.
`includedPrimaryTypes` attr: included-primary-types	입력 유형: `Array<string> optional` 출력 유형: `Array<string> optional` 기본값: `null` 포함된 기본 장소 유형입니다. HTML 속성: `included-primary-types="included-primary-type1 included-primary-type2..."`
`includedTypes` attr: included-types	입력 유형: `Array<string> optional` 출력 유형: `Array<string> optional` 기본값: `null` 포함된 장소 유형입니다. HTML 속성: `included-types="included-type1 included-type2..."`
`locationRestriction` attr: location-restriction	입력 유형: `Circle\|CircleLiteral optional` 출력 유형: `Circle optional` 기본값: `null` 검색할 리전입니다. `Circle`로 정규화합니다. HTML 속성: `location-restriction="radius@lat,lng"`
`maxResultCount` attr: max-result-count	입력 유형: `number optional` 출력 유형: `number optional` 기본값: `null` 반환할 결과의 최대 수입니다. HTML 속성: `max-result-count="number"`
`rankPreference` attr: rank-preference	입력 유형: `SearchNearbyRankPreference optional` 출력 유형: `SearchNearbyRankPreference optional` 기본값: `null` 응답에서 결과의 순위가 지정되는 방식입니다. HTML 속성: `rank-preference="value-name"`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceNearbySearchRequestElementOptions 인터페이스

인터페이스 google.maps.places.PlaceNearbySearchRequestElementOptions
PlaceNearbySearchRequestElement에서 구현됨

PlaceNearbySearchRequestElement 옵션

속성
`excludedPrimaryTypes` 선택사항	유형: `Array<string> optional` 제외된 기본 장소 유형입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.excludedPrimaryTypes` 및 `SearchNearbyRequest.excludedPrimaryTypes`을 참고하세요.
`excludedTypes` 선택사항	유형: `Array<string> optional` 제외된 장소 유형입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.excludedTypes` 및 `SearchNearbyRequest.excludedTypes`을 참고하세요.
`futureOpeningBusinessesIncluded` 선택사항	유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 비즈니스의 장소 예상을 포함합니다.
`includedPrimaryTypes` 선택사항	유형: `Array<string> optional` 포함된 기본 장소 유형입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.includedPrimaryTypes` 및 `SearchNearbyRequest.includedPrimaryTypes`을 참고하세요.
`includedTypes` 선택사항	유형: `Array<string> optional` 포함된 장소 유형입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.includedTypes` 및 `SearchNearbyRequest.includedTypes`을 참고하세요.
`locationRestriction` 선택사항	유형: `Circle\|CircleLiteral optional` 검색할 리전입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.locationRestriction` 및 `SearchNearbyRequest.locationRestriction`을 참고하세요.
`maxResultCount` 선택사항	유형: `number optional` 반환할 결과의 최대 수입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.maxResultCount` 및 `SearchNearbyRequest.maxResultCount`을 참고하세요.
`rankPreference` 선택사항	유형: `SearchNearbyRankPreference optional` 응답에서 결과의 순위가 지정되는 방식입니다. 자세한 내용은 `PlaceNearbySearchRequestElement.rankPreference` 및 `SearchNearbyRankPreference`을 참고하세요.

PlaceTextSearchRequestElement 클래스

class google.maps.places.PlaceTextSearchRequestElement extends HTMLElement implements PlaceTextSearchRequestElementOptions
library "places"

텍스트 검색 요청을 기반으로 결과를 로드하도록 PlaceSearchElement를 구성합니다. 검색 요소를 로드하려면 textQuery 속성이 필요합니다. textQuery가 설정되지 않은 경우 구성된 다른 속성은 무시됩니다. 결과를 로드하려면 이 요소를 PlaceSearchElement의 하위 요소로 추가하세요. 예를 들면 다음과 같습니다.

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search>

<gmp-place-text-search-request
  ev-connector-types="ev-connector-type1 ev-connector-type2..."
  ev-minimum-charging-rate-kw="number"
  included-type="type"
  is-open-now
  location-bias="lat,lng"
  location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"
  max-result-count="number"
  min-rating="number"
  price-levels="price-level1 price-level2..."
  rank-preference="value-name"
  text-query="string"
  use-strict-type-filtering>
</gmp-place-text-search-request>

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");

생성자
`PlaceTextSearchRequestElement`	`PlaceTextSearchRequestElement([options])` 매개변수: `options: PlaceTextSearchRequestElementOptions optional`

속성
`evConnectorTypes` attr: ev-connector-types	입력 유형: `Array<EVConnectorType> optional` 출력 유형: `Array<EVConnectorType> optional` 기본값: `null` 선호하는 EV 커넥터 유형 목록입니다. HTML 속성: `ev-connector-types="ev-connector-type1 ev-connector-type2..."`
`evMinimumChargingRateKw` attr: ev-minimum-charging-rate-kw	입력 유형: `number optional` 출력 유형: `number optional` 기본값: `null` 필요한 최소 충전 속도(킬로와트)입니다. HTML 속성: `ev-minimum-charging-rate-kw="number"`
`futureOpeningBusinessesIncluded`	입력 유형: `boolean optional` 출력 유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 비즈니스의 장소 예상을 포함합니다.
`includedType` attr: included-type	입력 유형: `string optional` 출력 유형: `string optional` 기본값: `null` 요청된 장소 유형입니다. HTML 속성: `included-type="type"`
`isOpenNow` attr: is-open-now	입력 유형: `boolean optional` 출력 유형: `boolean optional` 기본값: `null` 현재 영업 중인 장소로 검색을 제한하는 데 사용됩니다. HTML 속성: `is-open-now`
`locationBias` attr: location-bias	입력 유형: `LocationBias optional` 출력 유형: `LatLngAltitude\|LatLngBounds\|Circle\|string optional` 기본값: `null` 검색의 위치 편향입니다. HTML 속성: `location-bias="lat,lng"` `location-bias="lat,lng[,altitude]"` `location-bias="swlat,swlng\|nelat,nelng"` `location-bias="radius@lat,lng"` `location-bias="IP_BIAS"`
`locationRestriction` attr: location-restriction	입력 유형: `LatLngBounds\|LatLngBoundsLiteral optional` 출력 유형: `LatLngBounds optional` 기본값: `null` 검색의 위치 제한입니다. `LatLngBounds`로 정규화합니다. HTML 속성: `location-restriction="southwest-lat,southwest-lng\|northeast-lat,northeast-lng"`
`maxResultCount` attr: max-result-count	입력 유형: `number optional` 출력 유형: `number optional` 기본값: `null` 반환할 결과의 최대 수입니다. HTML 속성: `max-result-count="number"`
`minRating` attr: min-rating	입력 유형: `number optional` 출력 유형: `number optional` 기본값: `null` 평균 사용자 평점이 이 한도보다 엄격하게 낮은 결과를 필터링합니다. HTML 속성: `min-rating="number"`
`priceLevels` attr: price-levels	입력 유형: `Array<PriceLevel> optional` 출력 유형: `Array<PriceLevel> optional` 기본값: `null` 특정 가격 수준으로 표시된 장소로 검색을 제한하는 데 사용됩니다. HTML 속성: `price-levels="price-level1 price-level2..."`
`rankPreference` attr: rank-preference	입력 유형: `SearchByTextRankPreference optional` 출력 유형: `SearchByTextRankPreference optional` 기본값: `null` 응답에서 결과의 순위가 지정되는 방식입니다. HTML 속성: `rank-preference="value-name"`
`textQuery` attr: text-query	입력 유형: `string optional` 출력 유형: `string optional` 기본값: `null` 텍스트 검색을 위한 텍스트 쿼리입니다. HTML 속성: `text-query="string"`
`useStrictTypeFiltering` attr: use-strict-type-filtering	입력 유형: `boolean optional` 출력 유형: `boolean optional` 기본값: `null` 'includedType'에 엄격한 유형 필터링을 설정하는 데 사용됩니다. HTML 속성: `use-strict-type-filtering`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceTextSearchRequestElementOptions 인터페이스

인터페이스 google.maps.places.PlaceTextSearchRequestElementOptions
PlaceTextSearchRequestElement에서 구현됨

PlaceTextSearchRequestElement 옵션

속성
`evConnectorTypes` 선택사항	유형: `Array<EVConnectorType> optional` 선호하는 EV 커넥터 유형 목록입니다. 자세한 내용은 `SearchByTextRequest.evSearchOptions` 및 `PlaceTextSearchRequestElement.evConnectorTypes`을 참고하세요.
`evMinimumChargingRateKw` 선택사항	유형: `number optional` 필요한 최소 충전 속도(킬로와트)입니다. 자세한 내용은 `SearchByTextRequest.evSearchOptions` 및 `PlaceTextSearchRequestElement.evMinimumChargingRateKw`을 참고하세요.
`futureOpeningBusinessesIncluded` 선택사항	유형: `boolean optional` 아직 영업을 시작하지 않았지만 향후 영업을 시작할 것으로 예상되는 비즈니스의 장소 예상을 포함합니다.
`includedType` 선택사항	유형: `string optional` 요청된 장소 유형입니다. 자세한 내용은 `SearchByTextRequest.includedType` 및 `PlaceTextSearchRequestElement.includedType`을 참고하세요.
`isOpenNow` 선택사항	유형: `boolean optional` 현재 영업 중인 장소로 검색을 제한하는 데 사용됩니다. 자세한 내용은 `SearchByTextRequest.isOpenNow` 및 `PlaceTextSearchRequestElement.isOpenNow`을 참고하세요.
`locationBias` 선택사항	유형: `LocationBias optional` 검색의 위치 편향입니다. 자세한 내용은 `SearchByTextRequest.locationBias` 및 `PlaceTextSearchRequestElement.locationBias`을 참고하세요.
`locationRestriction` 선택사항	유형: `LatLngBounds\|LatLngBoundsLiteral optional` 검색의 위치 제한입니다. 자세한 내용은 `SearchByTextRequest.locationRestriction` 및 `PlaceTextSearchRequestElement.locationRestriction`을 참고하세요.
`maxResultCount` 선택사항	유형: `number optional` 반환할 결과의 최대 수입니다. 자세한 내용은 `SearchByTextRequest.maxResultCount` 및 `PlaceTextSearchRequestElement.maxResultCount`을 참고하세요.
`minRating` 선택사항	유형: `number optional` 평균 사용자 평점이 이 한도보다 엄격하게 낮은 결과를 필터링합니다. 자세한 내용은 `SearchByTextRequest.minRating` 및 `PlaceTextSearchRequestElement.minRating`을 참고하세요.
`priceLevels` 선택사항	유형: `Array<PriceLevel> optional` 특정 가격 수준으로 표시된 장소로 검색을 제한하는 데 사용됩니다. 자세한 내용은 `SearchByTextRequest.priceLevels` 및 `PlaceTextSearchRequestElement.priceLevels`을 참고하세요.
`rankPreference` 선택사항	유형: `SearchByTextRankPreference optional` 응답에서 결과의 순위가 지정되는 방식입니다. 자세한 내용은 `SearchByTextRequest.rankPreference` 및 `PlaceTextSearchRequestElement.rankPreference`을 참고하세요.
`textQuery` 선택사항	유형: `string optional` 텍스트 검색을 위한 텍스트 쿼리입니다. 자세한 내용은 `SearchByTextRequest.textQuery` 및 `PlaceTextSearchRequestElement.textQuery`을 참고하세요.
`useStrictTypeFiltering` 선택사항	유형: `boolean optional` `SearchByTextRequest.includedType`에 엄격한 유형 필터링을 설정하는 데 사용됩니다. 자세한 내용은 `SearchByTextRequest.useStrictTypeFiltering` 및 `PlaceTextSearchRequestElement.useStrictTypeFiltering`을 참고하세요.

Autocomplete 클래스

class google.maps.places.Autocomplete extends MVCObject
library "places"

지원 중단됨: 2025년 3월 1일부터 신규 고객은 google.maps.places.Autocomplete를 사용할 수 없습니다. 대신 PlaceAutocompleteElement 열을 사용하세요. 현재 google.maps.places.Autocomplete는 중단될 예정이 아니지만 google.maps.places.Autocomplete보다 PlaceAutocompleteElement를 사용하는 것이 좋습니다. google.maps.places.Autocomplete는 주요 회귀에 대한 버그 수정을 계속 받지만 google.maps.places.Autocomplete의 기존 버그는 해결되지 않습니다. 지원이 중단되기 최소 12개월 전에 알림이 제공될 예정입니다. 자세한 내용은 https://developers.google.com/maps/legacy를 참고하고 이전 가이드는 https://developers.google.com/maps/documentation/javascript/places-migration-overview를 참고하세요.

사용자의 텍스트 입력을 기반으로 장소 예상 검색어를 제공하는 위젯입니다. text 유형의 입력 요소에 연결되고 해당 입력란의 텍스트 입력을 수신 대기합니다. 예상 검색어 목록은 드롭다운 목록으로 표시되며 텍스트를 입력하면 업데이트됩니다.

const {Autocomplete} = await google.maps.importLibrary("places");

생성자
`Autocomplete`	`Autocomplete(inputField[, opts])` 매개변수: `inputField: HTMLInputElement` `Autocomplete`를 연결해야 하는 `<input>` 텍스트 필드입니다. `opts: AutocompleteOptions optional` 옵션 지정된 옵션을 사용하여 지정된 입력 텍스트 필드에 연결되는 `Autocomplete`의 새 인스턴스를 만듭니다.

메서드
`getBounds`	`getBounds()` 매개변수: 없음 반환 값: `LatLngBounds\|undefined` 바이어스 경계입니다. 예측이 편향된 경계를 반환합니다.
`getFields`	`getFields()` 매개변수: 없음 반환 값: `Array<string>\|undefined` 세부정보를 가져오는 데 성공하면 세부정보 응답에서 장소에 포함할 필드를 반환합니다. 필드 목록은 `PlaceResult`를 참조하세요.
`getPlace`	`getPlace()` 매개변수: 없음 반환 값: `PlaceResult` 사용자가 선택한 장소입니다. 세부정보를 가져온 경우 사용자가 선택한 장소의 세부정보를 반환합니다. 그렇지 않으면 `name` 속성이 입력란의 현재 값으로 설정된 스텁 Place 객체를 반환합니다.
`setBounds`	`setBounds(bounds)` 매개변수: `bounds: LatLngBounds\|LatLngBoundsLiteral optional` 편향 경계입니다. 반환 값: 없음 장소 결과를 반환할 기본 영역을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역만으로 제한되지는 않습니다.
`setComponentRestrictions`	`setComponentRestrictions(restrictions)` 매개변수: `restrictions: ComponentRestrictions optional` 사용할 제한사항입니다. 반환 값: 없음 구성요소 제한을 설정합니다. 구성요소 제한은 상위 구성요소 내의 예측만 제한하는 데 사용됩니다. 예를 들어 국가입니다.
`setFields`	`setFields(fields)` 매개변수: `fields: Array<string> optional` 반환 값: 없음 세부정보가 성공적으로 검색되면 세부정보 응답에 장소에 포함할 필드를 설정합니다. 필드 목록은 `PlaceResult`를 참조하세요.
`setOptions`	`setOptions(options)` 매개변수: `options: AutocompleteOptions optional` 반환 값: 없음
`setTypes`	`setTypes(types)` 매개변수: `types: Array<string> optional` 포함할 예측 유형입니다. 반환 값: 없음 반환할 예상 검색어 유형을 설정합니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다.
상속됨: `addListener`, `bindTo`, `get`, `notify`, `set`, `setValues`, `unbind`, `unbindAll`

이벤트

place_changed

function()

인수: 없음

이 이벤트는 사용자가 선택한 장소에 PlaceResult를 사용할 수 있을 때 실행됩니다.
사용자가 컨트롤에서 추천하지 않은 장소 이름을 입력하고 Enter 키를 누르거나 장소 세부정보 요청이 실패하면 PlaceResult의 name 속성에 사용자 입력이 포함되고 다른 속성은 정의되지 않습니다.

AutocompleteOptions 인터페이스

인터페이스 google.maps.places.AutocompleteOptions

Autocomplete 객체에 설정할 수 있는 옵션입니다.

속성
`bounds` 선택사항	유형: `LatLngBounds\|LatLngBoundsLiteral optional` 장소를 검색할 영역입니다.
`componentRestrictions` 선택사항	유형: `ComponentRestrictions optional` 구성요소 제한사항입니다. 구성요소 제한은 상위 구성요소 내의 예측만 제한하는 데 사용됩니다. 예를 들어 국가입니다.
`fields` 선택사항	유형: `Array<string> optional` 세부정보가 성공적으로 검색되면 세부정보 응답의 장소에 포함할 필드입니다. 이 필드에는 요금이 청구됩니다. `['ALL']`이 전달되는 경우 사용 가능한 모든 필드가 반환되고 청구됩니다 (프로덕션 배포의 경우 권장되지 않습니다). 필드 목록은 `PlaceResult`를 참조하세요. 중첩된 필드는 점 경로 (예: `"geometry.location"`)로 지정할 수 있습니다. 기본값은 `['ALL']`입니다.
`placeIdOnly` 선택사항	지원 중단됨: `placeIdOnly`는 2019년 1월 15일부로 지원 중단되었으며 2020년 1월 15일에 사용 중지됩니다. 대신 `AutocompleteOptions.fields`를 사용하세요. `fields: ['place_id', 'name', 'types']` 유형: `boolean optional` 장소 ID만 가져올지 여부입니다. place_changed 이벤트가 실행될 때 제공되는 PlaceResult에는 장소 ID, types, name 필드만 있으며, Autocomplete 서비스에서 반환하는 장소 ID, types, description이 포함됩니다. 기본적으로 사용 중지됩니다.
`strictBounds` 선택사항	유형: `boolean optional` 쿼리가 전송된 시점에 Autocomplete 위젯의 경계 내에 있는 장소만 Autocomplete 위젯에서 반환해야 함을 나타내는 불리언 값입니다. strictBounds를 `false` (기본값)로 설정하면 검색 결과가 경계 내에 포함된 장소에 편중되지만 이 장소만으로 제한되지는 않습니다.
`types` 선택사항	유형: `Array<string> optional` 반환할 예측 유형입니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다.

class google.maps.places.SearchBox extends MVCObject
library "places"

사용자의 텍스트 입력을 기반으로 예상 검색어를 제공하는 위젯입니다. text 유형의 입력 요소에 연결되고 해당 입력란의 텍스트 입력을 수신 대기합니다. 예상 검색어 목록은 드롭다운 목록으로 표시되며 텍스트를 입력하면 업데이트됩니다.

const {SearchBox} = await google.maps.importLibrary("places");

생성자
`SearchBox`	`SearchBox(inputField[, opts])` 매개변수: `inputField: HTMLInputElement` `opts: SearchBoxOptions optional` 지정된 옵션을 사용하여 지정된 입력 텍스트 필드에 연결되는 `SearchBox`의 새 인스턴스를 만듭니다.

메서드
`getBounds`	`getBounds()` 매개변수: 없음 반환 값: `LatLngBounds\|undefined` 검색어 예상 검색어가 편향되는 경계를 반환합니다.
`getPlaces`	`getPlaces()` 매개변수: 없음 반환 값: `Array<PlaceResult>\|undefined` `places_changed` 이벤트에 사용하기 위해 사용자가 선택한 쿼리를 반환합니다.
`setBounds`	`setBounds(bounds)` 매개변수: `bounds: LatLngBounds\|LatLngBoundsLiteral optional` 반환 값: 없음 검색어 예측에 편향을 적용하는 데 사용할 리전을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역으로 완전히 제한되지는 않습니다.
상속됨: `addListener`, `bindTo`, `get`, `notify`, `set`, `setValues`, `unbind`, `unbindAll`

이벤트
`places_changed`	`function()` 인수: 없음 이 이벤트는 사용자가 검색어를 선택할 때 실행되며, `getPlaces`를 사용하여 새 장소를 가져와야 합니다.

SearchBoxOptions 인터페이스

인터페이스 google.maps.places.SearchBoxOptions

SearchBox 객체에 설정할 수 있는 옵션입니다.

속성
`bounds` 선택사항	유형: `LatLngBounds\|LatLngBoundsLiteral optional` 쿼리 예측을 편향시킬 영역입니다. 예측은 이 경계를 타겟팅하는 쿼리에 편중되지만 이 쿼리만으로 제한되지는 않습니다.

PlaceContextualElement 클래스

class google.maps.places.PlaceContextualElement extends HTMLElement implements PlaceContextualElementOptions
library "places"

컨텍스트 토큰을 사용하여 Google 지도 기반 그라운딩 응답의 컨텍스트 뷰를 표시하는 위젯입니다.

<gmp-place-contextual
  context-token="string">
</gmp-place-contextual>

const {PlaceContextualElement} = await google.maps.importLibrary("places");

생성자
`PlaceContextualElement`	`PlaceContextualElement([options])` 매개변수: `options: PlaceContextualElementOptions optional`

속성
`contextToken` attr: context-token	입력 유형: `string optional` 출력 유형: `string optional` 컨텍스트 토큰입니다. HTML 속성: `context-token="string"`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceContextualElementOptions 인터페이스

인터페이스 google.maps.places.PlaceContextualElementOptions
PlaceContextualElement에서 구현됨

PlaceContextualElement 옵션

속성
`contextToken` 선택사항	유형: `string optional` Google 지도 기반 그라운딩 응답에서 제공하는 컨텍스트 토큰입니다.

PlaceContextualListConfigElement 클래스

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
library "places"

장소 컨텍스트 요소의 목록 보기에 대한 옵션을 구성하는 HTML 요소입니다.

<gmp-place-contextual-list-config
  layout="value-name"
  map-hidden>
</gmp-place-contextual-list-config>

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");

생성자
`PlaceContextualListConfigElement`	`PlaceContextualListConfigElement([options])` 매개변수: `options: PlaceContextualListConfigElementOptions optional`

속성
`layout` attr: layout	입력 유형: `PlaceContextualListLayout optional` 출력 유형: `PlaceContextualListLayout` 레이아웃입니다. HTML 속성: `layout="value-name"`
`mapHidden` attr: map-hidden	입력 유형: `boolean optional` 출력 유형: `boolean` 지도가 숨겨져 있는지 여부입니다. HTML 속성: `map-hidden`

메서드
상속됨: `addEventListener`, `removeEventListener`

PlaceContextualListConfigElementOptions 인터페이스

인터페이스 google.maps.places.PlaceContextualListConfigElementOptions
PlaceContextualListConfigElement에서 구현됨

PlaceContextualListConfigElement의 옵션입니다.

속성
`layout` 선택사항	유형: `PlaceContextualListLayout optional` 기본값: `PlaceContextualListLayout.VERTICAL` 레이아웃입니다.
`mapHidden` 선택사항	유형: `boolean optional` 기본값: `false` 지도를 숨겨야 하는 경우 true입니다.

PlaceContextualListLayout 상수

상수 google.maps.places.PlaceContextualListLayout
라이브러리 "places"

장소 문맥 요소가 목록 보기에 지원하는 레이아웃 목록입니다.

이러한 상수는 문자열로도 사용할 수 있습니다. TypeScript에서 문자열 리터럴은 PlaceContextualListLayoutString 유형으로 정의됩니다.

const {PlaceContextualListLayout} = await google.maps.importLibrary("places");

상수
`COMPACT`	압축 목록 레이아웃: 목록 항목이 한 줄에 링크로 렌더링되며 드롭다운 목록에 오버플로가 있습니다.
`VERTICAL`	세로 목록 레이아웃: 목록 항목이 세로 목록의 카드로 렌더링됩니다.

Places Widgets 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

PlaceAutocompleteElement 클래스

생성자

속성

슬롯

부품

CSS 속성

메서드

이벤트

PlaceAutocompleteElementOptions 인터페이스

속성

PlacePredictionSelectEvent 클래스

속성

BasicPlaceAutocompleteElement 클래스

생성자

속성

슬롯

부품

CSS 속성

메서드

이벤트

BasicPlaceAutocompleteElementOptions 인터페이스

속성

PlaceDetailsElement 클래스

생성자

속성

CSS 속성

메서드

이벤트

PlaceDetailsElementOptions 인터페이스

속성

PlaceDetailsCompactElement 클래스

생성자

속성

CSS 속성

메서드

이벤트

PlaceDetailsCompactElementOptions 인터페이스

속성

AdvancedPlaceDetailsElement 클래스

생성자

속성

슬롯

CSS 속성

메서드

이벤트

AdvancedPlaceDetailsElementOptions 인터페이스

속성

AdvancedPlaceDetailsCompactElement 클래스

생성자

속성

슬롯

CSS 속성

메서드

이벤트

AdvancedPlaceDetailsCompactElementOptions 인터페이스

속성

PlaceDetailsOrientation 상수

상수

PlaceDetailsPlaceRequestElement 클래스

생성자

속성

메서드

PlaceDetailsPlaceRequestElementOptions 인터페이스

속성

PlaceDetailsLocationRequestElement 클래스

생성자

속성

메서드

PlaceDetailsLocationRequestElementOptions 인터페이스

속성

PlaceSearchElement 클래스

생성자

속성

CSS 속성

메서드

이벤트

PlaceSearchElementOptions 인터페이스

속성

AdvancedPlaceSearchElement 클래스

Places Widgets