कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, Google Maps की प्री-जीए ऑफ़रिंग है. यह एक विज़ुअल कंटेनर है. इसका इस्तेमाल, Google Maps के अन्य कॉन्टेंट को बेहतर बनाने या उसमें ज़्यादा जानकारी जोड़ने के लिए किया जाता है. Google Maps के कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, आपको अपने ऐप्लिकेशन में Google Maps के साथ ग्राउंडिंग को इंटिग्रेट करने की सुविधा देता है. इससे एलएलएम की मदद से बातचीत करने की सुविधा बनाई जा सकती है. कॉन्टेक्स्ट के हिसाब से काम करने वाले विजेट को कॉन्टेक्स्ट टोकन, googleMapsWidgetContextToken का इस्तेमाल करके रेंडर किया जाता है. यह Vertex AI API के जवाब में मिलता है और इसका इस्तेमाल विज़ुअल कॉन्टेंट को रेंडर करने के लिए किया जा सकता है.
कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, आपकी स्थिति के हिसाब से अलग-अलग फ़ंक्शन करता है:
- इसमें यूज़र जनरेटेड कॉन्टेंट (यूजीसी) को दिखाया गया है. इस कॉन्टेंट में, Google Maps के प्रॉम्प्ट का इस्तेमाल करके जवाब जनरेट किया गया है.
- जब Vertex AI सिर्फ़ टेक्स्ट वाला जवाब जनरेट करता है, तब यह सुविधा मैप विज़ुअलाइज़ेशन और डेटा की मदद से नतीजों को बेहतर बनाने में मदद करती है.
कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट कैसे काम करता है
कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, Vertex AI में Grounding with Google Maps से मिला जवाब दिखाता है. यह जवाब, googleMapsWidgetContextToken के तौर पर दिखता है. इस टोकन का इस्तेमाल, कॉन्टेक्स्ट के हिसाब से विजेट को रेंडर करने और जवाब दिखाने के लिए करें.
ज़्यादा जानें.
इवेंट का फ़्लो इस तरह होता है:
- Google Maps के डेटा के आधार पर तैयार की गई क्वेरी की मदद से, Vertex AI API को कॉल करें.
- Vertex AI,
googleMapsWidgetContextTokenदिखाता है. - टोकन का इस्तेमाल करके कॉन्टेक्स्ट के हिसाब से विजेट रेंडर करें.
- कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, 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 लोड करना लेख पढ़ें.
आपको उस एपीआई पासकोड का भी इस्तेमाल करना होगा जिसे Google Maps JavaScript API को लोड करने के लिए चालू किया गया था.
पुष्टि करें कि places लाइब्रेरी लोड हो गई है.
इस सेक्शन में, Google Maps के कॉन्टेक्स्ट के हिसाब से काम करने वाले विजेट को रेंडर करने का तरीका बताया गया है. कस्टम एचटीएमएल या JavaScript का इस्तेमाल करके, कॉन्टेक्स्ट के हिसाब से विजेट बनाएं.
कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करना
यहां दिए गए सेक्शन में, कस्टम एचटीएमएल एलिमेंट का इस्तेमाल करके, Google Maps के कॉन्टेक्स्ट के हिसाब से काम करने वाले विजेट को रेंडर करने का तरीका बताया गया है. पेज पर gmp-place-contextual एलिमेंट जोड़कर, कॉन्टेक्स्ट के हिसाब से विजेट बनाएं.
-
पेज में
gmp-place-contextualएलिमेंट जोड़ें:<gmp-place-contextual id="widget"></gmp-place-contextual>
-
Google Maps से मिली जानकारी के आधार पर दिए गए हर जवाब में, एक
googleMapsWidgetContextTokenहोता है. इसका इस्तेमाल, कॉन्टेक्स्ट के हिसाब से विजेट दिखाने के लिए किया जा सकता है. यहां दिए गए फ़ंक्शन में, कॉन्टेक्स्ट टोकन को अपडेट करने का तरीका बताया गया है:let widget = document.querySelector('#widget'); // a div that contains the widget widget.contextToken = contextToken;
-
ज़रूरी नहीं: सूची का लेआउट तय करें. मान्य वैल्यू में ये शामिल हैं:
- कॉम्पैक्ट लेआउट:
<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>
- कॉम्पैक्ट लेआउट:
JavaScript का इस्तेमाल करना
यहां दिए गए सेक्शन में, Google Maps के कॉन्टेक्स्ट के हिसाब से काम करने वाले विजेट को रेंडर करने का तरीका बताया गया है. इसके लिए, प्रोग्राम के ज़रिए PlaceContextualElement बनाया जाता है और उसे DOM में जोड़ा जाता है.
कॉन्टेक्स्ट के हिसाब से विजेट बनाएं.
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); }
- Google Maps से मिली जानकारी के आधार पर दिए गए हर जवाब में, उससे जुड़ा
googleMapsWidgetContextTokenहोता है. इसका इस्तेमाल कॉन्टेक्स्ट के हिसाब से विजेट को रेंडर करने के लिए किया जाता है. नीचे दिए गए फ़ंक्शन में, कॉन्टेक्स्ट टोकन को अपडेट करने का तरीका बताया गया है:widget.contextToken = contextToken;
-
ज़रूरी नहीं: सूची का लेआउट तय करें. मान्य वैल्यू में ये शामिल हैं:
- कॉम्पैक्ट लेआउट:
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);