Places Widgets

PlaceAutocompleteElement 클래스

google.maps.places.PlaceAutocompleteElement 클래스

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 included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceAutocompleteElementOptions를 구현합니다.

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
매개변수: 
includedPrimaryTypes
유형:  Array<string> optional
포함된 기본 장소 유형 (예: 'restaurant' 또는 'gas_station')

장소는 기본 유형이 이 목록에 포함된 경우에만 반환됩니다. 값을 최대 5개까지 지정할 수 있습니다. 유형을 지정하지 않으면 모든 장소 유형이 반환됩니다.
HTML 속성:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
유형:  Array<string> optional
지정된 리전의 결과만 포함합니다. 최대 15개의 CLDR 2자리 리전 코드로 지정됩니다. 빈 집합은 결과를 제한하지 않습니다. locationRestriction와 includedRegionCodes가 모두 설정된 경우 결과는 교차 영역에 위치합니다.
HTML 속성:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
유형:  LocationBias optional
장소를 검색할 때 사용할 소프트 경계 또는 힌트입니다.
locationRestriction
유형:  LocationRestriction optional
검색 결과를 제한하는 경계입니다.
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 속성:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
거리를 계산할 출발지입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 지정된 경우 계산에 사용되지 않습니다.
HTML 속성:
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
placeholder
유형:  string
입력 요소에 표시할 플레이스홀더 텍스트입니다.
requestedLanguage
유형:  string optional
가능한 경우 결과를 반환할 언어의 언어 식별자입니다. 선택한 언어로 된 검색 결과에 더 높은 순위가 부여될 수 있지만 추천이 이 언어로만 제한되지는 않습니다. 지원 언어 목록을 참조하세요.
HTML 속성:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
유형:  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 속성:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
유형:  UnitSystem optional
거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 requestedRegion에 따라 단위 시스템이 결정됩니다.
HTML 속성:
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
value
유형:  string
입력 요소의 값입니다.
prediction-item-icon
이 슬롯은 예측 항목 옆에 표시되는 아이콘으로 렌더링할 <template> 요소를 정확히 하나만 허용합니다.
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 내 어디에나 있을 수 있습니다. prediction-item-main-text의 일부일 필요는 없습니다.
prediction-item-selected
사용자가 키보드로 탐색하는 항목. 참고: 선택한 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 모두 받습니다.
prediction-list
장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래에 드롭다운 목록으로 표시됩니다.
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
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 리슨할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
gmp-error
function(errorEvent)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-select
function(placePredictionSelectEvent)
인수: 
이 이벤트는 사용자가 예상 장소를 선택할 때 실행됩니다. Place 객체로 변환할 수 있는 PlacePrediction 객체를 포함합니다.

PlaceAutocompleteElementOptions 인터페이스

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

PlaceAutocompleteElement를 구성하는 옵션입니다. 각 속성에 대한 설명은 PlaceAutocompleteElement 클래스에서 동일한 이름의 속성을 참고하세요.
includedPrimaryTypes optional
유형:  Array<string> optional
includedRegionCodes optional
유형:  Array<string> optional
locationBias optional
유형:  LocationBias optional
locationRestriction optional
유형:  LocationRestriction optional
name optional
유형:  string optional
origin optional
requestedLanguage optional
유형:  string optional
requestedRegion optional
유형:  string optional
unitSystem optional
유형:  UnitSystem optional
value optional
유형:  string optional
입력 요소의 값입니다.

PlacePredictionSelectEvent 클래스

google.maps.places.PlacePredictionSelectEvent 클래스

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

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

이 클래스는 Event를 확장합니다.

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
placePrediction
유형:  PlacePrediction
PlacePrediction.toPlace를 호출하여 이를 Place로 변환합니다.

BasicPlaceAutocompleteElement 클래스

google.maps.places.BasicPlaceAutocompleteElement 클래스

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

맞춤 요소:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 BasicPlaceAutocompleteElementOptions를 구현합니다.

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement(options)
매개변수: 
includedPrimaryTypes
유형:  Array<string> optional
포함된 기본 장소 유형 (예: 'restaurant' 또는 'gas_station')

장소는 기본 유형이 이 목록에 포함된 경우에만 반환됩니다. 값을 최대 5개까지 지정할 수 있습니다. 유형을 지정하지 않으면 모든 장소 유형이 반환됩니다.
HTML 속성:
  • <gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>
