Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

進階地點詳細資料元素 (預先發布版)

「Advanced Place Details」元素和「Advanced Place Details Compact」元素是 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 自訂樣式」。

查看完整程式碼範例

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${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();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-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.setAttribute(
                'place',
                `places/${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();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"></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",
                v: "beta"
            });
        </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-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-advanced-place-details>
            </div>
        </div>
    </body>
</html>index.html

進階 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 顯示 Advanced Place Details Compact 元素中的所有詳細資料，或使用 gmp-place-standard-content 顯示標準設定。

設定外觀

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

在橫向模式中，gmp-advanced-place-details-compact 元素的建議寬度範圍為 180px 至 500px。寬度小於 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;
}

查看完整程式碼範例

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-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 && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            console.log('No place was selected.');
        }
    });
}
void init();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"></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",
                v: "beta"
            });
        </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-advanced-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-advanced-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="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <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-advanced-place-details-compact>
    </body>
</html>index.html

進階功能

自訂動作按鈕

將動作按鈕新增為 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);
});

進階地點詳細資料元素 (預先發布版) 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

進階地點詳細資料元素 (預先發布版)

設定內容

設定外觀

查看完整程式碼範例

TypeScript

JavaScript

CSS

HTML

進階 Place Details 緊湊元素 (預先發布版)

設定內容

設定外觀

查看完整程式碼範例

TypeScript

JavaScript

CSS

HTML

進階功能

自訂動作按鈕

視覺出處註明規定

省略地點名稱

篩選評論和媒體

進階地點詳細資料元素 (預先發布版)