고급 장소 검색 요소 (미리보기)

AdvancedPlaceSearchElement 는 장소 검색 결과를 목록으로 렌더링하는 HTML 요소입니다. gmp-advanced-place-search 요소를 구성하는 방법에는 두 가지가 있습니다.

주변 검색과 텍스트 검색은 모두 작업 버튼 맞춤설정, 리뷰 및 미디어 필터링, 장소 저작자 표시 구성, 장소 선택 및 오류 처리와 같은 고급 기능을 제공합니다.

주변 검색 요청

메뉴에서 장소 유형을 선택하여 해당 장소 유형의 주변 검색 결과를 확인합니다.

주변 검색은 주로 장소 유형 및 위치별로 검색하도록 구성되며 rankPreference 속성을 사용하여 거리 또는 인기도별로 결과를 순위 지정할 수 있습니다. 자세한 내용은 PlaceNearbySearchRequestElement 클래스 참고 문서를 참고하세요.

이 예에서는 사용자가 선택한 장소 유형으로 주변 검색에 대한 응답으로 고급 장소 검색 요소를 렌더링합니다. 또한 선택한 장소의 AdvancedPlaceDetailsCompactElement 를 표시합니다.

지도에 고급 장소 검색 요소를 추가하려면 중첩된 gmp-place-nearby-search-request 요소가 있는 gmp-advanced-place-search 요소를 HTML 페이지에 추가합니다. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

select 요소를 사용하면 사용자가 메뉴에서 장소 유형을 선택할 수 있습니다. 간단히 하기 위해 레스토랑, 카페, 전기자동차 충전소의 세 가지 장소 유형만 나열됩니다. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

사용자가 메뉴에서 장소 유형을 선택하면 gmp-place-nearby-search-request 요소가 업데이트되고 고급 장소 검색 요소에 결과가 표시됩니다.

텍스트 검색 요청

입력란에 검색어를 입력하고 검색 버튼을 클릭하여 검색어와 일치하는 장소 목록을 가져옵니다.

텍스트 검색은 주로 텍스트 쿼리 및 위치를 사용하여 검색하도록 구성되며 가격대, 평점, 현재 영업 중인지 여부로 결과를 세분화할 수 있습니다. 결과는 거리 또는 인기도별로 순위 지정할 수도 있습니다. rankPreference 속성을 사용하여. 자세한 내용은 PlaceTextSearchRequestElement 클래스 참조 문서를 참고하세요.

이 예에서는 사용자 텍스트 입력에 대한 응답으로 고급 장소 검색 요소를 렌더링합니다. 또한 선택한 장소의 AdvancedPlaceDetailsCompactElement 를 표시합니다.

지도에 고급 장소 검색 요소를 추가하려면 중첩된 gmp-place-text-search-request 요소가 있는 gmp-advanced-place-search 요소를 HTML 페이지에 추가합니다. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input 요소를 사용하면 사용자가 검색 텍스트를 입력할 수 있습니다. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

사용자가 검색 버튼을 클릭하면 검색 함수가 실행되고 gmp-place-text-search-request 요소가 업데이트되며 고급 장소 검색 요소에 결과가 표시됩니다.

고급 기능

작업 버튼 맞춤설정

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

리뷰 및 미디어 필터링

이 코드 샘플은 '커피'를 언급하는 미디어와 리뷰만 보여줍니다.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

장소 저작자 표시 구성

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

장소 선택 및 오류 처리

selectable 속성이 있으면 gmp-select 이벤트를 수신 대기하여 사용자가 선택한 장소를 가져올 수 있습니다. 또한 gmp-error 이벤트를 수신 대기하여 장소 데이터를 가져오지 못하는 시나리오를 정상적으로 처리할 수 있습니다. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});