고급 장소 목록 요소 (미리보기)

AdvancedPlaceListElement 는 장소 리소스 이름을 지정하여 목록에 장소 모음을 렌더링하는 HTML 요소입니다.

고급 장소 목록 요소는 고급 기능을 제공하며, 작업 버튼 맞춤설정, 장소 저작자 표시 구성, 오류 처리 등이 포함됩니다.

기본 사용법

구성요소를 사용하려면 페이지에 <gmp-advanced-place-list> 요소를 추가하고 쉼표로 구분된 장소 리소스 이름 목록 을 places 속성을 통해 전달합니다. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

고급 기능

작업 버튼 맞춤설정

고급 장소 목록 구성요소의 <template slot="place-list-item"> 요소 내에 작업 버튼을 하위 요소로 추가합니다. 표준 탐색 연결에는 <gmp-place-link>를 사용하고 action 속성을 명시적으로 지정합니다. 원하는 경우 slot 속성을 지정할 수 있습니다. 유효한 사전 정의된 작업은 open-website, open-directions, open-map, call입니다. slot 속성을 생략하면 기본적으로 action-main으로 설정됩니다. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

장소 저작자 표시 구성

시각적 저작자 표시를 구성하려면 <gmp-place-attribution> 요소를 추가하여 사진 또는 리뷰의 출처와 같은 전반적인 Maps API 데이터 저작자 표시 구성을 표시합니다. <template>의 직접 형제 요소로 추가해야 합니다. <template> 요소 내부 에 배치된 저작자 표시는 무시됩니다. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

오류 처리

요청된 장소 중 하나 이상이 로드되지 않는 시나리오를 정상적으로 처리하기 위해 gmp-error 이벤트를 리슨할 수 있습니다. 

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});