Widget d'ancrage Maps

Ce produit ou cette fonctionnalité est en phase expérimentale (pré-DG). La prise en charge des fonctionnalités et produits pré-DG peut être limitée, et il se peut que les modifications apportées à ces fonctionnalités ou produits ne soient pas compatibles avec d'autres versions pré-DG. Les offres en pré-DG sont couvertes par les Conditions spécifiques du service Google Maps Platform. Pour en savoir plus, consultez les descriptions des étapes de lancement.

Le widget contextuel est une offre Google Maps en prédisponibilité générale. Il s'agit d'un conteneur visuel utilisé pour prendre en charge ou compléter d'autres contenus Google Maps. Le widget contextuel Google Maps vous permet d'intégrer l'ancrage avec Google Maps à vos applications pour créer une expérience de chat conversationnelle optimisée par LLM. Le widget contextuel est affiché à l'aide du jeton de contexte googleMapsWidgetContextToken, qui est renvoyé dans la réponse de l'API Vertex AI et peut être utilisé pour afficher du contenu visuel.

Le widget contextuel remplit différentes fonctions selon votre scénario :

• Il affiche du contenu subjectif généré par les utilisateurs (CGU) dans le scénario où l'invite Google Maps est utilisée pour générer des réponses.
• Il permet d'enrichir les résultats avec des visualisations de cartes et des données lorsque Vertex AI ne génère qu'une réponse textuelle.

Fonctionnement du widget contextuel

Le widget contextuel affiche une réponse de l'ancrage avec Google Maps dans Vertex AI, sous la forme d'un googleMapsWidgetContextToken. Utilisez ce jeton pour afficher le widget contextuel et la réponse. En savoir plus Le flux d'événements est le suivant :

1. Appelez l'API Vertex AI avec une requête ancrée avec Google Maps.
2. Vertex AI renvoie un googleMapsWidgetContextToken.
3. Affichez le widget contextuel à l'aide du jeton.
4. Le widget contextuel affiche la réponse de Vertex AI.

L'exemple suivant montre à quoi ressemble un jeton de contexte lorsqu'il est renvoyé par l'API Vertex AI.

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

Afficher le widget contextuel Google Maps

Pour afficher et utiliser le widget contextuel Google Maps, utilisez la version alpha de l'API Maps JavaScript sur la page qui affiche le widget. Pour en savoir plus, consultez Charger l'API Maps JavaScript. Vous devez également utiliser la clé API qui a été activée pour charger l'API Google Maps JavaScript. Vérifiez que la bibliothèque places a été chargée.

La section suivante explique comment afficher le widget contextuel Google Maps. Créez un widget contextuel à l'aide d'un code HTML personnalisé ou avec JavaScript.

Utiliser des éléments HTML personnalisés

La section suivante explique comment afficher le widget contextuel Google Maps à l'aide d'éléments HTML personnalisés. Créez un widget contextuel en ajoutant l'élément gmp-place-contextual à la page.

1. Ajoutez l'élément gmp-place-contextual à la page :

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

2. Dans toute réponse ancrée dans Google Maps, il existe un googleMapsWidgetContextToken correspondant qui peut être utilisé pour afficher le widget contextuel. La fonction suivante montre comment mettre à jour le jeton de contexte :

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

3. Facultatif : Spécifiez la mise en page de la liste. Les valeurs valides sont les suivantes :
   • Disposition compacte : <gmp-place-contextual-list-config layout="compact">
   • Mise en page verticale : <gmp-place-contextual-list-config layout="vertical">

   L'exemple suivant montre comment modifier la mise en page de la liste pour la rendre compacte :

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

4. Facultatif : Modifiez le mode de la carte. Les valeurs valides sont les suivantes :
   • Carte de la feuille de route en 2D : <gmp-place-contextual-map-config map-mode="roadmap">
   • Carte hybride 3D : <gmp-place-contextual-map-config map-mode="hybrid">
   • Aucune carte : <gmp-place-contextual-map-config map-mode="none">
L'exemple suivant montre comment passer au mode carte 2D :

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

Utiliser JavaScript

La section suivante explique comment afficher le widget contextuel Google Maps en créant un PlaceContextualElement de manière programmatique et en l'ajoutant au DOM.

1. Créez un widget contextuel.

   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. Dans toute réponse ancrée dans Google Maps, il existe un googleMapsWidgetContextToken correspondant qui est utilisé pour afficher le widget contextuel. La fonction suivante montre comment mettre à jour le jeton de contexte :

   widget.contextToken = contextToken;

3. Facultatif : Spécifiez la mise en page de la liste. Les valeurs valides sont les suivantes :
   • Disposition compacte : google.maps.places.PlaceContextualListLayout.COMPACT
   • Mise en page verticale : google.maps.places.PlaceContextualListLayout.VERTICAL

L'exemple suivant montre comment modifier la mise en page de la liste pour la rendre compacte :

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

4. Facultatif : Modifiez le mode de la carte. Les valeurs valides sont les suivantes :
   • Carte de la feuille de route en 2D : google.maps.places.PlaceContextualListMapMode.ROADMAP
   • Carte hybride 3D : google.maps.places.PlaceContextualListMapMode.HYBRID
   • Aucune carte : google.maps.places.PlaceContextualListMapMode.NONE

L'exemple suivant montre comment passer au mode carte 2D :

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

Territoires interdits

Google Maps limite certains contenus et activités pour maintenir une plate-forme sûre et fiable. Pour obtenir la liste des territoires interdits, consultez Territoires interdits sur Google Maps Platform.