วิดเจ็ตการอ้างอิงของ Maps

วิดเจ็ตตามบริบทเป็นข้อเสนอ Google Maps Pre-GA ซึ่งเป็นคอนเทนเนอร์ภาพที่ใช้เพื่อ สนับสนุนหรือเสริมเนื้อหาอื่นๆ ของ Google Maps วิดเจ็ตตามบริบทของ Google Maps ช่วยให้คุณ ผสานรวม Grounding กับ Google Maps เข้ากับแอปพลิเคชันเพื่อสร้างประสบการณ์แชท ที่ขับเคลื่อนด้วย LLM แบบสนทนา วิดเจ็ตตามบริบทจะแสดงผลโดยใช้โทเค็นบริบท googleMapsWidgetContextToken ซึ่งจะแสดงในคำตอบของ Vertex AI API และใช้เพื่อแสดงเนื้อหาภาพได้

วิดเจ็ตตามบริบทจะทำหน้าที่แตกต่างกันไปตามสถานการณ์ของคุณ ดังนี้

• โดยจะแสดงเนื้อหาที่ผู้ใช้สร้างขึ้น (UGC) ที่เป็นความคิดเห็นส่วนตัวในสถานการณ์ที่ใช้พรอมต์ของ Google Maps เพื่อสร้างคำตอบ
• ซึ่งจะช่วยเสริมผลลัพธ์ด้วยการแสดงข้อมูลผ่านภาพของแผนที่และข้อมูลเมื่อ Vertex AI สร้างคำตอบเป็นข้อความเท่านั้น

วิธีการทำงานของวิดเจ็ตตามบริบท

วิดเจ็ตตามบริบทจะแสดงคำตอบจาก Grounding with Google Maps ใน Vertex AI ในรูปแบบของgoogleMapsWidgetContextToken ใช้โทเค็นนี้เพื่อแสดงผลวิดเจ็ตตามบริบท และแสดงคำตอบ ดูข้อมูลเพิ่มเติม ขั้นตอนของเหตุการณ์มีดังนี้

1. เรียกใช้ Vertex AI API ด้วยการค้นหาที่อิงตาม Google Maps
2. Vertex AI จะแสดง googleMapsWidgetContextToken
3. แสดงวิดเจ็ตตามบริบทโดยใช้โทเค็น
4. วิดเจ็ตตามบริบทจะแสดงคำตอบจาก Vertex AI

ตัวอย่างต่อไปนี้แสดงลักษณะของโทเค็นบริบทเมื่อแสดงผลจาก Vertex AI API

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

แสดงวิดเจ็ตตามบริบทของ Google Maps

หากต้องการแสดงผลและใช้วิดเจ็ตตามบริบทของ Google Maps ให้ใช้ Maps JavaScript API เวอร์ชันอัลฟ่าในหน้าเว็บที่แสดงวิดเจ็ต ดูข้อมูลเพิ่มเติมได้ที่โหลด Maps JavaScript API นอกจากนี้ คุณต้องใช้คีย์ API ที่เป��ดใช้เพื่อโหลด Google Maps JavaScript API ด้วย ตรวจสอบว่าได้โหลดไลบรารี places แล้ว

ส่วนต่อไปนี้จะอธิบายวิธีแสดงผลวิดเจ็ตตามบริบทของ Google Maps สร้างวิดเจ็ตตามบริบทโดยใช้ HTML ที่กำหนดเองหรือ JavaScript

ใช้องค์ประกอบ HTML ที่กำหนดเอง

ส่วนต่อไปนี้จะอธิบายวิธีแสดงผลวิดเจ็ตตามบริบทของ Google Maps โดยใช้องค์ประกอบ HTML ที่กำหนดเอง สร้างวิดเจ็ตตามบริบทโดยเพิ่มองค์ประกอบ gmp-place-contextual ลงในหน้าเว็บ

1. เพิ่มองค์ประกอบ gmp-place-contextual ลงในหน้าเว็บโดยทำดังนี้

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

2. ในการตอบกลับที่อิงตาม Google Maps จะมี googleMapsWidgetContextToken ที่เกี่ยวข้องซึ่งใช้ในการแสดงผลวิดเจ็ตตามบริบทได้ ฟังก์ชันต่อไปนี้แสดงวิธีอัปเดตโทเค็นบริบท

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

3. ไม่บังคับ: ระบุเลย์เอาต์รายการ ค่าที่ใช้ได้มีดังนี้
   • เลย์เอาต์กะทัดรัด: <gmp-place-contextual-list-config layout="compact">
   • เลย์เอาต์แนวตั้ง: <gmp-place-contextual-list-config layout="vertical">

   ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนเลย์เอาต์รายการเป็นแบบกะทัดรัด

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

4. ไม่บังคับ: เปลี่ยนโหมดแผนที่ ค่าที่ใช้ได้มีดังนี้
   • แผนที่เส้นทาง 2 มิติ: <gmp-place-contextual-map-config map-mode="roadmap">
   • แผนที่ไฮบริด 3 มิติ: <gmp-place-contextual-map-config map-mode="hybrid">
   • ไม่มีแผนที่: <gmp-place-contextual-map-config map-mode="none">
ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนโหมดแผนที่เป็นแผนที่ 2 มิติ

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

ใช้ JavaScript

ส่วนต่อไปนี้จะอธิบายวิธีแสดงวิดเจ็ตตามบริบทของ Google Maps โดยการ สร้าง PlaceContextualElement แบบเป็นโปรแกรมและต่อท้าย DOM

1. สร้างวิดเจ็ตตามบริบท

   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. ในการตอบกลับที่อิงตาม Google Maps จะมี googleMapsWidgetContextToken ที่ใช้ในการแสดงวิดเจ็ตตามบริบท ฟังก์ชันต่อไปนี้แสดงวิธีอัปเดตโทเค็นบริบท

   widget.contextToken = contextToken;

3. ไม่บังคับ: ระบุเลย์เอาต์รายการ ค่าที่ใช้ได้มีดังนี้
   • เลย์เอาต์กะทัดรัด: google.maps.places.PlaceContextualListLayout.COMPACT
   • เลย์เอาต์แนวตั้ง: google.maps.places.PlaceContextualListLayout.VERTICAL

ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนเลย์เอาต์รายการเป็นแบบกะทัดรัด

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

4. ไม่บังคับ: เปลี่ยนโหมดแผนที่ ค่าที่ใช้ได้มีดังนี้
   • แผนที่เส้นทาง 2 มิติ: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • แผนที่ไฮบริด 3 มิติ: google.maps.places.PlaceContextualListMapMode.HYBRID
   • ไม่มีแผนที่: google.maps.places.PlaceContextualListMapMode.NONE

ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนโหมดแผนที่เป็นแผนที่ 2 มิติ

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

เขตแดนที่ไม่อนุญาต