Виджет заземления карт

Контекстный виджет — это предложение Google Maps Pre-GA, представляющее собой визуальный контейнер, используемый для поддержки или дополнения другого контента Google Карт. Контекстный виджет Google Карт позволяет интегрировать Grounding с Google Картами в ваши приложения для создания диалогового чата на базе LLM. Контекстный виджет визуализируется с помощью токена контекста googleMapsWidgetContextToken , который возвращается в ответе API Vertex AI и может использоваться для визуализации визуального контента.

Контекстный виджет выполняет различные функции в зависимости от вашего сценария:

• Он отображает субъективный пользовательский контент (UGC) в сценарии, где для генерации ответов используются подсказки Google Maps.
• Это помогает обогатить результаты визуализацией карт и ��ан��ы��и, когда Vertex AI генерирует только текстовый ответ.

Как работает контекстный виджет

Контекстный виджет отображает ответ от Grounding with Google Maps в Vertex AI в виде googleMapsWidgetContextToken . Используйте этот токен для рендеринга контекстного виджета и отображения ответа. Подробнее . Поток событий выглядит следующим образом:

1. Вызовите API Vertex AI с запросом, основанным на Google Maps.
2. Vertex AI возвращает googleMapsWidgetContextToken .
3. Отобразить контекстный виджет с использованием токена.
4. Контекстный виджет отображает ответ Vertex AI.

В следующем примере показано, как выглядит токен контекста, возвращаемый API Vertex AI.

"googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>...
Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",

Отобразить контекстный виджет Google Maps

Для отображения и использования контекстного виджета Google Карт используйте альфа-версию Maps JavaScript API на странице, где отображается виджет. Подробнее см. в разделе Загрузка Maps JavaScript API . Также необходимо использовать ключ API, который был активирован для загрузки Google Maps JavaScript API. Убедитесь, что библиотека places загружена.

В следующем разделе описывается, как отобразить контекстный виджет Google Карт. Создайте контекстный виджет с помощью пользовательского HTML-кода или JavaScript.

Используйте пользовательские HTML-элементы

В следующем разделе описывается, как отобразить контекстный виджет Google Карт с помощью пользовательских HTML-элементов. Создайте контекстный виджет, добавив на страницу элемент gmp-place-contextual .

1. Добавьте элемент gmp-place-contextual на страницу:

   <gmp-place-contextual id="widget"></gmp-place-contextual>

2. В любом ответе, основанном на Google Картах, есть соответствующий googleMapsWidgetContextToken , который можно использовать для отображения контекстного виджета. Следующая функция показывает, как обновить контекстный токен:

   let widget = document.querySelector('#widget'); // a div that contains the widget
   widget.contextToken = contextToken;

3. Необязательно: укажите макет списка. Допустимые значения:
   • Компактный макет: <gmp-place-contextual-list-config layout="compact">
   • Вертикальная компоновка: <gmp-place-contextual-list-config layout="vertical">

   В следующем примере показано, как изменить макет списка на компактный:

   <gmp-place-contextual id="widget">
     <gmp-place-contextual-list-config layout="compact">
     </gmp-place-contextual-list-config>
   </gmp-place-contextual>

4. Необязательно: измените режим карты. Допустимые значения:
   • 2D-карта дорожной карты: <gmp-place-contextual-map-config map-mode="roadmap">
   • Гибридная 3D-карта: <gmp-place-contextual-map-config map-mode="hybrid">
   • Нет карты: <gmp-place-contextual-map-config map-mode="none">
В следующем примере показано, как изменить режим карты на 2D-карту:

<gmp-place-contextual id="widget">
  <gmp-place-contextual-map-config map-mode="roadmap">
  </gmp-place-contextual-map-config>
</gmp-place-contextual>

Использовать JavaScript

В следующем разделе описывается, как визуализировать контекстный виджет Google Maps путем программного создания PlaceContextualElement и добавления его в DOM.

1. Создайте контекстный виджет.

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

2. В любом ответе, основанном на Google Картах, есть соответствующий googleMapsWidgetContextToken , который используется для отображения контекстного виджета. Следующая функция показывает, как обновить контекстный токен:

   widget.contextToken = contextToken;

3. Необязательно: укажите макет списка. Допустимые значения:
   • Компактный макет: google.maps.places.PlaceContextualListLayout.COMPACT
   • Вертикальная компоновка: google.maps.places.PlaceContextualListLayout.VERTICAL

В следующем примере показано, как изменить макет списка на компактный:

const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  layout: google.maps.places.PlaceContextualListLayout.COMPACT
});
widget.appendChild(widgetConfig);

4. Необязательно: измените режим карты. Допустимые значения:
   • 2D-карта дорожной карты: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • 3D гибридная карта: google.maps.places.PlaceContextualListMapMode.HYBRID
   • Нет карты: google.maps.places.PlaceContextualListMapMode.NONE

В следующем примере показано, как изменить режим карты на 2D-карту:

const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP
});
widget.appendChild(widgetConfig);

Запретные территории