장소 세부정보 요소

플랫폼 선택: Android iOS JavaScript

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

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

장소 세부정보 요소

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

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

지도에 장소 세부정보를 표시하려면 HTML 페이지의 gmp-map 요소에 gmp-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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

콘텐츠 구성

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

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-content-config>
        </gmp-place-details>

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

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

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

지원되는 모든 콘텐츠 요소에 관한 자세한 내용은 PlaceContentConfigElement 참고 문서를 확인하세요.

간단히 말해 gmp-place-content-config 요소를 gmp-place-all-content 로 대체하여 장소 세부정보 요소에서 사용할 수 있는 모든 세부정보를 표시하거나 gmp-place-standard-content 로 대체하여 표준 구성을 표시할 수 있습니다.

디자인 구성

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

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

전체 코드 예 보기

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>

장소 세부정보 컴팩트 요소

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

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

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

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

콘텐츠 구성

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

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <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-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>

gmp-place-content-config 요소 자체에는 여러 하위 콘텐츠 요소가 포함되어 있으며 각 요소는 표시할 상응하는 장소 세부정보를 선택합니다. 선택한 세부정보는 항상 미리 정의된 고정된 순서로 렌더링되므로 하위 요소의 순서는 중요하지 않습니다. 이러한 요소 중 일부는 콘텐츠별 속성을 사용하여 추가로 구성할 수 있습니다.

지원되는 모든 콘텐츠 요소에 관한 자세한 내용은 PlaceContentConfigElement 참고 문서를 확인하세요.

간단히 말해 gmp-place-content-config 요소를 gmp-place-all-content 로 대체하여 장소 세부정보 컴팩트 요소에서 사용할 수 있는 모든 세부정보를 표시하거나 gmp-place-standard-content 로 대체하여 표준 구성을 표시할 수 있습니다.

디자인 구성

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

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

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

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

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

전체 코드 예 보기

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <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-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>