मकसद
जगह खोजने वाले एलिमेंट को Google Maps के साथ इंटिग्रेट करने का तरीका जानें. इससे उपयोगकर्ताओं को आस-पास की जगहें खोजने या टेक्स्ट खोजने में मदद मिलेगी. साथ ही, वे दिलचस्प जगहों को बेहतर तरीके से एक्सप्लोर कर पाएंगे. अपने ऐप्लिकेशन में दिखाई गई जगहों के बारे में ज़्यादा जानकारी देने के लिए, जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट का इस्तेमाल करें.
जगह की जानकारी देने वाला एलिमेंट क्या है?
जगह खोजने वाला एलिमेंट, Maps JavaScript API में Places UI Kit का हिस्सा है. यह एक एचटीएमएल एलिमेंट है, जो किसी जगह की खोज के नतीजों को सीधे आपके ऐप्लिकेशन में सूची के फ़ॉर्मैट में रेंडर करता है. इस एलिमेंट की मदद से, आस-पास की जगहें खोजने या टेक्स्ट खोजने की सुविधा का इस्तेमाल करके, जगहों को दिखाने की प्रोसेस आसान हो जाती है. इससे, जगहों को खोजने के लिए उपयोगकर्ता को बेहतर अनुभव मिलता है. जब कोई उपयोगकर्ता सूची से कोई जगह चुनता है, तो उसकी जानकारी मैप पर दिखाई जा सकती है. इसके लिए, अक्सर जानकारी वाली विंडो और जगह की जानकारी वाले एलिमेंट का इस्तेमाल किया जाता है.
जगह की जानकारी खोजने की सुविधा को विज़ुअलाइज़ करना
नीचे दी गई इमेज में, जगह खोजने के लिए इस्तेमाल होने वाले एलिमेंट का उदाहरण दिया गया है. बाईं ओर, रेस्टोरेंट की सूची दिखती है (जगह की खोज के लिए एलिमेंट). किसी रेस्टोरेंट को चुनने पर, उसकी जानकारी मैप पर मौजूद जानकारी वाली विंडो में दिखती है. साथ ही, मैप उस रेस्टोरेंट की जगह पर सेंटर हो जाता है.
जगहों की जानकारी खोजने की सुविधा के इस्तेमाल के उदाहरण
जगह के हिसाब से खोज के एलिमेंट को इंटिग्रेट करने से, अलग-अलग इंडस्ट्री के कई ऐप्लिकेशन बेहतर हो सकते हैं:
- यात्रा और पर्यटन: पर्यटकों को किसी इलाके में घूमने-फिरने की जगहें, होटल या खास तरह के खान-पान की चीज़ें खोजने की सुविधा दें.
- रीयल एस्टेट: संभावित खरीदारों या किराये पर लेने वालों को आस-पास के स्कूल, सुपरमार्केट या सार्वजनिक परिवहन के विकल्प ढूंढने में मदद करें.
- लॉजिस्टिक और सेवाएं: ईवी चार्जिंग स्टेशन, पेट्रोल पंप या खास सर्विस सेंटर ढूंढने में ड्राइवरों की मदद करना.
समस्या हल करने का तरीका: जगह की जानकारी खोजने की सुविधा को लागू करना
इस सेक्शन में, मैप पर जगहें खोजने के लिए, जगह खोजने वाले एलिमेंट को इंटिग्रेट करने का तरीका बताया गया है. इसमें, Places UI Kit के साथ इंटरैक्ट करने के लिए कोड स्निपेट भी शामिल हैं. हम मैप को शुरू करने और आस-पास की जगहें खोजने की सुविधा और टेक्स्ट खोजने की सुविधा, दोनों को लागू करने के बारे में बताएंगे. आखिर में, हम जगह की जानकारी वाले एलिमेंट का इस्तेमाल करेंगे. इससे मैप पर किसी जगह के पिन पर क्लिक करने पर, उस जगह के बारे में ज़्यादा जानकारी दिखेगी.
ज़रूरी शर्तें
हमारा सुझाव है कि आप इन दस्तावेज़ों को पढ़ें:
- जगह खोजने वाला एलिमेंट - इसका इस्तेमाल, आस-पास खोजने या टेक्स्ट से खोजने की सुविधा का इस्तेमाल करके जगहों को दिखाने के लिए किया जाता है
- जगह की जानकारी वाला एलिमेंट - इसका इस्तेमाल किसी जगह की जानकारी दिखाने के लिए किया जाता है
- Maps JavaScript API - इसका इस्तेमाल, अपने पेज पर मैप दिखाने और Places यूज़र इंटरफ़ेस (यूआई) किट इंपोर्ट करने के लिए किया जाता है
अपने प्रोजेक्ट में Maps JavaScript API और Places UI Kit चालू करें.
शुरू करने से पहले, पुष्टि करें कि आपने Maps JavaScript API लोड कर लिया है और ज़रूरी लाइब्रेरी इंपोर्ट कर ली हैं. इस दस्तावेज़ में यह भी माना गया है कि आपके पास वेब डेवलपमेंट के बारे में जानकारी है. इसमें एचटीएमएल, सीएसएस, और JavaScript शामिल हैं.
पेज पर मैप जोड़ना
पहला चरण, अपने पेज में मैप जोड़ना है. इस मैप का इस्तेमाल, जगह खोजने वाले एलिमेंट के नतीजों को चुनने लायक पिन के तौर पर दिखाने के लिए किया जाएगा.
किसी पेज में मैप जोड़ने के दो तरीके हैं:
gmp-mapएचटीएमएल वेब कॉम्पोनेंट का इस्तेमाल करके.- JavaScript का इस्तेमाल करना.
इस पेज पर मौजूद कोड स्निपेट, JavaScript मैप का इस्तेमाल करके जनरेट किए गए थे.
मैप को किसी ऐसी जगह पर सेंटर किया जा सकता है जहां उपयोगकर्ता को खोज करनी है, जैसे कि होटल. इसके अलावा, मैप को सेंटर करने के लिए, उपयोगकर्ता की मौजूदा जगह की जानकारी मांगी जा सकती है. इस दस्तावेज़ के लिए, हम खोज को ऐंकर करने के लिए एक तय जगह का इस्तेमाल करेंगे.
अगर आपको किसी होटल जैसी किसी तय जगह के आस-पास की जगहों को विज़ुअलाइज़ करना है, तो उस जगह को दिखाने के लिए मैप पर मार्कर लगाएं. उदाहरण के लिए:
मैप में सैन फ़्रैंसिस्को को सेंटर में दिखाया गया है. साथ ही, आस-पास की जिस जगह को खोजा जा रहा है उसे नीले रंग के पिन से दिखाया गया है. PinElement का इस्तेमाल करके, पिन का रंग पसंद के मुताबिक बनाया गया है.
मैप टाइप कंट्रोल को यूज़र इंटरफ़ेस (यूआई) से छिपा दिया गया है.
जगह की जानकारी देने वाला एलिमेंट सेट अप करना
अब, जगह खोजने की सुविधा वाला एलिमेंट दिखाने के लिए, एचटीएमएल और सीएसएस सेट अप की जा सकती है. इस उदाहरण में, हम एलिमेंट को मैप की बाईं ओर फ़्लोट करने जा रहे हैं. हालांकि, हमारा सुझाव है कि अपने ऐप्लिकेशन के हिसाब से अलग-अलग लेआउट आज़माएं.
अपने एचटीएमएल कोड में, एक div बनाएं जिसमें जगह की खोज करने वाला एलिमेंट हो.
इसके अंदर, एक खाली
gmp-place-list शुरू करें.
एलिमेंट पर क्लिक इवेंट चालू करने के लिए, selectable एट्रिब्यूट के साथ gmp-place-list to का इस्तेमाल करें.
<gmp-place-list selectable></gmp-place-list>
इस चरण में, जगह का टाइप खोजने के लिए, configureFromSearchNearbyRequest का इस्तेमाल करें. इससे यह पता चलेगा कि नतीजे सही तरीके से दिख रहे हैं या नहीं.
जगह की खोज के नतीजे दिखाने के लिए, जगह की खोज एलिमेंट को कॉन्फ़िगर करने के लिए JavaScript का इस्तेमाल करें. locationRestriction के तौर पर इस्तेमाल करने के लिए, सर्कल को शुरू करें. इसके लिए, केंद्र बिंदु और सही त्रिज्या का इस्तेमाल करें. इस उदाहरण के लिए, एलिमेंट को restaurant टाइप की जगह खोजने के लिए कॉन्फ़िगर किया गया है. साथ ही, पिछले चरण में सेट अप किए गए मार्कर की पोज़िशन का इस्तेमाल, सर्कल के सेंटर पॉइंट के तौर पर किया गया है.
इसके लिए कोड स्निपेट इस तरह का है:
const placeListElement = document.querySelector("gmp-place-list");
const circleRestriction = new Circle({
center: marker.position,
radius: 500
});
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: circleRestriction,
includedPrimaryTypes: ['restaurant'],
});
इस चरण में, आवेदन कैसा दिख सकता है, इसका उदाहरण यहां दिया गया है:
उपयोगकर्ता को खोजने की अनुमति दें
जगह खोजने वाले एलिमेंट की मदद से, खोज के दो विकल्प मिलते हैं:
configureFromSearchNearbyRequest- जगहों के टाइप का इस्तेमाल करके, आस-पास की जगहों की खोज से खोज के नतीजे रेंडर करें.configureFromSearchByTextRequest- "मुंबई में सुशी" जैसे किसी फ़्री टेक्स्ट इनपुट का इस्तेमाल करके, जगहों के लिए टेक्स्ट खोज से खोज के नतीजे रेंडर करें.
इस सेक्शन में, दोनों तरीकों को लागू करने के बारे में बताया गया है.
आस-पास की जगहों की जानकारी
यूज़र इंटरफ़ेस (यूआई) एलिमेंट लागू करें, ताकि उपयोगकर्ता यह चुन सके कि जगह खोजने वाला एलिमेंट, जगह का कौनसा टाइप दिखाएगा. हमारा सुझाव है कि इस्तेमाल के उदाहरण के हिसाब से, इनमें से कोई सबसेट चुनें. उदाहरण के लिए, अगर आपको पर्यटकों को किसी होटल के आस-पास की जगहों के बारे में बताने के लिए कोई ऐप्लिकेशन बनाना है, तो इनमें से कोई एक विकल्प चुना जा सकता है: bakery, coffee_shop,
museum, restaurant, और tourist_attraction. अपने ऐप्लिकेशन के लिए सबसे सही तरीका चुनें. उदाहरण के लिए, जगह के टाइप की ड्रॉप-डाउन सूची.
जगह के टाइप को चुनने के यूज़र इंटरफ़ेस (यूआई) पर बदलाव इवेंट को मैनेज करने के लिए, JavaScript लिसनर बनाएं. configureFromSearchNearbyRequest का इस्तेमाल करके, जगह के चुने गए टाइप के आधार पर, जगह खोजने की सुविधा वाले एलिमेंट को अपडेट करने के लिए, फ़ंक्शन को कॉल करने के लिए, लिसनर को कॉन्फ़िगर करें.
फ़ंक्शन का इस्तेमाल करके, जगह खोजने वाले एलिमेंट को अपडेट करने का उदाहरण यहां दिया गया है:
// Function to update the place search
function updatePlaceList() {
const selectedType = placeTypeSelect.value;
if (!selectedType) {
console.warn("No place type selected.");
// Clear results or handle as needed
placeListElement.requestedResultTypes = [];
return;
}
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: searchCircle,
maxResultCount: 8,
includedPrimaryTypes: [selectedType],
});
}
पिछले चरण में सेट अप किए गए उसी सर्कल locationRestriction का इस्तेमाल किया जाता है. includedPrimaryTypes पैरामीटर, यूज़र इंटरफ़ेस (यूआई) में चुनी गई वैल्यू के आधार पर सेट होता है.
जगह खोजने वाले एलिमेंट में दिखाए जाने वाले नतीजों की संख्या को सीमित करने के लिए, maxResultCount भी सेट किया गया है. हालांकि, ऐसा करना ज़रूरी नहीं है.
टेक्स्ट से खोजें
अपने उपयोगकर्ताओं को टेक्स्ट खोजने की सुविधा देने के लिए, बटन के साथ टेक्स्ट इनपुट जोड़ें. बटन पर click इवेंट को मैनेज करने के लिए, एक JavaScript लिसनर बनाएं. साथ ही, configureFromSearchByTextRequest का इस्तेमाल करके, डाली गई खोज स्ट्रिंग का इस्तेमाल करके जगह खोजने के लिए, जगह खोजने वाले एलिमेंट को कॉन्फ़िगर करें.
const textSearchInput = document.getElementById('textSearchInput');
const textSearchButton = document.getElementById('textSearchButton');
textSearchButton.addEventListener('click', performTextSearch);
function performTextSearch() {
const query = textSearchInput.value.trim();
if (!query) {
console.log("Search query is empty.");
return;
}
placeListElement.configureFromSearchByTextRequest({
textQuery: query,
locationRestriction: map.getBounds(),
maxResultCount: 8,
});
}
इस उदाहरण के लिए, मैप के मौजूदा सीमाओं का इस्तेमाल करके, वैकल्पिक locationRestriction सेट किया गया है. सर्च क्वेरी को textQuery पैरामीटर का इस्तेमाल करके पास किया जाता है.
जगह खोजने वाले एलिमेंट में दिखाए जाने वाले नतीजों की संख्या को सीमित करने के लिए, maxResultCount भी सेट किया गया है. हालांकि, ऐसा करना ज़रूरी नहीं है.
जगह के पिन और जानकारी दिखाना
अब ऐप्लिकेशन, जगह की खोज कर सकता है और एलिमेंट को पॉप्युलेट कर सकता है. अगले चरण में, हम इस सुविधा को बेहतर बनाएंगे. इसके लिए, हम ये काम करेंगे:
- जगह की खोज वाले एलिमेंट में भरी गई हर जगह के लिए, मैप पर पिन दिखाना.
- उपयोगकर्ता को जगह की खोज वाले एलिमेंट में पिन या जगह पर क्लिक करने की अनुमति देना, ताकि उस जगह के बारे में ज़्यादा जानकारी दिखाई जा सके.
इस चरण का सिद्धांत एक ही रहेगा, चाहे ऐप्लिकेशन में configureFromSearchNearbyRequest का इस्तेमाल किया जा रहा हो या configureFromSearchByTextRequest का. इस उदाहरण के लिए, हम configureFromSearchNearbyRequest का इस्तेमाल करेंगे.
प्लेसमार्क सेव करने के लिए, अपने JavaScript कोड में ग्लोबल वैरिएबल जोड़ें. इससे, खोज के नतीजों में बदलाव होने पर, इन्हें हटाया जा सकता है. साथ ही, जगह की जानकारी दिखाने के लिए क्लिक इवेंट को मैनेज किया जा सकता है.
let markers = {};
इनमें फ़ंक्शन जोड़ें:
- जगह की जानकारी देने वाले मौजूदा मार्कर हटाना.
- जगह के खोज नतीजों वाले एलिमेंट के नतीजों को लूप करें और हर एक के लिए मार्कर जोड़ें.
- मैप की सीमाएं सेट करें, ताकि सभी मार्कर दिखें.
async function addMarkers() {
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
if (placeListElement.places.length > 0) {
// Remove existing markers
for (m in markers) {
markers[m].map = null;
}
markers = {};
// Loop through each place in the Place Search Element
// Add a marker for each place
placeListElement.places.forEach((place) => {
let marker = new AdvancedMarkerElement({
map: map,
position: place.location,
});
markers[place.id] = marker;
bounds.extend(place.location);
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
// Position the map to display all markers with the bounds
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
}
}
आखिर में, configureFromSearchNearbyRequest promise के पूरा होने के बाद, नए addMarkers() फ़ंक्शन को इस तरह कॉल करें:
placeListElement.configureFromSearchNearbyRequest({
locationRestriction: searchCircle,
maxResultCount: 8,
includedPrimaryTypes: [selectedType],
}).then(addMarkers);
यह चरण पूरा होने के बाद, ऐप्लिकेशन इस तरह दिखेगा. इसमें, जगह खोजने वाले एलिमेंट से मिली हर जगह के लिए मार्कर दिखाने की सुविधा होगी:
अब हमारे पास मैप पर मार्कर हैं. आखिरी चरण में, मार्कर और एलिमेंट पर क्लिक करने से जुड़े इवेंट को मैनेज करना है. इससे, जगह की जानकारी वाले एलिमेंट से मिली जगह की जानकारी वाला सूचना विंडो दिखेगा. इस उदाहरण के लिए, हम जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट का इस्तेमाल करेंगे.
अपने कोड में जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट का एचटीएमएल जोड़ें. उदाहरण के लिए:
<gmp-place-details-compact orientation="vertical" style="display: none;">
<gmp-place-all-content></gmp-place-all-content>
<gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>
style को display: none पर सेट किया गया है. यह तब तक नहीं दिखेगा, जब तक इसकी ज़रूरत नहीं होगी.
gmp-place-all-content को सभी एलिमेंट के कॉन्टेंट को रेंडर करने के लिए पास किया जाता है. यह चुनने के लिए कि कौनसा कॉन्टेंट रेंडर करना है, जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट के दस्तावेज़ देखें.
जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट का रेफ़रंस रखने के लिए, JavaScript में एक ग्लोबल वैरिएबल बनाएं. इसके बाद, इसे अपने शुरुआती कोड में भरें. उदाहरण के लिए:
let placeDetailsElement;
…
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers फ़ंक्शन में, हर मार्कर के लिए gmp-click इवेंट लिसनर जोड़ें. साथ ही, जगह की जानकारी दिखाने के लिए, जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट को कॉन्फ़िगर करें. इसके लिए, मौजूदा मार्कर का प्लेस आईडी पास करें.
ऐसा करने के बाद, मार्कर पर ऐंकर किए गए जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट को दिखाने के लिए, जानकारी वाली विंडो खुलती है.
आखिर में, मैप को चुनी गई जगह के व्यूपोर्ट में दिखाया जाता है.
async function addMarkers() {
...
marker.addListener('gmp-click', (event) => {
//Set up Place Details Compact Widget
placeDetailsElement.style.display = "block";
// Remove any existing place request element
const existingPlaceRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
if (existingPlaceRequest) {
existingPlaceRequest.remove();
}
// Create and configure the new place request element
const placeRequestElement = new google.maps.places.PlaceDetailsPlaceRequestElement({ place: place.id });
// Prepend the new place request element to the main widget
placeDetailsElement.prepend(placeRequestElement);
if (infoWindow.isOpen) {
infoWindow.close();
}
infoWindow.setOptions({
content: placeDetailsElement
});
infoWindow.open({
anchor: marker,
map: map
});
// Position the map to show the selected place
placeDetailsElement.addEventListener('gmp-load', () => {
map.fitBounds(place.viewport, { top: 500, left: 400 });
});
});
...
});
}
}
जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट को दिखाने के लिए, उपयोगकर्ता को जगह की सूची वाले एलिमेंट में किसी जगह पर क्लिक करने की सुविधा देने के लिए, configureFromSearchNearbyRequest को कॉल करने के बाद JavaScript कोड में यह जोड़ें.
placeListElement.addEventListener("gmp-placeselect", ({ place }) => {
markers[place.id].click();
});
यह चरण पूरा होने के बाद, ऐप्लिकेशन, जगह की सूची के एलिमेंट को पॉप्युलेट करने के लिए, आस-पास की जगहें खोजने की सुविधा या टेक्स्ट खोज की सुविधा का इस्तेमाल कर पाएगा. इससे मैप पर पिन दिखेंगे. साथ ही, जगह की सूची वाले एलिमेंट में किसी पिन या जगह पर क्लिक करने पर, जगह की जानकारी वाली एक विंडो दिखेगी. यह जानकारी, जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट से मिलती है.
आवेदन इस तरह दिखेगा:
नतीजा
जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट के साथ जगह की खोज करने वाले एलिमेंट का इस्तेमाल करके, Google Maps Platform के ऐप्लिकेशन में जगहों की जानकारी खोजने की बेहतर सुविधाएं जोड़ी जा सकती हैं.
जगहों की जानकारी देने वाली यूआई किट को आज ही आज़माएं, ताकि आपके उपयोगकर्ता आस-पास की जगहों और टेक्स्ट खोज, दोनों का इस्तेमाल करके जगहें ढूंढ सकें और उन्हें एक्सप्लोर कर सकें. साथ ही, जगह की ज़्यादा जानकारी दिखाकर, जगहों की जानकारी खोजने के इस्तेमाल के उदाहरणों के साथ उनके इंटरैक्शन को बेहतर बनाया जा सके.
योगदानकर्ता
Henrik Valve | DevX के इंजीनियर