Widget de fundamentación de Maps

Este producto o función está en versión experimental (fase previa a la DG). Los productos y las funciones que se encuentran en la fase previa a la DG pueden tener asistencia limitada, y los cambios en estos productos y funciones podrían no ser compatibles con otras versiones de la fase previa a la DG. Las ofertas que se encuentran en la fase previa a la DG se rigen por las Condiciones Específicas del Servicio de Google Maps Platform. Para obtener más información, consulta las descripciones de la etapa de lanzamiento.

El widget contextual es una Oferta previa a la DG de Google Maps que es un contenedor visual que se usa para respaldar o complementar otro contenido de Google Maps. El widget contextual de Google Maps te permite integrar la fundamentación con Google Maps en tus aplicaciones para crear una experiencia de chat conversacional potenciada por LLM. El widget contextual se renderiza con el token de contexto, googleMapsWidgetContextToken, que se devuelve en la respuesta de la API de Vertex AI y se puede usar para renderizar contenido visual.

El widget contextual cumple diferentes funciones según la situación:

• Muestra contenido generado por usuarios (CGU) subjetivo en la situación en la que se usan indicaciones de Google Maps para generar respuestas.
• Ayuda a enriquecer los resultados con visualizaciones y datos de mapas cuando Vertex AI genera solo una respuesta de texto.

Cómo funciona el widget contextual

El widget contextual muestra una respuesta de la fundamentación con Google Maps en Vertex AI en forma de un googleMapsWidgetContextToken. Usa este token para renderizar el widget contextual y mostrar la respuesta. Obtén más información. El flujo de eventos es el siguiente:

1. Llama a la API de Vertex AI con una búsqueda fundamentada con Google Maps.
2. Vertex AI devuelve un googleMapsWidgetContextToken.
3. Renderiza el widget contextual con el token.
4. El widget contextual muestra la respuesta de Vertex AI.

En el siguiente ejemplo, se muestra cómo se ve un token de contexto cuando se devuelve desde la API de Vertex AI.

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

Renderiza el widget contextual de Google Maps

Para renderizar y usar el widget contextual de Google Maps, usa la versión alfa de la API de Maps JavaScript en la página que muestra el widget. Para obtener más información, consulta Carga la API de Maps JavaScript. También debes usar la clave de API que se habilitó para cargar la API de Google Maps JavaScript. Verifica que se haya cargado la biblioteca places.

En la siguiente sección, se describe cómo renderizar el widget contextual de Google Maps. Crea un widget contextual con HTML personalizado o JavaScript.

Usa elementos HTML personalizados

En la siguiente sección, se describe cómo renderizar el widget contextual de Google Maps con elementos HTML personalizados. Crea un widget contextual agregando el elemento gmp-place-contextual a la página.

1. Agrega el elemento gmp-place-contextual a la página:

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

2. En cualquier respuesta basada en Google Maps, hay un googleMapsWidgetContextToken correspondiente que se puede usar para renderizar el widget contextual. La siguiente función muestra cómo actualizar el token de contexto:

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

3. Opcional: Especifica el diseño de la lista. Los valores válidos incluyen lo siguiente:
   • Diseño compacto: <gmp-place-contextual-list-config layout="compact">
   • Diseño vertical: <gmp-place-contextual-list-config layout="vertical">

   En el siguiente ejemplo, se muestra cómo cambiar el diseño de la lista a compacto:

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

4. Opcional: Cambia el modo del mapa. Los valores válidos incluyen lo siguiente:
   • Mapa de ruta en 2D: <gmp-place-contextual-map-config map-mode="roadmap">
   • Mapa híbrido en 3D: <gmp-place-contextual-map-config map-mode="hybrid">
   • Sin mapa: <gmp-place-contextual-map-config map-mode="none">
En el siguiente ejemplo, se muestra cómo cambiar el modo del mapa a un mapa en 2D:

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

Usa JavaScript

En la siguiente sección, se describe cómo renderizar el widget contextual de Google Maps creando un PlaceContextualElement de forma programática y agregándolo al DOM.

1. Crea un widget contextual.

   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. En cualquier respuesta basada en Google Maps, hay un googleMapsWidgetContextToken correspondiente que se usa para renderizar el widget contextual. La siguiente función muestra cómo actualizar el token de contexto:

   widget.contextToken = contextToken;

3. Opcional: Especifica el diseño de la lista. Los valores válidos incluyen lo siguiente:
   • Diseño compacto: google.maps.places.PlaceContextualListLayout.COMPACT
   • Diseño vertical: google.maps.places.PlaceContextualListLayout.VERTICAL

En el siguiente ejemplo, se muestra cómo cambiar el diseño de la lista a compacto:

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

4. Opcional: Cambia el modo del mapa. Los valores válidos incluyen lo siguiente:
   • Mapa de ruta en 2D: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • Mapa híbrido en 3D: google.maps.places.PlaceContextualListMapMode.HYBRID
   • Sin mapa: google.maps.places.PlaceContextualListMapMode.NONE

En el siguiente ejemplo, se muestra cómo cambiar el modo del mapa a un mapa en 2D:

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

Territorios prohibidos

Google Maps restringe cierto contenido y actividades para mantener una plataforma segura y confiable. Para obtener una lista de los territorios prohibidos, consulta Territorios Prohibidos de Google Maps Platform.