고급 장소 세부정보 요소 (미리보기)

고급 장소 세부정보 요소 및 고급 장소 세부정보 컴팩트 요소는 장소의 세부정보를 렌더링하는 HTML 요소입니다.

고급 장소 세부정보 요소와 고급 장소 세부정보 컴팩트 요소는 모두 동일한 고급 기능을 제공하며, 작업 버튼 맞춤설정, 장소 이름 생략, 리뷰 및 미디어 필터링이 포함됩니다.

맞춤설정 도구를 사용하여 다양한 속성 집합이 장소 세부정보 요소의 디자인에 미치는 영향을 시각화하고 HTML/CSS, Kotlin/XML, Swift에서 코드에 액세스합니다.

고급 장소 세부정보 요소 (미리보기)

지도에서 마커를 클릭하여 고급 장소 세부정보 요소에서 장소 세부정보를 확인합니다.

AdvancedPlaceDetailsElement 는 전체 영업시간, 웹사이트, 전화번호, AI 기반 요약 (편집 요약으로 대체), 유형별 주요 정보, 리뷰, AI 기반 리뷰 요약, 코드, 기능 목록을 비롯한 광범위한 콘텐츠 요소를 지원합니다.

지도에 장소 세부정보를 표시하려면 HTML 페이지의 gmp-map 요소에 gmp-advanced-place-details 요소를 추가합니다. 하위 요소인 gmp-place-details-place-request를 포함하여 장소를 선택합니다. 장소 객체, 장소 ID 또는 장소의 리소스 이름일 수 있습니다. 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

콘텐츠 구성

이 예와 같이 하위 요소를 중첩하여 장소 세부정보를 선택하고 구성함으로써 gmp-advanced-place-details 요소에 표시되는 특정 장소 콘텐츠를 제어할 수 있습니다. 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

각 하위 콘텐츠 요소는 표시할 해당 장소 세부정보를 선택합니다. gmp-place-address는 장소의 주소를 선택하고 gmp-place-price는 장소의 가격대를 선택하는 식입니다. gmp-place-summary 및 gmp-place-review-summary 요소는 각각 장소 및 리뷰의 AI 기반 요약을 제공합니다. 선택한 세부정보는 항상 미리 정의된 고정된 순서로 렌더링되므로 하위 요소의 순서는 중요하지 않습니다.

이러한 요소 중 일부는 콘텐츠별 속성을 사용하여 추가로 구성할 수 있습니다:

  • gmp-place-media 요소는 단일 사진을 표시하는 데 사용되며 클릭하면 라이트박스에서 사진을 여는 lightbox-preferred 속성을 포함합니다. 라이트박스는 기본적으로 사용 중지되어 있습니다.
  • gmp-place-attribution 요소는 사진 또는 리뷰의 출처와 같은 포괄적인 지도 API 데이터 저작자 표시 구성을 표시하는 데 사용됩니다. light-scheme-color 및 dark-scheme-color 속성은 밝은 모드와 어두운 모드에서 저작자 표시 텍스트의 색상을 설정하는 데 사용됩니다.

지원되는 모든 콘텐츠 요소에 관한 자세한 내용은 장소 위젯 콘텐츠 맞춤설정 참고 문서를 참조하세요.

간단하게 gmp-place-all-content 를 사용하여 고급 장소 세부정보 요소에서 사용할 수 있는 모든 세부정보를 표시하거나 gmp-place-standard-content 를 사용하여 표준 구성을 표시할 수도 있습니다.

디자인 구성

gmp-advanced-place-details 요소의 권장 너비 범위는 250~400픽셀입니다. 너비가 250픽셀 미만이면 올바르게 표시되지 않을 수 있습니다. 애플리케이션에 맞게 높이를 설정합니다. 고급 장소 세부정보 요소는 필요에 따라 할당된 공간 내에서 스크롤하도록 설계되었습니다.

gmp-advanced-place-details 요소는 요소의 색상과 글꼴을 구성하기 위한 다양한 맞춤 CSS 속성도 지원합니다. 자세한 내용은 장소 UI 키트 맞춤 스타일 지정 을 참조하세요.

고급 장소 세부정보 컴팩트 요소 (미리보기)

지도에서 마커를 클릭하여 고급 장소 세부정보 컴팩트 요소에서 장소 세부정보를 확인합니다.

