ווידג'ט של מפות Google

הווידג'ט ההקשרי הוא מוצר של מפות Google לפני השקת GA. הוא משמש כמאגר חזותי לתמיכה בתוכן אחר של מפות Google או להוספה שלו. בעזרת הווידג'ט ההקשרי של מפות Google, אתם יכולים לשלב את Grounding עם מפות Google באפליקציות שלכם כדי ליצור חוויית צ'אט מבוססת-LLM. הווידג'ט ההקשרי מוצג באמצעות טוקן ההקשר, googleMapsWidgetContextToken, שמוחזר בתגובה של Vertex AI API ואפשר להשתמש בו כדי להציג תוכן חזותי.

לווידג'ט ההקשרי יש פונקציות שונות בהתאם לתרחיש:

• הוא מציג תוכן סובייקטיבי שנוצר על ידי משתמשים (UGC) בתרחיש שבו נעשה שימוש בהנחיות במפות Google כדי ליצור תשובות.
• היא עוזרת להעשיר את התוצאות באמצעות נתונים והדמיות של מפות, כש-Vertex AI יוצר רק תשובה טקסטואלית.

איך הווידג'ט ההקשרי פועל

בווידג'ט ההקשרי מוצגת תשובה מ-Grounding עם מפות Google ב-Vertex AI, בצורה של googleMapsWidgetContextToken. משתמשים באסימון הזה כדי לעבד את הווידג'ט ההקשרי ולהציג את התשובה. מידע נוסף רצף האירועים הוא כז��:

1. שליחת קריאה ל-Vertex AI API עם שאילתה שמתבססת על נתונים ממפות Google.
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

כדי לעבד ולהשתמש בווידג'ט ההקשרי של מפות Google, צריך להשתמש בגרסת האלפא של Maps JavaScript API בדף שבו מוצג הווידג'ט. מידע נוסף זמין במאמר בנושא טעינת ממשק ה-API של JavaScript במפות Google. בנוסף, צריך להשתמש במפתח ה-API שהופעל כדי לטעון את ממשק API של JavaScript במפות Google. מוודאים שהספרייה places נטענה.

בקטע הבא מוסבר איך להציג את הווידג'ט ההקשרי של מפות Google. יוצרים ווידג'ט הקשרי באמצעות HTML בהתאמה אישית או באמצעות JavaScript.

שימוש ברכיבי HTML בהתאמה אישית

בקטע הבא מוסבר איך לעבד את הווידג'ט ההקשרי של מפות Google באמצעות רכיבי HTML מותאמים אישית. כדי ליצור ווידג'ט הקשרי, מוסיפים את הרכיב gmp-place-contextual לדף.

1. מוסיפים את הרכיב gmp-place-contextual לדף:

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

2. בכל תשובה שמבוססת על נתונים ממפות Google, יש רכיב 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. אופציונלי: משנים את מצב המפה. הערכים התקינים כוללים את האפשרויות הבאות:
   • מפת דרכים דו-ממדית: <gmp-place-contextual-map-config map-mode="roadmap">
   • מפה היברידית בתלת-ממד: <gmp-place-contextual-map-config map-mode="hybrid">
   • אין מפה: <gmp-place-contextual-map-config map-mode="none">
בדוגמה הבאה אפשר לראות איך לשנות את מצב המפה למפה דו-ממדית:

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

שימוש ב-JavaScript

בקטע הבא מוסבר איך להציג את הווידג'ט ההקשרי של מפות Google על ידי יצירה פרוגרמטית של 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, יש 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. אופציונלי: משנים את מצב המפה. הערכים התקינים כוללים את האפשרויות הבאות:
   • מפת דרכים דו-ממדית: google.maps.places.PlaceContextualListMapMode.ROADMAP
   • מפה היברידית בתלת-ממד: google.maps.places.PlaceContextualListMapMode.HYBRID
   • אין מפה: google.maps.places.PlaceContextualListMapMode.NONE

בדוגמה הבאה אפשר לראות איך לשנות את מצב המפה למפה דו-ממדית:

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

אזורים אסורים