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 속성:
|
includedRegionCodes |
유형:
Array<string> optional 최대 15개의 CLDR 2자리 지역 코드로 지정된 지역의 결과만 포함합니다. 빈 집합은 결과를 제한하지 않습니다.
locationRestriction 와 includedRegionCodes 가 모두 설정된 경우 결과는 교차 영역에 위치합니다.HTML 속성:
|
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 속성:
|
origin |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 거리를 계산할 원점입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 제공된 경우 계산에 사용되지 않습니다.
HTML 속성:
|
requestedLanguage |
유형:
string optional 가능한 경우 결과를 반환해야 하는 언어의 언어 식별자입니다. 선택한 언어로 된 결과가 더 높은 순위로 표시될 수 있지만 추천은 이 언어로 제한되지 않습니다. 지원 언어 목록을 참조하세요.
HTML 속성:
|
requestedRegion |
유형:
string optional 결과 형식 지정 및 결과 필터링에 사용되는 지역 코드입니다. 이 국가로 추천이 제한되지는 않습니다. 지역 코드에는 ccTLD ('최상위 도메인') 2자리 값이 허용됩니다. 대부분의 ccTLD 코드는 ISO 3166-1 코드와 동일하지만 일부 특별한 예외가 있습니다. 예를 들어 영국의 ccTLD는 'uk' (
.co.uk )이지만 ISO 3166-1 코드는 'gb' (기술적으로 '그레이트브리튼 북아일랜드 연합왕국'의 법인)입니다.HTML 속성:
|
unitSystem |
유형:
UnitSystem optional 거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 단위 시스템이 requestedRegion에 따라 결정됩니다.
HTML 속성:
|
슬롯 | |
---|---|
prediction-item-icon |
이 슬롯은 예측 항목 옆에 표시되는 아이콘으로 렌더링할 <template> 요소를 정확히 하나 허용합니다. |
부품 | |
---|---|
prediction-item |
단일 예측을 나타내는 예상 검색어 드롭다운의 항목입니다. |
prediction-item-icon |
예상 검색어 목록에서 각 항목의 왼쪽에 표시되는 아이콘. |
prediction-item-main-text |
예측의 기본 텍스트인 예측 항목의 일부입니다. 지리적 위치의 경우 '시드니'와 같은 장소 이름이나 '10. King Street'와 같은 도로명과 번지가 포함됩니다. 기본적으로 prediction-item-main-text는 검은색으로 지정됩니다. 예측 항목에 추가 텍스트가 있으면 prediction-item-main-text 외부에 있으며 prediction-item의 스타일을 상속합니다. 기본적으로 색상은 회색으로 지정됩니다. 추가 텍스트는 일반적으로 주소입니다. |
prediction-item-match |
사용자의 입력과 일치하는 반환된 예상 검색어의 일부. 기본적으로, 일치하는 텍스트는 굵은 텍스트로 강조됩니다. 일치하는 텍스트는 prediction-item 내 어디에나 있을 수 있습니다. 예측 항목 기본 텍스트의 일부일 필요는 없습니다. |
prediction-item-selected |
사용자가 키보드로 이동한 항목. 참고: 선택된 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 받습니다. |
prediction-list |
장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래 드롭다운 목록으로 표시됩니다. |
CSS 속성 | |
---|---|
background-color |
요소의 배경 색상을 재정의합니다. |
border |
요소의 테두리를 재정의합니다. |
border-radius |
요소의 테두리 반경을 재정의합니다. |
color-scheme |
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
이벤트 | |
---|---|
gmp-error |
function(errorEvent) 인수:
이 이벤트는 백엔드 요청이 거부된 경우 (예: 잘못된 API 키) 발생합니다. 이 이벤트는 버블링되지 않습니다. |
gmp-select |
function(placeSelectEvent) 인수:
이 이벤트는 사용자가 장소 예측을 선택할 때 발생합니다. 장소 객체를 포함합니다. |
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 |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
유형:
string optional |
requestedRegion optional |
유형:
string optional |
unitSystem optional |
유형:
UnitSystem optional |
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 속성:
|
includedRegionCodes |
유형:
Array<string> optional 최대 15개의 CLDR 2자리 지역 코드로 지정된 지역의 결과만 포함합니다. 빈 집합은 결과를 제한하지 않습니다.
locationRestriction 와 includedRegionCodes 가 모두 설정된 경우 결과는 교차 영역에 위치합니다.HTML 속성:
|
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 속성:
|
origin |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 거리를 계산할 원점입니다. 지정하지 않으면 거리가 계산되지 않습니다. 고도가 제공된 경우 계산에 사용되지 않습니다.
HTML 속성:
|
requestedLanguage |
유형:
string optional 가능한 경우 결과를 반환해야 하는 언어의 언어 식별자입니다. 선택한 언어로 된 결과가 더 높은 순위로 표시될 수 있지만 추천은 이 언어로 제한되지 않습니다. 지원 언어 목록을 참조하세요.
HTML 속성:
|
requestedRegion |
유형:
string optional 결과 형식 지정 및 결과 필터링에 사용되는 지역 코드입니다. 이 국가로 추천이 제한되지는 않습니다. 지역 코드에는 ccTLD ('최상위 도메인') 2자리 값이 허용됩니다. 대부분의 ccTLD 코드는 ISO 3166-1 코드와 동일하지만 일부 특별한 예외가 있습니다. 예를 들어 영국의 ccTLD는 'uk' (
.co.uk )이지만 ISO 3166-1 코드는 'gb' (기술적으로 '그레이트브리튼 북아일랜드 연합왕국'의 법인)입니다.HTML 속성:
|
unitSystem |
유형:
UnitSystem optional 거리를 표시하는 데 사용되는 단위 체계입니다. 지정하지 않으면 단위 시스템이 requestedRegion에 따라 결정됩니다.
HTML 속성:
|
부품 | |
---|---|
prediction-item |
단일 예측을 나타내는 예상 검색어 드롭다운의 항목입니다. |
prediction-item-icon |
예상 검색어 목록에서 각 항목의 왼쪽에 표시되는 아이콘. |
prediction-item-main-text |
예측의 기본 텍스트인 예측 항목의 일부입니다. 지리적 위치의 경우 '시드니'와 같은 장소 이름이나 '10. King Street'와 같은 도로명과 번지가 포함됩니다. 기본적으로 prediction-item-main-text는 검은색으로 지정됩니다. 예측 항목에 추가 텍스트가 있으면 prediction-item-main-text 외부에 있으며 prediction-item의 스타일을 상속합니다. 기본적으로 색상은 회색으로 지정됩니다. 추가 텍스트는 일반적으로 주소입니다. |
prediction-item-match |
사용자의 입력과 일치하는 반환된 예상 검색어의 일부. 기본적으로, 일치하는 텍스트는 굵은 텍스트로 강조됩니다. 일치하는 텍스트는 prediction-item 내 어디에나 있을 수 있습니다. 예측 항목 기본 텍스트의 일부일 필요는 없습니다. |
prediction-item-selected |
사용자가 키보드로 이동한 항목. 참고: 선택된 항목은 이 부분 스타일과 예측 항목 부분 스타일의 영향을 받습니다. |
prediction-list |
장소 자동완성 서비스가 반환한 예상 검색어 목록을 포함하는 시각적 요소. 이 목록은 PlaceAutocompleteElement 아래 드롭다운 목록으로 표시됩니다. |
CSS 속성 | |
---|---|
background-color |
요소의 배경 색상을 재정의합니다. |
border |
요소의 테두리를 재정의합니다. |
border-radius |
요소의 테두리 반경을 재정의합니다. |
color-scheme |
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
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 |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
유형:
string optional |
requestedRegion optional |
유형:
string optional |
unitSystem optional |
유형:
UnitSystem 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 로 변환합니다. |
PlaceAutocompleteRequestErrorEvent 클래스
google.maps.places.PlaceAutocompleteRequestErrorEvent
클래스
이 이벤트는 네트워크 요청에 문제가 있을 때 PlaceAutocompleteElement에 의해 발생합니다.
이 클래스는 Event
를 확장합니다.
const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
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 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
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 map-mode="none"></gmp-place-contextual-list-config>
이 클래스는 HTMLElement
를 확장합니다.
이 클래스는 PlaceContextualListConfigElementOptions
를 구현합니다.
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
생성자 | |
---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options]) 매개변수:
|
속성 | |
---|---|
layout |
유형:
PlaceContextualListLayout optional 레이아웃
HTML 속성:
|
mapHidden |
유형:
boolean optional 지도가 숨겨져 있는지 여부입니다.
HTML 속성:
|
mapMode |
유형:
PlaceContextualListMapMode optional 장소 목록의 장소 컨텍스트 요소에 사용되는 지도 모드입니다.
HTML 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
PlaceContextualListConfigElementOptions 인터페이스
google.maps.places.PlaceContextualListConfigElementOptions
인터페이스
PlaceContextualListConfigElement의 옵션입니다.
속성 | |
---|---|
layout optional |
유형:
PlaceContextualListLayout optional 레이아웃 |
mapHidden optional |
유형:
boolean optional 기본값:
false 지도를 숨겨야 하는 경우 true입니다. |
mapMode optional |
유형:
PlaceContextualListMapMode optional 장소 목록의 장소 컨텍스트 요소에 사용되는 지도 모드입니다. |
PlaceContextualListLayout 상수
google.maps.places.PlaceContextualListLayout
상수
장소 컨텍스트 요소가 목록 보기에서 지원하는 레이아웃 목록입니다.
const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
---|---|
COMPACT |
소형 목록 레이아웃: 목록 항목이 단일 행에 링크로 렌더링되며, 오버플로는 드롭다운 목록에 표시됩니다. |
VERTICAL |
세로 목록 레이아웃: 목록 항목이 세로 목록의 카드로 렌더링됩니다. |
PlaceContextualListMapMode 상수
google.maps.places.PlaceContextualListMapMode
상수
장소 목록의 장소 컨텍스트 요소에 사용되는 지도 모드입니다.
const {PlaceContextualListMapMode} = await google.maps.importLibrary("places")
를 호출하여 액세스
Maps JavaScript API의 라이브러리를 참고하세요.
상수 | |
---|---|
HYBRID |
위성 또는 포토리얼리스틱 3D 이미지의 주요 도로 투명 레이어 |
NONE |
지도가 없습니다. |
ROADMAP |
일반 2D 거리 지도 |
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 콘솔에서 프로젝트에 Places UI Kit 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, 위치, 뷰포트를 포함하는 장소 객체입니다. |
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 |
중립 컨테이너 색상에 대한 텍스트 및 아이콘 색상 사용할 수 없는 경우 리뷰 게시일 배지 및 전기차 충전기 사용 가능 여부 배지에 사용됩니다. |
--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 지도 공개 대화상자의 장소 주소, 평점, 유형, 가격, 현재 영업 중 상태, 영업시간, 리뷰, 전화번호, 웹사이트, 플러스 코드, 주요 기능, 본문 텍스트에 사용됩니다. |
--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 |
|
font-size |
요소의 모든 텍스트와 아이콘을 확장합니다. 텍스트와 아이콘은 em으로 내부적으로 정의됩니다. 기본값은 16px 입니다. |
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
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 콘솔에서 프로젝트에 Places UI Kit 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 속성:
|
place |
유형:
Place optional 읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 뷰포트를 포함하는 장소 객체입니다. |
truncationPreferred |
유형:
boolean 기본값:
false true인 경우 줄바꿈 대신 한 줄에 맞게 장소 이름과 주소를 자릅니다.
HTML 속성:
|
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 |
|
font-size |
요소의 모든 텍스트와 아이콘을 확장합니다. 텍스트와 아이콘은 em으로 내부적으로 정의됩니다. 기본값은 16px 입니다. |
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
이벤트 | |
---|---|
gmp-error |
function(event) 인수:
이 이벤트는 백엔드 요청이 거부된 경우 (예: 잘못된 API 키) 발생합니다. 이 이벤트는 버블링되지 않습니다. |
gmp-load |
function(event) 인수:
이 이벤트는 요소가 콘텐츠를 로드하고 렌더링할 때 발생합니다. 이 이벤트는 버블링되지 않습니다. |
PlaceDetailsCompactElementOptions 인터페이스
google.maps.places.PlaceDetailsCompactElementOptions
인터페이스
PlaceDetailsCompactElement
옵션
속성 | |
---|---|
orientation optional |
유형:
PlaceDetailsOrientation optional |
truncationPreferred optional |
유형:
boolean optional |
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 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
PlaceDetailsPlaceRequestElementOptions 인터페이스
google.maps.places.PlaceDetailsPlaceRequestElementOptions
인터페이스
PlaceDetailsPlaceRequestElement
옵션
속성 | |
---|---|
place optional |
유형:
Place|string optional |
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 |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 기본값:
null 장소 세부정보 요소에서 세부정보를 렌더링할 위치입니다.
LatLngAltitude 로 정규화됩니다.HTML 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
PlaceDetailsLocationRequestElementOptions 인터페이스
google.maps.places.PlaceDetailsLocationRequestElementOptions
인터페이스
PlaceDetailsLocationRequestElement
옵션
속성 | |
---|---|
location optional |
유형:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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 콘솔에서 프로젝트에 Places UI Kit 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 optional 기본값:
PlaceSearchAttributionPosition.TOP 저작자 표시 로고 및 법적 공개 버튼의 위치입니다.
HTML 속성:
|
orientation |
유형:
PlaceSearchOrientation optional 기본값:
PlaceSearchOrientation.VERTICAL 요소의 방향 변형 (세로 또는 가로)입니다.
HTML 속성:
|
places |
읽기 전용입니다. 현재 렌더링된 장소의 ID, 위치, 뷰포트를 포함하는 Place 객체의 배열입니다. |
selectable |
유형:
boolean optional 기본값:
false 목록 항목을 선택할 수 있는지 여부입니다. true인 경우 목록 항목은 클릭 시
gmp-select 이벤트를 디스패치하는 버튼이 됩니다. 접근성 있는 키보드 탐색 및 선택도 지원됩니다.HTML 속성:
|
truncationPreferred |
유형:
boolean optional 기본값:
false true인 경우 콘텐츠의 특정 줄이 줄바꿈되지 않고 한 줄에 맞게 잘립니다.
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 |
|
font-size |
요소의 모든 텍스트와 아이콘을 조정합니다. 기본값은 16px 입니다. |
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
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 |
유형:
PlaceSearchAttributionPosition optional |
orientation optional |
유형:
PlaceSearchOrientation optional PlaceSearchElement.orientation 를 참조하세요. |
selectable optional |
유형:
boolean optional |
truncationPreferred optional |
유형:
boolean optional |
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 속성:
|
excludedTypes |
유형:
Array<string> optional 기본값:
null HTML 속성:
|
includedPrimaryTypes |
유형:
Array<string> optional 기본값:
null HTML 속성:
|
includedTypes |
유형:
Array<string> optional 기본값:
null HTML 속성:
|
locationRestriction |
유형:
Circle|CircleLiteral optional 기본값:
null HTML 속성:
|
maxResultCount |
유형:
number optional 기본값:
null HTML 속성:
|
rankPreference |
유형:
SearchNearbyRankPreference optional 기본값:
null HTML 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
PlaceNearbySearchRequestElementOptions 인터페이스
google.maps.places.PlaceNearbySearchRequestElementOptions
인터페이스
PlaceNearbySearchRequestElement
옵션
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 HTML 속성:
|
evMinimumChargingRateKw |
유형:
number optional 기본값:
null HTML 속성:
|
includedType |
유형:
string optional 기본값:
null HTML 속성:
|
isOpenNow |
유형:
boolean optional 기본값:
null HTML 속성:
|
locationBias |
유형:
string|LatLngAltitude|LatLngBounds|Circle|LatLng|LatLngLiteral|LatLngAltitudeLiteral|LatLngBoundsLiteral|CircleLiteral optional 기본값:
null HTML 속성:
|
locationRestriction |
유형:
LatLngBounds|LatLngBoundsLiteral optional 기본값:
null HTML 속성:
|
maxResultCount |
유형:
number optional 기본값:
null HTML 속성:
|
minRating |
유형:
number optional 기본값:
null HTML 속성:
|
priceLevels |
유형:
Array<PriceLevel> optional 기본값:
null HTML 속성:
|
rankPreference |
유형:
SearchByTextRankPreference optional 기본값:
null HTML 속성:
|
textQuery |
유형:
string optional 기본값:
null HTML 속성:
|
useStrictTypeFiltering |
유형:
boolean optional 기본값:
null HTML 속성:
|
메서드 | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) 매개변수:
반환 값:
void 지정된 이벤트가 타겟에 전달될 때마다 호출될 함수를 설정합니다. addEventListener를 참고하세요. |
removeEventListener |
removeEventListener(type, listener[, options]) 매개변수:
반환 값:
void 이전에 addEventListener로 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener을 참고하세요. |
PlaceTextSearchRequestElementOptions 인터페이스
google.maps.places.PlaceTextSearchRequestElementOptions
인터페이스
PlaceTextSearchRequestElement
옵션
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) 매개변수:
반환 값: None
장소 결과를 반환할 기본 영역을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역만으로 제한되지는 않습니다. |
setComponentRestrictions |
setComponentRestrictions(restrictions) 매개변수:
반환 값: None
구성요소 제한을 설정합니다. 구성요소 제한은 예측을 상위 구성요소 내의 예측으로만 제한하는 데 사용됩니다. 예를 들어 국가입니다. |
setFields |
setFields(fields) 매개변수:
반환 값: None
세부정보를 성공적으로 가져온 경우 세부정보 응답에 포함할 장소 필드를 설정합니다. 필드 목록은 PlaceResult 를 참고하세요. |
setOptions |
setOptions(options) 매개변수:
반환 값: None
|
setTypes |
setTypes(types) 매개변수:
반환 값: None
반환할 예측 유형을 설정합니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다. |
상속:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
이벤트 | |
---|---|
place_changed |
function() 인수: 없음
이 이벤트는 사용자가 선택한 장소에 PlaceResult 가 제공될 때 발생합니다. 사용자가 컨트롤에서 추천하지 않은 장소의 이름을 입력하고 Enter 키를 누르거나 장소 세부정보 요청이 실패하면 PlaceResult 에는 name 속성에 사용자 입력이 포함되며 다른 속성은 정의되지 않습니다. |
AutocompleteOptions 인터페이스
google.maps.places.AutocompleteOptions
인터페이스
Autocomplete
객체에 설정할 수 있는 옵션입니다.
속성 | |
---|---|
bounds optional |
유형:
LatLngBounds|LatLngBoundsLiteral optional 장소를 검색할 영역입니다. |
componentRestrictions optional |
유형:
ComponentRestrictions optional 구성요소 제한사항입니다. 구성요소 제한은 예측을 상위 구성요소 내의 예측으로만 제한하는 데 사용됩니다. 예를 들어 국가입니다. |
fields optional |
유형:
Array<string> optional 세부정보를 성공적으로 가져온 경우 세부정보 응답에 포함할 장소 필드입니다. 요금이 청구됩니다. ['ALL'] 이 전달되는 경우 사용 가능한 모든 필드가 반환되고 청구됩니다 (프로덕션 배포의 경우 권장되지 않음). 필드 목록은 PlaceResult 를 참고하세요. 중첩된 필드는 점 경로 (예: "geometry.location" )로 지정할 수 있습니다. 기본값은 ['ALL'] 입니다. |
|
유형:
boolean optional 장소 ID만 가져올지 여부입니다. place_changed 이벤트가 발생할 때 사용할 수 있는 PlaceResult에는 place_id, types, name 필드만 있으며, Autocomplete 서비스에서 반환된 place_id, types, description이 있습니다. 기본적으로 사용 중지됩니다. |
strictBounds optional |
유형:
boolean optional 쿼리가 전송된 시점에 Autocomplete 위젯의 경계 내에 있는 장소만 Autocomplete 위젯에서 반환해야 함을 나타내는 불리언 값입니다. strictBounds를 false (기본값)로 설정하면 검색 결과가 경계 내에 포함된 장소에 편중되지만 이 장소만으로 제한되지는 않습니다. |
types optional |
유형:
Array<string> optional 반환할 예측 유형입니다. 지원되는 유형은 개발자 가이드를 참고하세요. 유형을 지정하지 않으면 모든 유형이 반환됩니다. |
SearchBox 클래스
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) 매개변수:
반환 값: None
쿼리 예측에 편향을 주기 위해 사용할 리전을 설정합니다. 검색 결과는 이 지역에 편중되지만 이 지역만으로 제한되지는 않습니다. |
상속:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
이벤트 | |
---|---|
places_changed |
function() 인수: 없음
이 이벤트는 사용자가 쿼리를 선택할 때 발생하며, getPlaces 를 사용하여 새 장소를 가져와야 합니다. |
SearchBoxOptions 인터페이스
google.maps.places.SearchBoxOptions
인터페이스
SearchBox
객체에 설정할 수 있는 옵션입니다.
속성 | |
---|---|
bounds optional |
유형:
LatLngBounds|LatLngBoundsLiteral optional 쿼리 예측에 편향을 적용할 영역입니다. 예측은 이러한 경계를 타겟팅하는 쿼리에 편중되지만 이러한 쿼리만으로 제한되지는 않습니다. |