Widget perujukan Maps

Widget kontekstual adalah Penawaran Pra-GA Google Maps yang merupakan penampung visual yang digunakan untuk mendukung atau melengkapi konten Google Maps lainnya. Widget kontekstual Google Maps memungkinkan Anda mengintegrasikan Perujukan dengan Google Maps ke dalam aplikasi untuk menciptakan pengalaman chat berbasis LLM yang percakapan. Widget kontekstual dirender menggunakan token konteks, googleMapsWidgetContextToken, yang ditampilkan dalam respons Vertex AI API dan dapat digunakan untuk merender konten visual.

Widget kontekstual memiliki fungsi yang berbeda-beda, bergantung pada skenario Anda:

• Fitur ini menampilkan konten buatan pengguna (UGC) yang subjektif dalam skenario saat perintah Google Maps digunakan untuk pembuatan jawaban.
• Alat ini membantu memperkaya hasil dengan visualisasi dan data peta saat Vertex AI hanya menghasilkan respons teks.

Cara kerja widget kontekstual

Widget kontekstual menampilkan respons dari Perujukan dengan Google Maps di Vertex AI, dalam bentuk googleMapsWidgetContextToken. Gunakan token ini untuk merender widget kontekstual dan menampilkan respons. Pelajari lebih lanjut. Alur peristiwanya adalah sebagai berikut:

1. Panggil Vertex AI API dengan kueri yang di-grounding dengan Google Maps.
2. Vertex AI menampilkan googleMapsWidgetContextToken.
3. Tampilkan widget kontekstual menggunakan token.
4. Widget kontekstual menampilkan respons dari Vertex AI.

Contoh berikut menunjukkan tampilan token konteks saat ditampilkan dari Vertex AI API.

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

Merender widget kontekstual Google Maps

Untuk merender dan menggunakan widget kontekstual Google Maps, gunakan Maps JavaScript API versi alfa di halaman yang menampilkan widget. Untuk informasi selengkapnya, lihat Memuat Maps JavaScript API. Anda juga harus menggunakan kunci API yang diaktifkan untuk memuat Google Maps JavaScript API. Pastikan library places telah dimuat.

Bagian berikut menjelaskan cara merender widget kontekstual Google Maps. Buat widget kontekstual menggunakan HTML kustom atau dengan JavaScript.

Menggunakan elemen HTML kustom

Bagian berikut menjelaskan cara merender widget kontekstual Google Maps menggunakan elemen HTML kustom. Buat widget kontekstual dengan menambahkan elemen gmp-place-contextual ke halaman.

1. Tambahkan elemen gmp-place-contextual ke halaman:

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

2. Dalam setiap respons yang didasarkan pada Google Maps, ada googleMapsWidgetContextToken yang sesuai yang dapat digunakan untuk merender widget kontekstual. Fungsi berikut menunjukkan cara memperbarui token konteks:

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

3. Opsional: Tentukan tata letak daftar. Nilai yang valid mencakup berikut ini:
   • Tata letak ringkas: <gmp-place-contextual-list-config layout="compact">
   • Tata letak vertikal: <gmp-place-contextual-list-config layout="vertical">

   Contoh berikut menunjukkan cara mengubah tata letak daftar menjadi ringkas:

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

4. Opsional: Ubah mode peta. Nilai yang valid mencakup berikut ini:
   • Peta roadmap 2D: <gmp-place-contextual-map-config map-mode="roadmap">
   • Peta hybrid 3D: <gmp-place-contextual-map-config map-mode="hybrid">
   • Tidak ada peta: <gmp-place-contextual-map-config map-mode="none">
Contoh berikut menunjukkan cara mengubah mode peta menjadi peta 2D:

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

Menggunakan JavaScript

Bagian berikut menjelaskan cara merender widget kontekstual Google Maps dengan membuat PlaceContextualElement secara terprogram dan menambahkannya ke DOM.

1. Buat widget kontekstual.

   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. Dalam setiap respons yang didasarkan pada Google Maps, ada googleMapsWidgetContextToken yang sesuai yang digunakan untuk merender widget kontekstual. Fungsi berikut menunjukkan cara memperbarui token konteks:

   widget.contextToken = contextToken;

3. Opsional: Tentukan tata letak daftar. Nilai yang valid mencakup berikut ini:
   • Tata letak ringkas: google.maps.places.PlaceContextualListLayout.COMPACT
   • Tata letak vertikal: google.maps.places.PlaceContextualListLayout.VERTICAL

Contoh berikut menunjukkan cara mengubah tata letak daftar menjadi ringkas:

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

4. Opsional: Ubah mode peta. Nilai yang valid mencakup berikut ini:
   • Peta roadmap 2D: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • Peta hybrid 3D: google.maps.places.PlaceContextualListMapMode.HYBRID
   • Tidak ada peta: google.maps.places.PlaceContextualListMapMode.NONE

Contoh berikut menunjukkan cara mengubah mode peta menjadi peta 2D:

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

Wilayah yang dilarang