Các phần tử nâng cao trong phần Thông tin chi tiết về địa điểm (xem trước)

Phần tử Thông tin chi tiết nâng cao về địa điểm và Phần tử Thông tin chi tiết nâng cao về địa điểm thu gọn là các phần tử HTML hiển thị thông tin chi tiết về một địa điểm:

Cả phần tử Thông tin chi tiết nâng cao về địa điểm và phần tử Thông tin chi tiết nâng cao về địa điểm ở dạng thu gọn đều cung cấp cùng một tính năng nâng cao, bao gồm cả việc tuỳ chỉnh các nút hành động, bỏ qua tên địa điểm và lọc các bài đánh giá cũng như nội dung nghe nhìn.

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 phần tử Chi tiết về địa điểm và truy cập vào mã trong HTML/CSS, Kotlin/XML và Swift.

Phần tử Chi tiết nâng cao về địa điểm (bản xem trước)

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 Phần tử thông tin chi tiết nâng cao về địa điểm.

AdvancedPlaceDetailsElement hỗ trợ nhiều thành phần nội dung, bao gồm cả giờ mở cửa đầy đủ, trang web, số điện thoại, nội dung tóm tắt dựa trên AI (nếu không có thì dùng nội dung tóm tắt biên tập), điểm nổi bật theo loại, bài đánh giá, nội dung 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ị thông tin chi tiết về địa điểm trên bản đồ, hãy thêm phần tử gmp-advanced-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-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>

Đị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-advanced-place-details hiển thị bằng cách lồng các phần tử con để chọn và định cấu hình thông tin chi tiết về địa điểm, như minh hoạ trong ví dụ này: 

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

Mỗi phần tử nội dung con sẽ chọn một chi tiết tương ứng về địa điểm để 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 nội dung tóm tắt dựa trên AI về địa điểm và các bài đánh giá tương ứng. Thứ tự của các phần tử con không liên quan, vì các chi tiết đã chọn luôn được kết xuất theo một 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 bức ảnh duy nhất và có thuộc tính lightbox-preferred mở bức ảnh trong hộp sáng khi được nhấp vào. Theo mặc định, hộp đèn bị tắt.
  • Phần tử gmp-place-attribution được dùng để hiển thị các cấu hình chung về thông tin ghi nhận quyền sở hữu dữ liệu Maps API, chẳng hạn như nguồn của ảnh hoặc bài đánh giá. 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à tối.

Hãy xem tài liệu tham khảo về Tuỳ chỉnh nội dung của tiện ích Địa điểm để 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ũng có thể sử dụng gmp-place-all-content để hiện tất cả thông tin chi tiết có trong phần tử Place Details nâng cao hoặc sử dụng gmp-place-standard-content để hiển thị cấu hình tiêu chuẩn.

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

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

Phần tử gmp-advanced-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 phần Tuỳ chỉnh kiểu cho Places UI Kit để biết thêm thông tin chi tiết.

Phần tử thu gọn nâng cao về Place Details (xem trước)

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 Phần tử nhỏ gọn nâng cao về thông tin chi tiết về địa điểm.

AdvancedPlaceDetailsCompactElement hiển thị thông tin chi tiết về một địa điểm đã chọn bằng cách sử dụng 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 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 truyền thông để tham chiếu địa điểm trên Google Maps. AdvancedPlaceDetailsCompactElement có thể hiển thị tên, đị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 bức ảnh. Bạn 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-advanced-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-advanced-place-details-compact chứa một phần tử con là 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-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>

Đị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-advanced-place-details-compact hiển thị bằng cách lồng các phần tử con để chọn và định cấu hình thông tin chi tiết về địa điểm, như minh hoạ trong đoạn mã này: 

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

Mỗi phần tử nội dung con sẽ chọn một thông tin chi tiết tương ứng về địa điểm để hiển thị. Thứ tự của các phần tử con không liên quan, vì các chi tiết đã chọn luôn được kết xuất theo một 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.

Hãy xem tài liệu tham khảo về Tuỳ chỉnh nội dung của tiện ích Địa điểm để 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ũng có thể dùng gmp-place-all-content để hiện tất cả thông tin chi tiết có trong phần tử Place Details ở chế độ thu gọn nâng cao hoặc dù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-advanced-place-details-compact theo hướng dọc là 180 px – 300 px. Chiều rộng nhỏ hơn 160 px có thể không hiển thị chính xác. Không đặt chiều cao cố định.

Phạm vi chiều rộng đề xuất cho phần tử gmp-advanced-place-details-compact theo hướng ngang là 180px – 500px. Chiều rộng nhỏ hơn 160 px 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. Không đặt chiều cao cố định.

Phần tử gmp-advanced-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 phần Tuỳ chỉnh kiểu cho Places UI Kit để biết thêm thông tin chi tiết.

Xin lưu ý rằng nếu bạn thêm phần tử Advanced Place Details Compact vào một 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-advanced-place-details-compact. Điều này là do cửa sổ thông tin nằm trong DOM bóng của bản đồ, nên các kiểu CSS bên ngoài sẽ không được áp dụng. 

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

Ví dụ này minh hoạ cách thêm AdvancedPlaceDetailsCompactElement vào bản đồ theo phương thức lập trình bằng cách sử dụng InfoWindow và AdvancedMarkerElement.

Các tính năng nâng cao

Tuỳ chỉnh nút thao tác

Thêm các nút hành động làm thành phần con trực tiếp của thành phần Chi tiết nâng cao về địa điểm. Sử dụng <gmp-place-link> cho các kết nối điều hướng tiêu chuẩn và chỉ định rõ thuộc tính action. Bạn có thể tuỳ ý chỉ định thuộc tính slot. Các thao tác hợp lệ được xác định trước là open-website, open-directions, open-map và call. Nếu bạn bỏ qua thuộc tính slot, thì giá trị mặc định sẽ là 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>

Yêu cầu về thông tin ghi công bằng hình ảnh

Quan trọng: Bạn phải cho người dùng cuối biết rõ khi nào nút thao tác tuỳ chỉnh sẽ chia sẻ thông tin người dùng với một bên thứ ba không phải là Google. Xem các yêu cầu về việc ghi nhận nguồn bằng hình ảnh.

Bỏ qua Tên địa điểm

Để bỏ qua tên địa điểm, hãy loại trừ rõ ràng phần tử <gmp-place-name> khỏi nội dung tuỳ chỉnh của bạn. 

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

Lọc bài đánh giá và nội dung nghe nhìn

Đoạn mã mẫu này chỉ cho thấy nội dung nghe nhìn và bài đánh giá có đề cập đến "cà phê".

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

Bạn cũng có thể sử dụng JavaScript để truy xuất tổng số mục khớp với cụm từ tìm kiếm đã cho bằng cách đọc các thuộc tính searchMediaCount và searchReviewsCount. Bạn phải đợi sự kiện gmp-load trước khi truy cập vào các thuộc tính này. 

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);
});