分享您對 UI Kit 體驗的意見。

PlaceDetails 元素

選取平台： Android iOS JavaScript

Place Details 元素和 Place Details Compact 元素是 HTML 元素，可顯示地點的詳細資料：

PlaceDetailsElement 支援所有可視化的地點資料，且可能包含多張相片。
PlaceDetailsCompactElement 旨在盡量節省空間，並顯示地點的簡要資訊，包括名稱、地址、評分等。也可能包含單張相片。

Place Details 元素

按一下地圖上的標記，即可在「地點詳細資料」元素中查看地點詳細資料。

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 像素，可能無法正確顯示。請根據應用程式需求設定高度。Place Details 元素的設計可視需要，在分配的空間內捲動。

gmp-place-details 元素也支援多種自訂 CSS 屬性，可設定元素的顏色和字型。詳情請參閱「Places UI Kit 自訂樣式」。

查看完整程式碼範例

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 initMap() {
    // 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 && 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 =
                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';
        }
    });
}
initMap();index.js

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;
}style.css

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" defer></script>
        <!-- prettier-ignore -->
        <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>
    </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>index.html

試用範例

JSFiddle.net

Place Details Compact 元素

按一下地圖上的標記，即可在「地點詳細資料」精簡元素中查看地點詳細資料。

PlaceDetailsCompactElement 會使用最少的空間，顯示所選地點的詳細資料。這項功能可能適用於資訊視窗，醒目顯示地圖上的地點；也可能適用於社群媒體體驗，例如在即時通訊中分享位置資訊；或是做為選取目前位置的建議，或在媒體文章中參照 Google 地圖上的地點。PlaceDetailsCompactElement 可以顯示名稱、地址、評分、類型、價格、無障礙圖示、營業狀態和單一相片。可以水平或垂直顯示，視 orientation 屬性選取而定。

在下列程式碼片段中，gmp-place-details-compact 會設定為 orientation，而 orientation 會設定為 horizontal。另一個屬性 truncation-preferred 會截斷特定內容，以便在單行顯示所有內容，而不是換行。gmp-place-details-compact 元素包含子元素 gmp-place-details-place-request，用於選取地點。這可以是 Place 物件、地點 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>index.html

gmp-place-content-config 元素本身包含多個子項內容元素，每個元素都會選取對應的地點詳細資料來顯示。子項元素的順序無關緊要，因為所選詳細資料一律會以預先定義的固定順序轉譯。部分元素可使用內容專屬屬性進一步設定。

如要進一步瞭解所有支援的內容元素，請參閱PlaceContentConfigElement參考文件。

為簡化起見， gmp-place-content-config 元素可以替換為 gmp-place-all-content ，顯示「地點詳細資料精簡」元素中的所有詳細資料，也可以替換為 gmp-place-standard-content ，顯示標準設定。

設定外觀

直向模式下，gmp-place-details-compact 元素的建議寬度範圍為 180px 到 300px。寬度小於 160 像素時，可能無法正確顯示。請勿設定固定高度。

水平方向的 gmp-place-details-compact 元素建議寬度範圍為 180 像素到 500 像素。寬度小於 160 像素時，可能無法正確顯示。如果寬度小於 350 像素，系統就不會顯示縮圖。請勿設定固定高度。

gmp-place-details-compact 元素也支援多種自訂 CSS 屬性，可設定元素的顏色和字型。詳情請參閱「Places UI Kit 自訂樣式」。

請注意，如果將 Place Details Compact 元素新增至資訊視窗，必須直接對 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>index.html

查看完整程式碼範例

這個範例示範如何使用 InfoWindow 和 AdvancedMarkerElement，以程式輔助方式在地圖中加入 PlaceDetailsCompactElement。

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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();index.js

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;
}style.css

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" defer></script>
        <!-- prettier-ignore -->
        <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>
    </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>index.html

試用範例

JSFiddle.net

PlaceDetails 元素 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

Place Details 元素

設定內容

設定外觀

查看完整程式碼範例

JavaScript

CSS

HTML

試用範例

Place Details Compact 元素

設定內容

設定外觀

查看完整程式碼範例

JavaScript

CSS

HTML

試用範例

PlaceDetails 元素