Các phần tử Place Details

Phần tử Place Details và Phần tử Place Details Compact là các phần tử HTML hiển thị thông tin chi tiết về một địa điểm:

Sử dụng Công cụ tuỳ chỉnh để hình dung cách các nhóm thuộc tính khác nhau sẽ ảnh hưởng đến giao diện của một thành phần Chi tiết địa điểm và truy cập vào mã bằng HTML/CSS, Kotlin/XML, và Swift.

Phần tử Place Details

Nhấp vào một điểm đánh dấu trên bản đồ để xem thông tin chi tiết về địa điểm đó trong một Thành phần Place Details.

PlaceDetailsElement hỗ trợ nhiều thành phần nội dung, bao gồm giờ mở cửa đầy đủ, trang web, số điện thoại, bản tóm tắt dựa trên AI có dự phòng cho bản tóm tắt biên tập, thông tin nổi bật theo loại, bài đánh giá, bản tóm tắt bài đánh giá dựa trên AI, mã cộng và danh sách tính năng.

Để hiển thị Place Details trên bản đồ, hãy thêm phần tử gmp-place-details vào phần tử gmp-map trên trang HTML. Thêm một phần tử con, gmp-place-details-place-request, để chọn địa điểm. Đây có thể là một đối tượng Địa điểm, một mã địa điểm hoặc tên tài nguyên của Địa điểm: 

<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>

Định cấu hình nội dung

Bạn có thể kiểm soát nội dung cụ thể về địa điểm mà phần tử gmp-place-details hiển thị bằng cách sử dụng phần tử gmp-place-content-config lồng nhau để chọn và định cấu hình chi tiết về địa điểm, như trong ví dụ sau: 

        <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>

Bản thân phần tử gmp-place-content-config chứa một số phần tử nội dung con và mỗi phần tử chọn một Place Details tương ứng để hiển thị: gmp-place-address chọn địa chỉ của địa điểm, gmp-place-price chọn mức giá của địa điểm, v.v. Các phần tử gmp-place-summary và gmp-place-review-summary cung cấp thông tin tóm tắt dựa trên AI về địa điểm và các bài đánh giá về địa điểm đó. Thứ tự của các phần tử con không quan trọng, vì thông tin chi tiết đã chọn luôn được hiển thị theo thứ tự cố định được xác định trước.

Bạn có thể định cấu hình thêm một số phần tử trong số này bằng cách sử dụng các thuộc tính dành riêng cho nội dung:

  • Phần tử gmp-place-media được dùng để hiển thị một ảnh và có thuộc tính lightbox-preferred để mở ảnh trong hộp đèn khi người dùng nhấp vào. Hộp đèn bị tắt theo mặc định.
  • Phần tử gmp-place-attribution được dùng để hiển thị nguồn của ảnh. Các thuộc tính light-scheme-color và dark-scheme-color được dùng để đặt màu cho văn bản ghi công ở chế độ sáng và chế độ tối.

Hãy xem tài liệu tham khảo PlaceContentConfigElement để biết thêm thông tin về tất cả các phần tử nội dung được hỗ trợ.

Để đơn giản, bạn có thể thay thế phần tử gmp-place-content-config bằng gmp-place-all-content để hiển thị tất cả thông tin chi tiết có trong phần tử Place Details hoặc bằng gmp-place-standard-content để hiển thị cấu hình chuẩn.

Định cấu hình giao diện

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details là 250px-400px. Chiều rộng dưới 250px có thể không hiển thị chính xác. Đặt chiều cao cho phù hợp với ứng dụng của bạn. Phần tử Place Details được thiết kế để cuộn trong không gian được phân bổ khi cần.

Phần tử gmp-place-details cũng hỗ trợ nhiều thuộc tính CSS tuỳ chỉnh để định cấu hình màu sắc và phông chữ của phần tử. Hãy xem bài viết Tuỳ chỉnh kiểu cho Bộ công cụ giao diện người dùng của Địa điểm để biết thêm thông tin chi tiết.

Xem ví dụ về đoạn mã hoàn chỉnh

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>

Phần tử thu gọn về thông tin chi tiết về địa điểm

