التطبيق المصغّر "الخرائط الأساسية"

الأداة السياقية هي "عرض ما قبل الإصدار العام" من "خرائط Google"، وهي عبارة عن حاوية مرئية تُستخدم لدعم أو استكمال محتوى آخر من "خرائط Google". تتيح لك الأ��اة السياقية في "خرائط Google" دمج ميزة Grounding with Google Maps في تطبيقاتك لإنشاء تجربة محادثة مستندة إلى نموذج لغوي كبير. يتم عرض الأداة السياقية باستخدام الرمز المميز للسياق، googleMapsWidgetContextToken، الذي يتم عرضه في استجابة Vertex AI API ويمكن استخدامه لعرض المحتوى المرئي.

يقدّم التطبيق المصغّر السياقي وظائف مختلفة حسب السيناريو:

• تعرض هذه الميزة محتوًى ذاتيًا من إنشاء المستخدمين في السيناريو الذي يتم فيه استخدام طلبات "خرائط Google" لإنشاء الإجابات.
• تساعد هذه الأداة في إثراء النتائج باستخدام تصورات الخرائط والبيانات عندما ينشئ Vertex AI ردًا نصيًا فقط.

طريقة عمل التطبيق المصغّر السياقي

تعرض الأداة السياقية ردًا من Grounding with Google Maps في 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 على الصفحة التي تعرض الأداة. لمزيد من المعلومات، راجِع تحميل Maps JavaScript API. يجب أيضًا استخدام مفتاح واجهة برمجة التطبيقات الذي تم تفعيله لتحميل Google Maps JavaScript API. تأكَّد من تحميل مكتبة 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);

المناطق المحظورة