Places Widgets

PlaceAutocompleteElement 클래스

google.maps.places.PlaceAutocompleteElement 클래스

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

맞춤 요소:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>

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

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

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")를 호출하여 액세스합니다. Maps JavaScript API의 라이브러리를 참고하세요.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
매개변수: 
componentRestrictions
유형:  ComponentRestrictions optional
구성요소 제한사항입니다. 구성요소 제한은 상위 구성요소 내의 항목으로만 예측을 제한하는 데 사용됩니다. 국가를 예로 들 수 있습니다.
locationBias
유형:  LocationBias optional
장소를 검색할 때 사용할 소프트 경계 또는 힌트입니다.
locationRestriction
유형:  LocationRestriction optional
검색결과를 제한하는 경계입니다.
name
유형:  string optional
입력 요소에 사용할 이름입니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name을 참고하세요. 입력의 이름 속성과 동일한 동작을 따릅니다. 이 이름은 양식을 제출할 때 사용됩니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form을 참고하세요.
HTML 속성:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
유형:  string optional
가능한 경우 결과를 반환해야 하는 언어의 언어 식별자입니다. 선택한 언어로 된 결과에 더 높은 순위가 부여될 수 있지만 제안사항이 이 언어로 제한되지는 않습니다. 지원 언어 목록을 참조하세요.
HTML 속성:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
유형:  string optional
결과 형식 지정 및 결과 필터링에 사용되는 지역 코드입니다. 이 국가로 추천이 제한되지는 않습니다. 지역 코드에는 2자리 ccTLD ('최상위 도메인') 값이 허용됩니다. 대부분의 ccTLD 코드는 ISO 3166-1 코드와 동일하며, 몇몇 눈에 띄는 예외가 있습니다. 예를 들어 영국의 ccTLD는 'uk' (.co.uk)인 반면 ISO 3166-1 코드는 'gb' (기술적으로 '영국 및 북아일랜드'의 엔티티)입니다.
HTML 속성:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
유형:  Array<string> optional
반환할 예상 검색어의 유형입니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다.
HTML 속성:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
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-selected
사용자가 키보드를 통해 이동할 때의 항목입니다. 참고: 선택한 항목이 이 부분 스타일과 예상 항목 부분 스타일의 영향을 받습니다.
prediction-list
장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래에 드롭다운 목록으로 표시됩니다.
BetaaddEventListener
addEventListener(type, listener[, options])
매개변수: 
  • type:  string 리슨할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다.
  • listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다.
  • options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다.
반환 값:  void
지정된 이벤트가 대상에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를
BetaremoveEventListener
removeEventListener(type, listener[, options])
매개변수: 
  • type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다.
  • listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다.
  • options:  boolean|EventListenerOptions optional 옵션 보기
반환 값:  void
이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 제거합니다. removeEventListener를 참조하세요.
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
인수: 
이 이벤트는 사용자가 장소 예상 검색어를 선택하면 시작됩니다. Place 객체를 포함합니다.
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
인수: 
이 이벤트는 백엔드에 대한 요청이 거부되는 경우 (예: 잘못된 API 키) 시작됩니다. 이 일정은 대화창으로 표시되지 않습니다.

PlaceAutocompleteElementOptions 인터페이스

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

PlaceAutocompleteElement를 생성하기 위한 옵션입니다.
componentRestrictions optional
유형:  ComponentRestrictions optional
PlaceAutocompleteElement.componentRestrictions 보기
locationBias optional
유형:  LocationBias optional
PlaceAutocompleteElement.locationBias 보기
locationRestriction optional
유형:  LocationRestriction optional
PlaceAutocompleteElement.locationRestriction 보기
requestedLanguage optional
유형:  string optional
PlaceAutocompleteElement.requestedLanguage 보기
requestedRegion optional
유형:  string optional
PlaceAutocompleteElement.requestedRegion 보기
types optional
유형:  Array<string> optional
PlaceAutocompleteElement.types 보기

PlaceAutocompletePlaceSelectEvent 클래스

google.maps.places.PlaceAutocompletePlaceSelectEvent 클래스

이 이벤트는 사용자가 Place Autocomplete 요소로 장소를 선택하면 생성됩니다. event.place를 사용하여 선택 항목에 액세스합니다.

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

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

PlaceAutocompleteRequestErrorEvent 클래스

google.maps.places.PlaceAutocompleteRequestErrorEvent 클래스

이 이벤트는 네트워크 요청에 문제가 있는 경우 PlaceAutocompleteElement에서 내보냅니다.

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

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

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 속성이 입력란의 현재 값으로 설정된 스텁 장소 객체를 반환합니다.
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에는 place_id, Types 및 name 필드만 있으며 Autocomplete 서비스에서 반환한 place_id, 유형 및 설명이 있습니다. 기본적으로 사용 중지되어 있습니다.
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
쿼리 예측을 편중할 영역입니다. 예측은 이 경계를 타겟팅하는 쿼리에 편중되지만 이것으로 제한되지는 않습니다.