includedRegionCodes
유형:  Array<string> optional
지정된 리전의 결과만 포함합니다. 최대 15개의 CLDR 2자리 리전 코드로 지정됩니다. 빈 집합은 결과를 제한하지 않습니다. locationRestriction와 includedRegionCodes가 모두 설정된 경우 결과는 교차 영역에 위치합니다.
HTML 속성:
  • <gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>
locationBias
유형:  LocationBias optional
장소를 검색할 때 사용할 소프트 경계 또는 힌트입니다.
locationRestriction
유형:  LocationRestriction optional
검색 결과를 제한하는 경계입니다.
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 속성:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
거리를 계산할 출발지입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 지정된 경우 계산에 사용되지 않습니다.
HTML 속성:
  • <gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>
requestedLanguage
유형:  string optional
가능한 경우 결과를 반환할 언어의 언어 식별자입니다. 선택한 언어로 된 검색 결과에 더 높은 순위가 부여될 수 있지만 추천이 이 언어로만 제한되지는 않습니다. 지원 언어 목록을 참조하세요.
HTML 속성:
  • <gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>
requestedRegion
유형:  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 속성:
  • <gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>
unitSystem
유형:  UnitSystem optional
거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 requestedRegion에 따라 단위 시스템이 결정됩니다.
HTML 속성:
  • <gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>
prediction-item-icon
이 슬롯은 예측 항목 옆에 표시되는 아이콘으로 렌더링할 <template> 요소를 정확히 하나만 허용합니다.
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 내 어디에나 있을 수 있습니다. prediction-item-main-text의 일부일 필요는 없습니다.
prediction-item-selected
사용자가 키보드로 탐색하는 항목. 참고: 선택한 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 모두 받습니다.
prediction-list
장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래에 드롭다운 목록으로 표시됩니다.
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
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
gmp-error
function(errorEvent)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-select
function(placeSelectEvent)
인수: 
이 이벤트는 사용자가 예상 장소를 선택할 때 실행됩니다. Place 객체를 포함합니다.

BasicPlaceAutocompleteElementOptions 인터페이스

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

BasicPlaceAutocompleteElement를 구성하기 위한 옵션입니다.
includedPrimaryTypes optional
유형:  Array<string> optional
includedRegionCodes optional
유형:  Array<string> optional
locationBias optional
유형:  LocationBias optional
locationRestriction optional
유형:  LocationRestriction optional
name optional
유형:  string optional
origin optional
requestedLanguage optional
유형:  string optional
requestedRegion optional
유형:  string optional
unitSystem optional
유형:  UnitSystem optional

PlaceDetailsElement 클래스

google.maps.places.PlaceDetailsElement 클래스

전체 레이아웃으로 장소의 세부정보를 표시합니다. 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></gmp-place-details>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceDetailsElementOptions를 구현합니다.

