कॉन्टेक्स्ट के हिसाब से काम करने वाला विजेट, 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>
- कॉम्पैक्ट लेआउट:
-
ज़रूरी नहीं: मैप मोड बदलें. मान्य वैल्यू में ये शामिल हैं:
- 2D रोडमैप मैप:
<gmp-place-contextual-map-config map-mode="roadmap">
- 3D हाइब्रिड मैप:
<gmp-place-contextual-map-config map-mode="hybrid">
- कोई मैप नहीं:
<gmp-place-contextual-map-config map-mode="none">
यहां दिए गए उदाहरण में, मैप मोड को 2D मैप में बदलने का तरीका बताया गया है:
- 2D रोडमैप मैप:
<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 में जोड़ा जाता है.
कॉन्टेक्स्ट के हिसाब से विजेट बनाएं.
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
- कॉम्पैक्ट लेआउट:
-
ज़रूरी नहीं: मैप मोड बदलें. मान्य वैल्यू में ये शामिल हैं:
- 2D रोडमैप मैप:
google.maps.places.PlaceContextualListMapMode.ROADMAP
- 3D हाइब्रिड मैप:
google.maps.places.PlaceContextualListMapMode.HYBRID
- कोई मैप नहीं:
google.maps.places.PlaceContextualListMapMode.NONE
- 2D रोडमैप मैप:
यहां दिए गए उदाहरण में, सूची के लेआउट को कॉम्पैक्ट में बदलने का तरीका बताया गया है:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ layout: google.maps.places.PlaceContextualListLayout.COMPACT }); widget.appendChild(widgetConfig);
यहां दिए गए उदाहरण में, मैप मोड को 2D मैप में बदलने का तरीका बताया गया है:
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP }); widget.appendChild(widgetConfig);