「進階地點詳細資料」元素和「進階地點詳細資料」密集元素是 HTML 元素，可顯示地點的詳細資料：
-
AdvancedPlaceDetailsElement支援所有可視化的地點資料，且可能包含多張相片。 -
AdvancedPlaceDetailsCompactElement的設計宗旨是盡量節省空間，並顯示地點的簡要資訊，包括名稱、地址、評分等。此外，也可能包含單張相片。
「進階地點詳細資料」元素和「進階地點詳細資料精簡」元素都提供相同的進階功能，包括自訂動作按鈕、省略地點名稱，以及篩選評論和媒體。
使用自訂工具，以視覺化方式呈現不同屬性組合對地點詳細資料元素外觀的影響，並存取 HTML/CSS、Kotlin/XML 和 Swift 中的程式碼。
進階地點詳細資料元素 (預先發布版)
按一下地圖上的標記，即可在「進階地點詳細資料元素」中查看地點詳細資料。
AdvancedPlaceDetailsElement
支援各種內容元素，包括完整營業時間、網站、電話號碼、AI 摘要 (如果無法生成 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元素用於顯示整體 Maps 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 屬性，可設定元素的顏色和字型。詳情請參閱「Places UI Kit 自訂樣式」。
進階 Place Details 緊湊元素 (預先發布版)
按一下地圖上的標記，即可在「進階地點詳細資料」精簡元素中查看地點詳細資料。
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 元素的寬度範圍為 180 像素到 500 像素。寬度小於 160 像素時，可能無法正確顯示。如果寬度小於 350 像素，系統就不會顯示縮圖。
請勿設定固定高度。
gmp-advanced-place-details-compact 元素也支援多種自訂 CSS 屬性，可設定元素的顏色和字型。詳情請參閱「Places UI Kit 自訂樣式」。
請注意，如果將「進階地點詳細資料密集」元素新增至資訊視窗，自訂樣式必須直接套用至 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; }
本範例示範如何使用 InfoWindow 和 AdvancedMarkerElement，以程式輔助方式在地圖中加入 AdvancedPlaceDetailsCompactElement。
進階功能
自訂動作按鈕
將動作按鈕新增為 Advanced Place Details 元件的直接子項。使用 <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); });