const {PlaceDetailsElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceDetailsElement
PlaceDetailsElement([options])
매개변수: 
place
유형:  Place optional
읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.
--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
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
gmp-error
function(event)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-load
function(event)
인수: 
이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.

PlaceDetailsElementOptions 인터페이스

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

PlaceDetailsElement 옵션

PlaceDetailsCompactElement 클래스

google.maps.places.PlaceDetailsCompactElement 클래스

장소의 세부정보를 압축 레이아웃으로 표시합니다. 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 orientation="vertical" truncation-preferred></gmp-place-details-compact>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceDetailsCompactElementOptions를 구현합니다.

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
매개변수: 
orientation
유형:  PlaceDetailsOrientation optional
기본값: PlaceDetailsOrientation.VERTICAL
요소의 방향 변형 (세로 또는 가로)입니다.
HTML 속성:
  • <gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
  • <gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>
place
유형:  Place optional
읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 장소 객체입니다.
truncationPreferred
유형:  boolean
기본값: false
true인 경우 장소 이름과 주소를 줄바꿈하지 않고 한 줄에 맞게 자릅니다.
HTML 속성:
  • <gmp-place-details-compact truncation-preferred></gmp-place-details-compact>
--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
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
gmp-error
function(event)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-load
function(event)
인수: 
이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.

PlaceDetailsCompactElementOptions 인터페이스

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

PlaceDetailsCompactElement 옵션
orientation optional
유형:  PlaceDetailsOrientation optional
PlaceDetailsCompactElement.orientation를 참조하세요.
truncationPreferred optional
유형:  boolean optional
PlaceDetailsCompactElement.truncationPreferred를 참조하세요.

PlaceDetailsOrientation 상수

google.maps.places.PlaceDetailsOrientation 상수

PlaceDetailsCompactElement의 방향 변형입니다.

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
HORIZONTAL 가로 방향
VERTICAL 세로 방향

PlaceDetailsPlaceRequestElement 클래스

google.maps.places.PlaceDetailsPlaceRequestElement 클래스

장소 객체, 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="some-place-id"></gmp-place-details-place-request>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceDetailsPlaceRequestElementOptions를 구현합니다.

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
매개변수: 
place
유형:  Place optional
기본값: null
장소 세부정보 간략 요소에 세부정보를 렌더링할 장소 객체, ID 또는 리소스 이름입니다. 이 속성은 속성에 리소스 이름으로 반영됩니다.
HTML 속성:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceDetailsPlaceRequestElementOptions 인터페이스

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

PlaceDetailsPlaceRequestElement 옵션
place optional
유형:  Place|string optional
PlaceDetailsPlaceRequestElement.place 보기

PlaceDetailsLocationRequestElement 클래스

google.maps.places.PlaceDetailsLocationRequestElement 클래스

위치를 기반으로 데이터를 로드하도록 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>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceDetailsLocationRequestElementOptions를 구현합니다.

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
매개변수: 
location
기본값: null
장소 세부정보 요소에서 세부정보를 렌더링할 위치입니다. LatLngAltitude로 정규화합니다.
HTML 속성:
  • <gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceDetailsLocationRequestElementOptions 인터페이스

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

PlaceDetailsLocationRequestElement 옵션
location optional
장소를 렌더링할 위치입니다.

PlaceSearchElement 클래스

google.maps.places.PlaceSearchElement 클래스

장소 검색 결과를 목록으로 표시합니다. 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="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceSearchElementOptions를 구현합니다.

const {PlaceSearchElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceSearchElement
PlaceSearchElement([options])
매개변수: 
attributionPosition
기본값: PlaceSearchAttributionPosition.TOP
저작자 표시 로고 및 법적 정보 공개 버튼의 위치입니다.
HTML 속성:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
유형:  PlaceSearchOrientation optional
기본값: PlaceSearchOrientation.VERTICAL
요소의 방향 변형 (세로 또는 가로)입니다.
HTML 속성:
  • <gmp-place-search orientation="vertical"></gmp-place-search>
  • <gmp-place-search orientation="horizontal"></gmp-place-search>
places
유형:  Array<Place>
읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 표시 영역이 포함된 Place 객체의 배열입니다.
selectable
유형:  boolean optional
기본값: false
목록 항목을 선택할 수 있는지 여부입니다. true인 경우 목록 항목은 클릭 시 gmp-select 이벤트를 전달하는 버튼이 됩니다. 접근성 키보드 탐색 및 선택도 지원됩니다.
HTML 속성:
  • <gmp-place-search selectable></gmp-place-search>
truncationPreferred
유형:  boolean optional
기본값: false
true인 경우 특정 콘텐츠 줄을 줄바꿈하는 대신 한 줄에 맞게 자릅니다.
HTML 속성:
  • <gmp-place-search truncation-preferred></gmp-place-search>
--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
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.
gmp-error
function(event)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부될 때 (예: 잘못된 API 키) 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-load
function(event)
인수: 
이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 실행됩니다. 이 이벤트는 버블링되지 않습니다.
gmp-select
function(event)
인수: 
이 이벤트는 목록에서 장소를 선택할 때 실행됩니다. 선택한 장소의 ID, 위치, 표시 영역이 포함된 Place 객체를 포함합니다.

PlaceSearchElementOptions 인터페이스

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

PlaceSearchElement 옵션
attributionPosition optional
PlaceSearchElement.attributionPosition를 참조하세요.
orientation optional
유형:  PlaceSearchOrientation optional
PlaceSearchElement.orientation를 참조하세요.
selectable optional
유형:  boolean optional
PlaceSearchElement.selectable 보기
truncationPreferred optional
유형:  boolean optional
PlaceSearchElement.truncationPreferred를 참조하세요.

PlaceSearchAttributionPosition 상수

google.maps.places.PlaceSearchAttributionPosition 상수

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

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
BOTTOM PlaceSearchElement 하단의 저작자 표시
TOP PlaceSearchElement 상단의 저작자 표시

PlaceSearchOrientation 상수

google.maps.places.PlaceSearchOrientation 상수

PlaceSearchElement의 방향 변형입니다.

const {PlaceSearchOrientation} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
HORIZONTAL 가로 방향
VERTICAL 세로 방향

PlaceSelectEvent 클래스

google.maps.places.PlaceSelectEvent 클래스

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

이 클래스는 Event를 확장합니다.

const {PlaceSelectEvent} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
place
유형:  Place
선택한 장소입니다.

PlaceNearbySearchRequestElement 클래스

google.maps.places.PlaceNearbySearchRequestElement 클래스

주변 지역 검색 요청을 기반으로 결과를 로드하도록 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="preference"></gmp-place-nearby-search-request>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceNearbySearchRequestElementOptions를 구현합니다.

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
매개변수: 
excludedPrimaryTypes
유형:  Array<string> optional
기본값: null
제외된 기본 장소 유형입니다.
HTML 속성:
  • <gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>
excludedTypes
유형:  Array<string> optional
기본값: null
제외된 장소 유형입니다.
HTML 속성:
  • <gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>
includedPrimaryTypes
유형:  Array<string> optional
기본값: null
포함된 기본 장소 유형입니다.
HTML 속성:
  • <gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>
includedTypes
유형:  Array<string> optional
기본값: null
포함된 장소 유형입니다.
HTML 속성:
  • <gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>
locationRestriction
유형:  Circle|CircleLiteral optional
기본값: null
검색할 리전입니다. Circle로 정규화합니다.
HTML 속성:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
유형:  number optional
기본값: null
반환할 결과의 최대 수입니다.
HTML 속성:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
유형:  SearchNearbyRankPreference optional
기본값: null
응답에서 결과의 순위가 지정되는 방식입니다.
HTML 속성:
  • <gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceNearbySearchRequestElementOptions 인터페이스

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

PlaceNearbySearchRequestElement 옵션
excludedPrimaryTypes optional
유형:  Array<string> optional
제외된 기본 장소 유형입니다. 자세한 내용은 PlaceNearbySearchRequestElement.excludedPrimaryTypes 및 SearchNearbyRequest.excludedPrimaryTypes을 참고하세요.
excludedTypes optional
유형:  Array<string> optional
제외된 장소 유형입니다. 자세한 내용은 PlaceNearbySearchRequestElement.excludedTypes 및 SearchNearbyRequest.excludedTypes을 참고하세요.
includedPrimaryTypes optional
유형:  Array<string> optional
포함된 기본 장소 유형입니다. 자세한 내용은 PlaceNearbySearchRequestElement.includedPrimaryTypes 및 SearchNearbyRequest.includedPrimaryTypes을 참고하세요.
includedTypes optional
유형:  Array<string> optional
포함된 장소 유형입니다. 자세한 내용은 PlaceNearbySearchRequestElement.includedTypes 및 SearchNearbyRequest.includedTypes을 참고하세요.
locationRestriction optional
유형:  Circle|CircleLiteral optional
검색할 리전입니다. 자세한 내용은 PlaceNearbySearchRequestElement.locationRestriction 및 SearchNearbyRequest.locationRestriction을 참고하세요.
maxResultCount optional
유형:  number optional
반환할 결과의 최대 수입니다. 자세한 내용은 PlaceNearbySearchRequestElement.maxResultCount 및 SearchNearbyRequest.maxResultCount을 참고하세요.
rankPreference optional
유형:  SearchNearbyRankPreference optional
응답에서 결과의 순위가 지정되는 방식입니다. 자세한 내용은 PlaceNearbySearchRequestElement.rankPreference 및 SearchNearbyRankPreference을 참고하세요.

PlaceTextSearchRequestElement 클래스

google.maps.places.PlaceTextSearchRequestElement 클래스

텍스트 검색 요청을 기반으로 결과를 로드하도록 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="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceTextSearchRequestElementOptions를 구현합니다.

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceTextSearchRequestElement
PlaceTextSearchRequestElement([options])
매개변수: 
evConnectorTypes
유형:  Array<EVConnectorType> optional
기본값: null
선호하는 EV 커넥터 유형 목록입니다.
HTML 속성:
  • <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>
evMinimumChargingRateKw
유형:  number optional
기본값: null
필요한 최소 충전 속도(킬로와트)입니다.
HTML 속성:
  • <gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>
includedType
유형:  string optional
기본값: null
요청된 장소 유형입니다.
HTML 속성:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
유형:  boolean optional
기본값: null
현재 영업 중인 장소로 검색을 제한하는 데 사용됩니다.
HTML 속성:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
유형:  LocationBias optional
기본값: null
검색의 위치 편향입니다. LatLngAltitude | LatLngBounds | Circle | string로 정규화합니다.
HTML 속성:
  • <gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>
locationRestriction
기본값: null
검색의 위치 제한입니다. LatLngBounds로 정규화합니다.
HTML 속성:
  • <gmp-place-text-search-request location-restriction="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
maxResultCount
유형:  number optional
기본값: null
반환할 결과의 최대 수입니다.
HTML 속성:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
유형:  number optional
기본값: null
평균 사용자 평점이 이 한도보다 엄격하게 낮은 결과를 필터링합니다.
HTML 속성:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
유형:  Array<PriceLevel> optional
기본값: null
특정 가격 수준으로 표시된 장소로 검색을 제한하는 데 사용됩니다.
HTML 속성:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
유형:  SearchByTextRankPreference optional
기본값: null
응답에서 결과의 순위가 지정되는 방식입니다.
HTML 속성:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
유형:  string optional
기본값: null
텍스트 검색을 위한 텍스트 쿼리입니다.
HTML 속성:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
유형:  boolean optional
기본값: null
'includedType'에 엄격한 유형 필터링을 설정하는 데 사용됩니다.
HTML 속성:
  • <gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceTextSearchRequestElementOptions 인터페이스

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

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

Autocomplete 클래스

google.maps.places.Autocomplete 클래스

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

이 클래스는 MVCObject를 확장합니다.

const {Autocomplete} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
Autocomplete
Autocomplete(inputField[, opts])
매개변수: 
지정된 옵션을 사용하여 지정된 입력 텍스트 필드에 연결되는 Autocomplete의 새 인스턴스를 만듭니다.
getBounds
getBounds()
매개변수: 없음
반환 값:  LatLngBounds|undefined 편향 경계입니다.
예측이 편향된 경계를 반환합니다.
getFields
getFields()
매개변수: 없음
반환 값:  Array<string>|undefined
세부정보를 가져오는 데 성공하면 세부정보 응답에서 장소에 포함할 필드를 반환합니다. 필드 목록은 PlaceResult를 참조하세요.
getPlace
getPlace()
매개변수: 없음
반환 값:  PlaceResult 사용자가 선택한 장소입니다.
세부정보를 가져온 경우 사용자가 선택한 장소의 세부정보를 반환합니다. 그렇지 않으면 name 속성이 입력란의 현재 값으로 설정된 스텁 Place 객체를 반환합니다.
setBounds
setBounds(bounds)
매개변수: 
반환 값: 없음
장소 결과를 반환할 기본 영역을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역만으로 제한되지는 않습니다.
setComponentRestrictions
setComponentRestrictions(restrictions)
매개변수: 
반환 값: 없음
구성요소 제한을 설정합니다. 구성요소 제한은 상위 구성요소 내의 예측만 제한하는 데 사용됩니다. 예를 들어 국가입니다.
setFields
setFields(fields)
매개변수: 
  • fields:  Array<string> optional
반환 값: 없음
세부정보가 성공적으로 검색되면 세부정보 응답에 장소에 포함할 필드를 설정합니다. 필드 목록은 PlaceResult를 참조하세요.
setOptions
setOptions(options)
매개변수: 
반환 값: 없음
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 optional
장소를 검색할 영역입니다.
componentRestrictions optional
유형:  ComponentRestrictions optional
구성요소 제한사항입니다. 구성요소 제한은 상위 구성요소 내의 예측만 제한하는 데 사용됩니다. 예를 들어 국가입니다.
fields optional
유형:  Array<string> optional
세부정보가 성공적으로 검색되면 세부정보 응답의 장소에 포함할 필드입니다. 이 필드에는 요금이 청구됩니다. ['ALL']이 전달되는 경우 사용 가능한 모든 필드가 반환되고 청구됩니다 (프로덕션 배포의 경우 권장되지 않습니다). 필드 목록은 PlaceResult를 참조하세요. 중첩된 필드는 점 경로 (예: "geometry.location")로 지정할 수 있습니다. 기본값은 ['ALL']입니다.
placeIdOnly optional
유형:  boolean optional
장소 ID만 가져올지 여부입니다. place_changed 이벤트가 실행될 때 제공되는 PlaceResult에는 장소 ID, types, name 필드만 있으며, Autocomplete 서비스에서 반환하는 장소 ID, types, description이 포함됩니다. 기본적으로 사용 중지됩니다.
strictBounds optional
유형:  boolean optional
쿼리가 전송된 시점에 Autocomplete 위젯의 경계 내에 있는 장소만 Autocomplete 위젯에서 반환해야 함을 나타내는 불리언 값입니다. strictBounds를 false (기본값)로 설정하면 검색 결과가 경계 내에 포함된 장소에 편중되지만 이 장소만으로 제한되지는 않습니다.
types optional
유형:  Array<string> optional
반환할 예측 유형입니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다.

google.maps.places.SearchBox 클래스

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

이 클래스는 MVCObject를 확장합니다.

const {SearchBox} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
SearchBox
SearchBox(inputField[, opts])
매개변수: 
지정된 옵션을 사용하여 지정된 입력 텍스트 필드에 연결되는 SearchBox의 새 인스턴스를 만듭니다.
getBounds
getBounds()
매개변수: 없음
반환 값:  LatLngBounds|undefined
검색어 예상 검색어가 편향되는 경계를 반환합니다.
getPlaces
getPlaces()
매개변수: 없음
반환 값:  Array<PlaceResult>|undefined
places_changed 이벤트에 사용하기 위해 사용자가 선택한 쿼리를 반환합니다.
setBounds
setBounds(bounds)
매개변수: 
반환 값: 없음
검색어 예측에 편향을 적용하는 데 사용할 리전을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역으로 완전히 제한되지는 않습니다.
상속됨: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
인수: 없음
이 이벤트는 사용자가 검색어를 선택할 때 실행되며, getPlaces를 사용하여 새 장소를 가져와야 합니다.

SearchBoxOptions 인터페이스

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

SearchBox 객체에 설정할 수 있는 옵션입니다.
bounds optional
쿼리 예측을 편향시킬 영역입니다. 예측은 이 경계를 타겟팅하는 쿼리에 편중되지만 이 쿼리만으로 제한되지는 않습니다.

PlaceContextualElement 클래스

google.maps.places.PlaceContextualElement 클래스

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

맞춤 요소:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceContextualElementOptions를 구현합니다.

const {PlaceContextualElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceContextualElement
PlaceContextualElement([options])
매개변수: 
contextToken
유형:  string optional
컨텍스트 토큰입니다.
HTML 속성:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceContextualElementOptions 인터페이스

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

PlaceContextualElement 옵션
contextToken optional
유형:  string optional
Google 지도 기반 그라운딩 응답에서 제공하는 컨텍스트 토큰입니다.

PlaceContextualListConfigElement 클래스

google.maps.places.PlaceContextualListConfigElement 클래스

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

맞춤 요소:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PlaceContextualListConfigElementOptions를 구현합니다.

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
매개변수: 
layout
유형:  PlaceContextualListLayout optional
레이아웃입니다.
HTML 속성:
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
유형:  boolean optional
지도가 숨겨져 있는지 여부입니다.
HTML 속성:
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
addEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션을 참고하세요.
반환 값:  void
addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PlaceContextualListConfigElementOptions 인터페이스

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

PlaceContextualListConfigElement의 옵션입니다.
layout optional
유형:  PlaceContextualListLayout optional
기본값: PlaceContextualListLayout.VERTICAL
레이아웃입니다.
mapHidden optional
유형:  boolean optional
기본값: false
지도를 숨겨야 하는 경우 true입니다.

PlaceContextualListLayout 상수

google.maps.places.PlaceContextualListLayout 상수

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

const {PlaceContextualListLayout} = await google.maps.importLibrary("places")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
COMPACT 압축 목록 레이아웃: 목록 항목이 한 줄에 링크로 렌더링되며 드롭다운 목록에 오버플로가 있습니다.
VERTICAL 세로 목록 레이아웃: 목록 항목이 세로 목록의 카드로 렌더링됩니다.