Maps-Widget für die Fundierung

Dieses Produkt oder diese Funktion ist experimentell (pre-GA). Pre-GA-Produkte und ‑Funktionen werden eventuell nur eingeschränkt unterstützt. Außerdem sind Änderungen an diesen Produkten und Funktionen möglicherweise nicht mit anderen pre-GA-Versionen kompatibel. Pre-GA-Angebote sind durch die dienstspezifischen Nutzungsbedingungen für die Google Maps Platform abgedeckt. Weitere Informationen finden Sie in den Beschreibungen der Einführungsphasen.

Das kontextbezogene Widget ist ein Pre-GA-Angebot von Google Maps, das als visueller Container zur Unterstützung oder Ergänzung anderer Google Maps-Inhalte verwendet wird. Mit dem kontextbezogenen Google Maps-Widget können Sie Grounding mit Google Maps in Ihre Anwendungen einbinden, um eine dialogbasierte Chatfunktion auf LLM-Basis zu erstellen. Das kontextbezogene Widget wird mit dem Kontext-Token googleMapsWidgetContextToken gerendert, das in der Antwort der Vertex AI API zurückgegeben wird und zum Rendern visueller Inhalte verwendet werden kann.

Das kontextbezogene Widget hat je nach Szenario unterschiedliche Funktionen:

• Es werden subjektive nutzergenerierte Inhalte in dem Szenario angezeigt, in dem Google Maps-Prompts zur Antwortgenerierung verwendet werden.
• Damit lassen sich Ergebnisse mit Kartenvisualisierungen und Daten anreichern, wenn Vertex AI nur eine Textantwort generiert.

Funktionsweise des kontextbezogenen Widgets

Das kontextbezogene Widget zeigt eine Antwort von Grounding with Google Maps in Vertex AI in Form eines googleMapsWidgetContextToken an. Verwenden Sie dieses Token, um das kontextbezogene Widget zu rendern und die Antwort anzuzeigen. Weitere Informationen Der Ereignisfluss sieht so aus:

1. Rufen Sie die Vertex AI API mit einer Anfrage auf, die auf Google Maps basiert.
2. Vertex AI gibt ein googleMapsWidgetContextToken zurück.
3. Rendern Sie das kontextbezogene Widget mit dem Token.
4. Im kontextbezogenen Widget wird die Antwort von Vertex AI angezeigt.

Das folgende Beispiel zeigt, wie ein Kontext-Token aussieht, wenn es von der Vertex AI API zurückgegeben wird.

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

Kontextbezogenes Google Maps-Widget rendern

Wenn Sie das kontextbezogene Google Maps-Widget rendern und verwenden möchten, verwenden Sie die Alphaversion der Maps JavaScript API auf der Seite, auf der das Widget angezeigt wird. Weitere Informationen Sie müssen auch den API-Schlüssel verwenden, der zum Laden der Google Maps JavaScript API aktiviert wurde. Prüfen Sie, ob die Bibliothek places geladen wurde.

Im folgenden Abschnitt wird beschrieben, wie Sie das kontextbezogene Google Maps-Widget rendern. Erstellen Sie ein kontextbezogenes Widget mit benutzerdefiniertem HTML oder mit JavaScript.

Benutzerdefinierte HTML-Elemente verwenden

Im folgenden Abschnitt wird beschrieben, wie Sie das kontextbezogene Google Maps-Widget mit benutzerdefinierten HTML-Elementen rendern. Fügen Sie das gmp-place-contextual-Element auf der Seite ein, um ein kontextbezogenes Widget zu erstellen.

1. Fügen Sie der Seite das gmp-place-contextual-Element hinzu:

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

2. In jeder Antwort, die auf Google Maps basiert, gibt es eine entsprechende googleMapsWidgetContextToken, mit der das Kontext-Widget gerendert werden kann. Die folgende Funktion zeigt, wie das Kontext-Token aktualisiert wird:

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

3. Optional: Geben Sie das Listenlayout an. Gültige Werte sind:
   • Kompaktes Layout: <gmp-place-contextual-list-config layout="compact">
   • Vertikales Layout: <gmp-place-contextual-list-config layout="vertical">

   Das folgende Beispiel zeigt, wie das Listenlayout in „Kompakt“ geändert wird:

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

4. Optional: Ändern Sie den Kartenmodus. Gültige Werte sind:
   • 2D-Roadmap-Karte: <gmp-place-contextual-map-config map-mode="roadmap">
   • 3D-Hybridkarte: <gmp-place-contextual-map-config map-mode="hybrid">
   • Keine Karte: <gmp-place-contextual-map-config map-mode="none">
Im folgenden Beispiel wird gezeigt, wie der Kartenmodus in eine 2D-Karte geändert wird:

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

JavaScript verwenden

Im folgenden Abschnitt wird beschrieben, wie Sie das kontextbezogene Google Maps-Widget rendern, indem Sie programmatisch ein PlaceContextualElement erstellen und es an das DOM anhängen.

1. Kontextbezogenes Widget erstellen

   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 jeder Antwort, die auf Google Maps basiert, gibt es eine entsprechende googleMapsWidgetContextToken, mit der das Kontext-Widget gerendert wird. Die folgende Funktion zeigt, wie das Kontext-Token aktualisiert wird:

   widget.contextToken = contextToken;

3. Optional: Geben Sie das Listenlayout an. Gültige Werte sind:
   • Kompaktes Layout: google.maps.places.PlaceContextualListLayout.COMPACT
   • Vertikales Layout: google.maps.places.PlaceContextualListLayout.VERTICAL

Das folgende Beispiel zeigt, wie das Listenlayout in „Kompakt“ geändert wird:

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

4. Optional: Ändern Sie den Kartenmodus. Gültige Werte sind:
   • 2D-Roadmap-Karte: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • 3D-Hybridkarte: google.maps.places.PlaceContextualListMapMode.HYBRID
   • Keine Karte: google.maps.places.PlaceContextualListMapMode.NONE

Im folgenden Beispiel wird gezeigt, wie der Kartenmodus in eine 2D-Karte geändert wird:

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

Unzulässige Gebiete

Bei Google Maps werden bestimmte Inhalte und Aktivitäten eingeschränkt, um eine sichere und zuverlässige Plattform zu gewährleisten. Eine Liste der verbotenen Gebiete finden Sie unter Verbotene Gebiete der Google Maps Platform.