Widżet zakotwiczenia w Mapach

Widżet kontekstowy to oferta przedpremierowa Map Google, która jest kontenerem wizualnym używanym do obsługi lub uzupełniania innych treści z Map Google. Widżet kontekstowy Map Google umożliwia zintegrowanie Grounding z Mapami Google w aplikacjach, aby tworzyć oparte na LLM czaty konwersacyjne. Widżet kontekstowy jest renderowany za pomocą tokena kontekstu googleMapsWidgetContextToken, który jest zwracany w odpowiedzi interfejsu Vertex AI API i może służyć do renderowania treści wizualnych.

W zależności od sytuacji widżet kontekstowy pełni różne funkcje:

  • Wyświetla subiektywne treści generowane przez użytkowników w scenariuszu, w którym do generowania odpowiedzi używane są prompty Map Google.
  • Pomaga wzbogacać wyniki o wizualizacje i dane z map, gdy Vertex AI generuje tylko odpowiedź tekstową.

Jak działa widżet kontekstowy

Widżet kontekstowy wyświetla odpowiedź z groundingu z użyciem Map Google w Vertex AI w postaci googleMapsWidgetContextToken. Użyj tego tokena, aby wyrenderować widżet kontekstowy i wyświetlić odpowiedź. Więcej informacji Przebieg zdarzenia jest następujący:

  1. Wywołaj interfejs Vertex AI API za pomocą zapytania opartego na Mapach Google.
  2. Vertex AI zwraca googleMapsWidgetContextToken.
  3. Wyświetl gadżet kontekstowy za pomocą tokena.
  4. Widżet kontekstowy wyświetla odpowiedź z Vertex AI.

Poniższy przykład pokazuje, jak wygląda token kontekstu zwracany przez interfejs Vertex AI API.

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

Renderowanie widżetu kontekstowego Map Google

Aby renderować i używać widżetu kontekstowego Map Google, użyj wersji alfa interfejsu Maps JavaScript API na stronie, na której wyświetlany jest widżet. Więcej informacji znajdziesz w artykule Wczytywanie interfejsu Maps JavaScript API. Musisz też użyć klucza interfejsu API, który został włączony do wczytywania interfejsu Maps JavaScript API. Sprawdź, czy biblioteka places została wczytana.

W sekcji poniżej znajdziesz opis renderowania widżetu kontekstowego Map Google. Utwórz widżet kontekstowy za pomocą niestandardowego kodu HTML lub JavaScript.

Używanie niestandardowych elementów HTML

W sekcji poniżej opisujemy, jak renderować widżet kontekstowy Map Google za pomocą niestandardowych elementów HTML. Utwórz widżet kontekstowy, dodając element gmp-place-contextual do strony.

  1. Dodaj element gmp-place-contextual do strony:

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

  2. W każdej odpowiedzi opartej na Mapach Google znajduje się odpowiedni element googleMapsWidgetContextToken, który można wykorzystać do renderowania widżetu kontekstowego. Ta funkcja pokazuje, jak zaktualizować token kontekstu: 

    let widget = document.querySelector('#widget'); // a div that contains the widget
widget.contextToken = contextToken;
  3. Opcjonalnie: określ układ listy. Prawidłowe wartości to:
    • Kompaktowy układ: <gmp-place-contextual-list-config layout="compact">
    • Układ pionowy: <gmp-place-contextual-list-config layout="vertical">

    Poniższy przykład pokazuje, jak zmienić układ listy na kompaktowy:

    <gmp-place-contextual id="widget">
  <gmp-place-contextual-list-config layout="compact">
  </gmp-place-contextual-list-config>
</gmp-place-contextual>
  4. Opcjonalnie: zmień tryb mapy. Prawidłowe wartości to:
    • Mapa planu rozwoju w 2D: <gmp-place-contextual-map-config map-mode="roadmap">
    • Mapa hybrydowa 3D: <gmp-place-contextual-map-config map-mode="hybrid">
    • Brak mapy: <gmp-place-contextual-map-config map-mode="none">
    5. Ten przykład pokazuje, jak zmienić tryb mapy na mapę 2D: 
    <gmp-place-contextual id="widget">
  <gmp-place-contextual-map-config map-mode="roadmap">
  </gmp-place-contextual-map-config>
</gmp-place-contextual>

Używanie JavaScriptu

W sekcji poniżej znajdziesz opis renderowania widżetu kontekstowego Map Google przez programowe utworzenie elementu PlaceContextualElement i dołączenie go do DOM.

  1. Utwórz widżet kontekstowy.

    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. W każdej odpowiedzi opartej na Google Maps znajduje się odpowiedni symbol googleMapsWidgetContextToken, który służy do renderowania widżetu kontekstowego. Poniższa funkcja pokazuje, jak zaktualizować token kontekstu: 
    widget.contextToken = contextToken;
  3. Opcjonalnie: określ układ listy. Prawidłowe wartości to:
    • Kompaktowy układ: google.maps.places.PlaceContextualListLayout.COMPACT
    • Układ pionowy: google.maps.places.PlaceContextualListLayout.VERTICAL

    4. Poniższy przykład pokazuje, jak zmienić układ listy na kompaktowy:

    const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  layout: google.maps.places.PlaceContextualListLayout.COMPACT
});
widget.appendChild(widgetConfig);
  4. Opcjonalnie: zmień tryb mapy. Prawidłowe wartości to:
    • Mapa planu rozwoju w 2D: google.maps.places.PlaceContextualListMapMode.ROADMAP
    • Mapa hybrydowa 3D: google.maps.places.PlaceContextualListMapMode.HYBRID
    • Brak mapy: google.maps.places.PlaceContextualListMapMode.NONE

    5. Ten przykład pokazuje, jak zmienić tryb mapy na mapę 2D:

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

Niedozwolone regiony

Aby zapewnić bezpieczeństwo i rzetelność platformy, Mapy Google ograniczają niektóre treści i działania. Listę terytoriów objętych zakazem znajdziesz na stronie Terytoria objęte zakazem Google Maps Platform.