장소 세부정보 요소

플랫폼 선택: Android iOS JavaScript

장소 세부정보 요소와 장소 세부정보 소형 요소는 장소의 세부정보를 렌더링하는 HTML 요소입니다.

장소 세부정보 요소

지도에서 마커를 클릭하면 장소 세부정보 요소에 장소 세부정보가 표시됩니다.

PlaceDetailsElement은 전체 영업시간, 웹사이트, 전화번호, 편집 요약, 유형별 하이라이트, 리뷰, 더하기 코드, 기능 목록 등 다양한 콘텐츠 요소를 지원합니다.

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

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html
 
<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-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-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-reviews></gmp-place-reviews>
        <gmp-place-feature-list></gmp-place-feature-list>
        <gmp-place-media
          lightbox-preferred
          ></gmp-place-media>
          <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

gmp-place-content-config 요소 자체에는 여러 하위 콘텐츠 요소가 포함되어 있으며 각 요소는 표시할 해당 장소 세부정보를 선택합니다. PlaceAddressElement은 장소의 주소를 선택하고 PlacePriceElement은 장소의 가격대 등을 선택합니다. 선택된 세부정보는 항상 미리 정의된 고정 순서로 렌더링되므로 하위 요소의 순서는 관련이 없습니다.

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

  • 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픽셀입니다. 너비가 250px 미만이면 제대로 표시되지 않을 수 있습니다. 애플리케이션에 맞게 높이를 설정합니다. 장소 세부정보 요소는 필요에 따라 할당된 공간 내에서 스크롤되도록 설계되었습니다.

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

전체 코드 예 보기

자바스크립트

// 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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    await 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 && placeDetails.place.location) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (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';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%
}

h1 {
  font-size: 16px;
  text-align: center;
}

gmp-map {
  height: 500px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 500px;
  margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  min-width: 400px;
  overflow-y: none;
  overflow-x: none;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
        <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <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>
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

장소 세부정보 컴팩트 요소

지도에서 마커를 클릭하면 장소 세부정보 콤팩트 요소에 장소 세부정보가 표시됩니다.

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

다음 스니펫에서 gmp-place-details-compact은 orientation이 horizontal로 설정된 gmp-map 요소 내에 중첩됩니다. truncation-preferred라는 추가 속성은 래핑하는 대신 한 줄에 맞게 특정 콘텐츠를 자릅니다. gmp-place-details-compact 요소에는 장소를 선택하는 하위 요소 gmp-place-details-place-request가 포함됩니다. 장소 객체, 장소 ID 또는 'places/{place_id}' 형식의 장소 리소스 이름일 수 있습니다. 

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <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>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

콘텐츠 구성

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

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

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

모양 구성

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

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

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

전체 코드 예 보기

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

자바스크립트

// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();
index.js

CSS

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

h1 {
  font-size: 16px;
  text-align: center;
}

#map-container {
    box-sizing: border-box;
    width: 100%;
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);
  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <script>
        (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
        v: "weekly"
        });
    </script>  
  </body>
</html>
index.html