AdvancedPlaceDetailsCompactElement 는 최소한의 공간을 사용하여 선택한 장소의 세부정보를 렌더링합니다. 이는 지도에서 장소를 강조표시하는 정보 창, 채팅에서 위치를 공유하는 것과 같은 소셜 미디어 환경, 현재 위치를 선택하기 위한 추천 또는 Google 지도에서 장소를 참조하기 위한 미디어 기사 내에서 유용할 수 있습니다. AdvancedPlaceDetailsCompactElement는 이름, 주소, 평점, 유형, 가격, 접근성 아이콘, 영업 상태, 단일 사진을 표시할 수 있습니다. `orientation` 속성에서 선택한 대로 가로 또는 세로로 표시할 수 있습니다.

다음 스니펫에서 gmp-advanced-place-details-compact는 orientation이 horizontal로 설정된 상태로 구성됩니다. 추가 속성인 truncation-preferred는 줄바꿈 대신 한 줄에 맞게 특정 콘텐츠를 자릅니다. gmp-advanced-place-details-compact 요소에는 장소를 선택하기 위한 하위 요소인 gmp-place-details-place-request가 포함되어 있습니다. 장소 객체, 장소 ID 또는 장소의 리소스 이름일 수 있습니다. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

콘텐츠 구성

이 스니펫과 같이 하위 요소를 중첩하여 장소 세부정보를 선택하고 구성함으로써 gmp-advanced-place-details-compact 요소에 표시되는 특정 장소 콘텐츠를 제어할 수 있습니다. 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

각 하위 콘텐츠 요소는 표시할 해당 장소 세부정보를 선택합니다. 선택한 세부정보는 항상 미리 정의된 고정된 순서로 렌더링되므로 하위 요소의 순서는 중요하지 않습니다. 이러한 요소 중 일부는 콘텐츠별 속성을 사용하여 추가로 구성할 수 있습니다.

지원되는 모든 콘텐츠 요소에 관한 자세한 내용은 장소 위젯 콘텐츠 맞춤설정 참고 문서를 참조하세요.

간단하게 gmp-place-all-content 를 사용하여 고급 장소 세부정보 컴팩트 요소에서 사용할 수 있는 모든 세부정보를 표시하거나 gmp-place-standard-content 를 사용하여 표준 구성을 표시할 수도 있습니다.

디자인 구성

세로 방향의 gmp-advanced-place-details-compact요소에 권장되는 너비 범위는 180~300픽셀입니다. 너비가 160픽셀 미만이면 올바르게 표시되지 않을 수 있습니다. 고정 높이를 설정하지 마세요.

가로 방향의 `gmp-advanced-place-details-compact`gmp-advanced-place-details-compact 요소에 권장되는 너비 범위는 180~500픽셀입니다. 너비가 160픽셀 미만이면 올바르게 표시되지 않을 수 있습니다. 너비가 350픽셀 미만이면 썸네일 이미지가 표시되지 않습니다. 고정 높이를 설정하지 마세요.

gmp-advanced-place-details-compact 요소는 요소의 색상과 글꼴을 구성하기 위한 다양한 맞춤 CSS 속성도 지원합니다. 자세한 내용은 장소 UI 키트 맞춤 스타일 지정 을 참조하세요.

고급 장소 세부정보 컴팩트 요소가 정보 창에 추가되면 맞춤 스타일을 gmp-advanced-place-details-compact 요소에 직접 적용해야 합니다. 정보 창은 지도의 섀도우 DOM의 일부이므로 외부 CSS 스타일이 적용되지 않기 때문입니다. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

이 예에서는 AdvancedPlaceDetailsCompactElement 및 AdvancedMarkerElement를 사용하여 프로그래매틱 방식으로 지도에 InfoWindow 를 추가하는 방법을 보여줍니다.

고급 기능

작업 버튼 맞춤설정

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

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

시각적 저작자 표시 요구사항

중요: 맞춤 작업 버튼이 Google 이외의 서드 파티와 사용자 정보를 공유하는 경우 최종 사용자에게 명확하게 알려야 합니다. 시각적 저작자 표시 요구사항을 참조하세요. .

장소 이름 생략

장소 이름을 생략하려면 맞춤 콘텐츠에서 <gmp-place-name> 요소를 명시적으로 제외합니다. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

리뷰 및 미디어 필터링

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

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

JavaScript를 사용하여 searchMediaCount 및 searchReviewsCount 속성을 읽어 지정된 검색어와 일치하는 항목의 총 개수를 가져올 수도 있습니다. 이러한 속성에 액세스하기 전에 gmp-load 이벤트를 기다려야 합니다. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});