Nhấp vào một điểm đánh dấu trên bản đồ để xem thông tin chi tiết về địa điểm đó trong một Thành phần thu gọn về chi tiết địa điểm.

PlaceDetailsCompactElement hiển thị thông tin chi tiết về một địa điểm đã chọn trong không gian tối thiểu. Điều này có thể hữu ích trong cửa sổ thông tin làm nổi bật một địa điểm trên bản đồ, trong trải nghiệm trên mạng xã hội như chia sẻ vị trí trong cuộc trò chuyện, dưới dạng đề xuất để chọn vị trí hiện tại của bạn hoặc trong một bài viết trên mạng xã hội để tham chiếu địa điểm trên Google Maps. PlaceDetailsCompactElement có thể hiển thị tên hiển thị, địa chỉ, điểm xếp hạng, loại, giá, biểu tượng hỗ trợ tiếp cận, trạng thái mở cửa và một ảnh. Thanh này có thể hiển thị theo chiều ngang hoặc chiều dọc, tuỳ theo lựa chọn của thuộc tính orientation.

Trong đoạn mã sau, gmp-place-details-compact được định cấu hình với orientation được đặt thành horizontal. Một thuộc tính bổ sung, truncation-preferred, sẽ cắt bớt một số nội dung nhất định để vừa với một dòng thay vì xuống dòng. Phần tử gmp-place-details-compact chứa một phần tử con, gmp-place-details-place-request, để chọn địa điểm. Đây có thể là một đối tượng Địa điểm, một mã địa điểm hoặc tên tài nguyên của Địa điểm. 

  <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>

Định cấu hình nội dung

Bạn có thể kiểm soát nội dung cụ thể về Place Details mà phần tử gmp-place-details-compact hiển thị bằng cách sử dụng phần tử gmp-place-content-config lồng nhau để chọn và định cấu hình Place Details, như trong đoạn mã sau: 

<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>

Bản thân phần tử gmp-place-content-config chứa một số phần tử nội dung con và mỗi phần tử chọn một chi tiết địa điểm tương ứng để hiển thị. Thứ tự của các phần tử con không quan trọng, vì thông tin chi tiết đã chọn luôn được hiển thị theo thứ tự cố định được xác định trước. Một số phần tử trong số này có thể được định cấu hình thêm bằng các thuộc tính dành riêng cho nội dung.

Hãy xem tài liệu tham khảo PlaceContentConfigElement để biết thêm thông tin về tất cả các phần tử nội dung được hỗ trợ.

Để đơn giản, bạn có thể thay thế phần tử gmp-place-content-config bằng gmp-place-all-content để hiển thị tất cả thông tin chi tiết có trong phần tử Place Details Compact hoặc bằng gmp-place-standard-content để hiển thị cấu hình chuẩn.

Định cấu hình giao diện

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details-compact theo hướng dọc là 180px-300px. Chiều rộng nhỏ hơn 160px có thể không hiển thị chính xác. Đừng đặt chiều cao cố định.

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details-compact theo hướng ngang là 180px-500px. Chiều rộng dưới 160px có thể không hiển thị chính xác. Ở chiều rộng dưới 350px, hình thu nhỏ sẽ không xuất hiện. Đừng đặt chiều cao cố định.

Phần tử gmp-place-details-compact cũng hỗ trợ nhiều thuộc tính CSS tuỳ chỉnh để định cấu hình màu sắc và phông chữ của phần tử. Hãy xem bài viết Tuỳ chỉnh kiểu cho Bộ công cụ giao diện người dùng của Places để biết thêm thông tin chi tiết.

Xin lưu ý rằng nếu bạn thêm phần tử Chi tiết địa điểm thu gọn vào cửa sổ thông tin, thì bạn phải áp dụng kiểu tuỳ chỉnh trực tiếp cho phần tử gmp-place-details-compact. Điều này là do cửa sổ thông tin là một phần của DOM bóng của bản đồ, vì vậy, các kiểu CSS bên ngoài sẽ không được áp dụng. 

<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>

Xem ví dụ về đoạn mã hoàn chỉnh

Ví dụ này minh hoạ cách thêm một PlaceDetailsCompactElement vào bản đồ theo phương thức lập trình bằng cách sử dụng InfoWindow và 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>