Tiện ích theo bối cảnh là một Sản phẩm Google Maps trước khi ra mắt công khai, là một vùng chứa trực quan được dùng để hỗ trợ hoặc bổ sung cho nội dung khác trên Google Maps. Tiện ích theo ngữ cảnh của Google Maps cho phép bạn tích hợp tính năng Nền tảng với Google Maps vào các ứng dụng của mình để tạo trải nghiệm trò chuyện dựa trên LLM đàm thoại. Tiện ích theo ngữ cảnh được kết xuất bằng mã thông báo ngữ cảnh googleMapsWidgetContextToken. Mã thông báo này được trả về trong phản hồi của Vertex AI API và có thể dùng để kết xuất nội dung trực quan.
Tiện ích theo bối cảnh có nhiều chức năng tuỳ thuộc vào trường hợp của bạn:
- Tính năng này hiển thị nội dung chủ quan do người dùng tạo (UGC) trong trường hợp Google Maps được dùng để tạo câu trả lời.
- Thao tác này giúp làm phong phú kết quả bằng hình ảnh trực quan và dữ liệu trên bản đồ khi Vertex AI chỉ tạo một câu trả lời dạng văn bản.
Cách hoạt động của tiện ích theo bối cảnh
Tiện ích theo bối cảnh hiển thị câu trả lời từ tính năng Grounding with Google Maps trong Vertex AI, dưới dạng googleMapsWidgetContextToken. Sử dụng mã thông báo này để hiển thị tiện ích theo bối cảnh và cho thấy câu trả lời.
Tìm hiểu thêm.
Luồng sự kiện như sau:
- Gọi Vertex AI API bằng một truy vấn dựa trên Google Maps.
- Vertex AI trả về một
googleMapsWidgetContextToken. - Kết xuất tiện ích theo bối cảnh bằng mã thông báo.
- Tiện ích theo bối cảnh hiển thị câu trả lời của Vertex AI.
Ví dụ sau đây cho thấy mã thông báo bối cảnh khi được trả về từ Vertex AI API.
"googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>... Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",
Kết xuất tiện ích theo bối cảnh của Google Maps
Để hiển thị và sử dụng tiện ích theo bối cảnh của Google Maps, hãy sử dụng phiên bản alpha của Maps JavaScript API trên trang hiển thị tiện ích. Để biết thêm thông tin, hãy xem phần Tải Maps JavaScript API.
Bạn cũng phải sử dụng khoá API đã được bật để tải API JavaScript của Google Maps.
Xác minh rằng thư viện places đã được tải.
Phần sau đây mô tả cách hiển thị tiện ích theo bối cảnh của Google Maps. Tạo một tiện ích theo ngữ cảnh bằng cách sử dụng HTML tuỳ chỉnh hoặc JavaScript.
Sử dụng các phần tử HTML tuỳ chỉnh
Phần sau đây mô tả cách hiển thị tiện ích theo bối cảnh của Google Maps bằng các phần tử HTML tuỳ chỉnh. Tạo một tiện ích theo bối cảnh bằng cách thêm phần tử gmp-place-contextual vào trang.
-
Thêm phần tử
gmp-place-contextualvào trang:<gmp-place-contextual id="widget"></gmp-place-contextual>
-
Trong mọi câu trả lời dựa trên Google Maps, sẽ có một
googleMapsWidgetContextTokentương ứng mà bạn có thể dùng để hiển thị tiện ích theo bối cảnh. Hàm sau đây cho biết cách cập nhật mã thông báo ngữ cảnh:let widget = document.querySelector('#widget'); // a div that contains the widget widget.contextToken = contextToken;
-
Không bắt buộc: Chỉ định bố cục danh sách. Các giá trị hợp lệ bao gồm:
- Bố cục thu gọn:
<gmp-place-contextual-list-config layout="compact"> - Bố cục dọc:
<gmp-place-contextual-list-config layout="vertical">
Ví dụ sau đây cho thấy cách thay đổi bố cục danh sách thành bố cục thu gọn:
<gmp-place-contextual id="widget"> <gmp-place-contextual-list-config layout="compact"> </gmp-place-contextual-list-config> </gmp-place-contextual>
- Bố cục thu gọn:
-
Không bắt buộc: Thay đổi chế độ bản đồ. Các giá trị hợp lệ bao gồm:
- Bản đồ đường đi 2D:
<gmp-place-contextual-map-config map-mode="roadmap"> - Bản đồ kết hợp 3D:
<gmp-place-contextual-map-config map-mode="hybrid"> - Không có bản đồ:
<gmp-place-contextual-map-config map-mode="none">
Ví dụ sau đây cho thấy cách thay đổi chế độ bản đồ thành bản đồ 2D:
- Bản đồ đường đi 2D:
<gmp-place-contextual id="widget"> <gmp-place-contextual-map-config map-mode="roadmap"> </gmp-place-contextual-map-config> </gmp-place-contextual>
Sử dụng JavaScript
Phần sau đây mô tả cách hiển thị tiện ích theo bối cảnh của Google Maps bằng cách tạo PlaceContextualElement theo cách lập trình và nối tiện ích đó vào DOM.
Tạo một tiện ích theo ngữ cảnh.
let widget = document.querySelector('#widget'); // a div that contains the widget async function createWidget(contextToken) { await google.maps.importLibrary('places'); const placeContextualElement = new google.maps.places.PlaceContextualElement({ contextToken }); // contextToken can be empty at initialization. widget.appendChild(placeContextualElement); }
- Trong mọi câu trả lời dựa trên Google Maps, đều có một
googleMapsWidgetContextTokentương ứng được dùng để hiển thị tiện ích theo ngữ cảnh. Hàm sau đây cho biết cách cập nhật mã thông báo ngữ cảnh:widget.contextToken = contextToken;
-
Không bắt buộc: Chỉ định bố cục danh sách. Các giá trị hợp lệ bao gồm:
- Bố cục thu gọn:
google.maps.places.PlaceContextualListLayout.COMPACT - Bố cục dọc:
google.maps.places.PlaceContextualListLayout.VERTICAL
- Bố cục thu gọn:
-
Không bắt buộc: Thay đổi chế độ bản đồ. Các giá trị hợp lệ bao gồm:
- Bản đồ đường đi 2D:
google.maps.places.PlaceContextualListMapMode.ROADMAP - Bản đồ kết hợp 3D:
google.maps.places.PlaceContextualListMapMode.HYBRID - Không có bản đồ:
google.maps.places.PlaceContextualListMapMode.NONE
- Bản đồ đường đi 2D:
Ví dụ sau đây cho thấy cách thay đổi bố cục danh sách thành bố cục thu gọn:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ layout: google.maps.places.PlaceContextualListLayout.COMPACT }); widget.appendChild(widgetConfig);
Ví dụ sau đây cho thấy cách thay đổi chế độ bản đồ thành bản đồ 2D:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP }); widget.appendChild(widgetConfig);