Widget di grounding di Maps

Questo prodotto o questa funzionalità è sperimentale (pre-GA). I prodotti e le funzionalità pre-GA potrebbero avere supporto limitato e le modifiche ai prodotti e alle funzionalità pre-GA potrebbero non essere compatibili con altre versioni pre-GA. Le offerte pre-GA sono coperte dai Termini specifici di servizio di Google Maps Platform. Per saperne di più, consulta le descrizioni della fase di lancio.

Il widget contestuale è un'offerta pre-GA di Google Maps che funge da contenitore visivo utilizzato per supportare o integrare altri contenuti di Google Maps. Il widget contestuale di Google Maps ti consente di integrare Grounding con Google Maps nelle tue applicazioni per creare un'esperienza di chat basata su LLM conversazionali. Il widget contestuale viene visualizzato utilizzando il token di contesto, googleMapsWidgetContextToken, che viene restituito nella risposta dell'API Vertex AI e può essere utilizzato per visualizzare contenuti visivi.

Il widget contestuale svolge diverse funzioni a seconda dello scenario:

• Visualizza contenuti soggettivi generati dagli utenti nello scenario in cui viene utilizzato il prompt di Google Maps per la generazione di risposte.
• Consente di arricchire i risultati con visualizzazioni e dati della mappa quando Vertex AI genera solo una risposta di testo.

Come funziona il widget contestuale

Il widget contestuale mostra una risposta di Grounding con Google Maps in Vertex AI, sotto forma di googleMapsWidgetContextToken. Utilizza questo token per eseguire il rendering del widget contestuale e visualizzare la risposta. Scopri di più. Il flusso di eventi è il seguente:

1. Chiama l'API Vertex AI con una query basata su Google Maps.
2. Vertex AI restituisce un googleMapsWidgetContextToken.
3. Esegui il rendering del widget contestuale utilizzando il token.
4. Il widget contestuale mostra la risposta di Vertex AI.

L'esempio seguente mostra l'aspetto di un token di contesto quando viene restituito dall'API Vertex AI.

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

Esegui il rendering del widget contestuale di Google Maps

Per eseguire il rendering e utilizzare il widget contestuale di Google Maps, utilizza la versione alfa dell'API Maps JavaScript nella pagina che mostra il widget. Per saperne di più, consulta Caricare l'API Maps JavaScript. Devi anche utilizzare la chiave API abilitata per caricare l'API Google Maps JavaScript. Verifica che la libreria places sia stata caricata.

La sezione seguente descrive come eseguire il rendering del widget contestuale di Google Maps. Crea un widget contestuale utilizzando HTML personalizzato o JavaScript.

Utilizzare elementi HTML personalizzati

La sezione seguente descrive come eseguire il rendering del widget contestuale di Google Maps utilizzando elementi HTML personalizzati. Crea un widget contestuale aggiungendo l'elemento gmp-place-contextual alla pagina.

1. Aggiungi l'elemento gmp-place-contextual alla pagina:

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

2. In qualsiasi risposta basata su Google Maps, è presente un googleMapsWidgetContextToken corrispondente che può essere utilizzato per eseguire il rendering del widget contestuale. La seguente funzione mostra come aggiornare il token di contesto:

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

3. (Facoltativo) Specifica il layout dell'elenco. I valori validi includono:
   • Layout compatto: <gmp-place-contextual-list-config layout="compact">
   • Layout verticale: <gmp-place-contextual-list-config layout="vertical">

   Il seguente esempio mostra come modificare il layout dell'elenco in compatto:

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

4. (Facoltativo) Cambia la modalità mappa. I valori validi includono:
   • Mappa stradale 2D: <gmp-place-contextual-map-config map-mode="roadmap">
   • Mappa ibrida 3D: <gmp-place-contextual-map-config map-mode="hybrid">
   • Nessuna mappa: <gmp-place-contextual-map-config map-mode="none">
Il seguente esempio mostra come passare alla modalità mappa 2D:

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

Utilizzare JavaScript

La sezione seguente descrive come eseguire il rendering del widget contestuale di Google Maps creando programmaticamente un PlaceContextualElement e aggiungendolo al DOM.

1. Crea un widget contestuale.

   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. In qualsiasi risposta basata su Google Maps, è presente un googleMapsWidgetContextToken corrispondente utilizzato per il rendering del widget contestuale. La seguente funzione mostra come aggiornare il token di contesto:

   widget.contextToken = contextToken;

3. (Facoltativo) Specifica il layout dell'elenco. I valori validi includono:
   • Layout compatto: google.maps.places.PlaceContextualListLayout.COMPACT
   • Layout verticale: google.maps.places.PlaceContextualListLayout.VERTICAL

Il seguente esempio mostra come modificare il layout dell'elenco in compatto:

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

4. (Facoltativo) Cambia la modalità mappa. I valori validi includono:
   • Mappa stradale 2D: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • Mappa ibrida 3D: google.maps.places.PlaceContextualListMapMode.HYBRID
   • Nessuna mappa: google.maps.places.PlaceContextualListMapMode.NONE

Il seguente esempio mostra come passare alla modalità mappa 2D:

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

Territori vietati

Google Maps limita determinati contenuti e attività per mantenere una piattaforma sicura e affidabile. Per un elenco dei territori vietati, consulta Territori vietati di Google Maps Platform.