मकसद
Google Maps के साथ जगह की खोज करने वाले एलिमेंट को इंटिग्रेट करने का तरीका जानें. इससे उपयोगकर्ताओं को आस-पास की जगहें खोजने या टेक्स्ट खोज का इस्तेमाल करके जगहें ढूंढने में मदद मिलेगी. साथ ही, वे दिलचस्पी वाली जगहों को बेहतर तरीके से एक्सप्लोर कर पाएंगे. अपने ऐप्लिकेशन में दिखाई गई जगहों के बारे में ज़्यादा जानकारी देने के लिए, 'जगह की जानकारी देने वाला छोटा एलिमेंट' का इस्तेमाल करें.
Place Search एलिमेंट क्या है?
जगह की खोज करने वाला एलिमेंट, Maps JavaScript API में मौजूद Places UI Kit का हिस्सा है. यह एक एचटीएमएल एलिमेंट है. यह जगह की खोज के नतीजों को सीधे आपके ऐप्लिकेशन में सूची के फ़ॉर्मैट में रेंडर करता है. इस एलिमेंट की मदद से, आस-पास की जगहें खोजने या टेक्स्ट खोज का इस्तेमाल करके मिली जगहों को आसानी से दिखाया जा सकता है. इससे लोगों को जगहें खोजने में आसानी होती है. जब कोई उपयोगकर्ता सूची में से किसी जगह को चुनता है, तब मैप पर उसकी जानकारी दिखाई जा सकती है. इसके लिए, अक्सर जानकारी वाली विंडो और जगह की जानकारी देने वाले एलिमेंट का इस्तेमाल किया जाता है.
जगह की खोज को विज़ुअलाइज़ करना
यहां दी गई इमेज में, जगह के हिसाब से खोज करने वाले एलिमेंट का एक उदाहरण दिखाया गया है. बाईं ओर, रेस्टोरेंट की सूची दिख रही है (जगह के हिसाब से खोज करने वाला एलिमेंट). किसी रेस्टोरेंट को चुनने पर, उसकी जानकारी मैप पर मौजूद जानकारी वाली विंडो में दिखती है. साथ ही, मैप उस रेस्टोरेंट की जगह पर दिखता है.
जगह की जानकारी खोजने की सुविधा के इस्तेमाल के उदाहरण
जगह के हिसाब से खोज करने की सुविधा को इंटिग्रेट करने से, अलग-अलग इंडस्ट्री के कई ऐप्लिकेशन की परफ़ॉर्मेंस बेहतर हो सकती है:
- यात्रा और पर्यटन: पर्यटकों को किसी इलाके में घूमने-फिरने की जगहों, होटलों या किसी खास तरह के पकवानों को खोजने की अनुमति दें.
- रीयल एस्टेट: संभावित खरीदारों या किरायेदारों को आस-पास के स्कूल, सुपरमार्केट या सार्वजनिक परिवहन के विकल्प ढूंढने की सुविधा दें.
- लॉजिस्टिक्स और सेवाएं: ड्राइवर को ईवी चार्जिंग स्टेशन, गैस स्टेशन या सर्विस सेंटर ढूंढने में मदद करना.
जगह ढूंढने की सुविधा लागू करने से जुड़ा वर्कफ़्लो
इस सेक्शन में, मैप पर जगहें खोजने के लिए Place Search Element को इंटिग्रेट करने का तरीका बताया गया है. इसमें Places UI Kit के साथ इंटरैक्ट करने के लिए कोड स्निपेट भी शामिल हैं. हम मैप को शुरू करने के साथ-साथ, आस-पास की जगहों को खोजने और टेक्स्ट के ज़रिए खोजने की सुविधाओं को लागू करने के बारे में बताएंगे. आखिर में, हम PlaceDetails एलिमेंट का इस्तेमाल करेंगे. इससे मैप पर किसी जगह के पिन पर क्लिक करने पर, उस जगह के बारे में ज़्यादा जानकारी दिखेगी.
ज़रूरी शर्तें
हमारा सुझाव है कि आप इन दस्तावेज़ों को पढ़ लें:
- Place Search Element - इसका इस्तेमाल, आस-पास की जगहों को दिखाने के लिए किया जाता है. इसके लिए, Nearby Search या Text Search का इस्तेमाल किया जाता है
- जगह की जानकारी देने वाला एलिमेंट - इसका इस्तेमाल किसी जगह की जानकारी दिखाने के लिए किया जाता है
- Maps JavaScript API - इसका इस्तेमाल, आपके पेज पर मैप दिखाने और Places UI Kit को इंपोर्ट करने के लिए किया जाता है
अपने प्रोजेक्ट में Maps JavaScript API और Places UI Kit चालू करें.
शुरू करने से पहले, पुष्टि करें कि आपने Maps JavaScript API लोड कर लिया हो और ज़रूरी लाइब्रेरी इंपोर्ट कर ली हों. इस दस्तावेज़ में यह भी माना गया है कि आपको वेब डेवलपमेंट की बुनियादी जानकारी है. जैसे, एचटीएमएल, सीएसएस, और JavaScript.
पेज में मैप जोड़ना
पहला चरण, अपने पेज में मैप जोड़ना है. इस मैप का इस्तेमाल, जगह की खोज करने वाले एलिमेंट के नतीजों को चुनने लायक पिन के तौर पर दिखाने के लिए किया जाएगा.
किसी पेज में मैप जोड़ने के दो तरीके हैं:
gmp-mapएचटीएमएल वेब कॉम्पोनेंट का इस्तेमाल करके.- JavaScript का इस्तेमाल करके.
इस पेज पर मौजूद कोड स्निपेट, JavaScript मैप का इस्तेमाल करके जनरेट किए गए थे.
मैप को किसी ऐसी जगह पर सेंटर किया जा सकता है जिसके आस-पास उपयोगकर्ता को होटल ढूंढना है. जैसे, कोई होटल. इसके अलावा, मैप को सेंटर करने के लिए, उपयोगकर्ता की मौजूदा जगह की जानकारी का इस्तेमाल किया जा सकता है. इस दस्तावेज़ के लिए, हम खोज को ऐंकर करने के लिए एक तय जगह का इस्तेमाल करेंगे.
अगर आपको किसी तय जगह, जैसे कि होटल के आस-पास की जगहों को विज़ुअलाइज़ करना है, तो मैप पर मार्कर लगाएं, ताकि इस जगह को दिखाया जा सके. उदाहरण के लिए:
मैप में सैन फ़्रैंसिस्को को सेंटर में दिखाया गया है. साथ ही, नीले पिन से उस जगह को दिखाया गया है जिसे हम आस-पास खोज रहे हैं. पिन के रंग को PinElement का इस्तेमाल करके पसंद के मुताबिक बनाया गया है.
यूज़र इंटरफ़ेस (यूआई) से मैप टाइप कंट्रोल को छिपा दिया गया है.
Place Search Element सेट अप करना
अब हम प्लेस सर्च एलिमेंट दिखाने के लिए, एचटीएमएल और सीएसएस सेट अप कर सकते हैं. इस उदाहरण में, हम एलिमेंट को मैप के बाईं ओर फ़्लोट करने जा रहे हैं. हालांकि, हमारा सुझाव है कि आप अपने ऐप्लिकेशन के हिसाब से अलग-अलग लेआउट आज़माएं.
Place Search Element, डिक्लेरेटिव अप्रोच का इस्तेमाल करता है. इसे पूरी तरह से JavaScript में कॉन्फ़िगर करने के बजाय, सीधे तौर पर एचटीएमएल में खोज का टाइप तय किया जा सकता है. इसके लिए, मुख्य <gmp-place-search> कॉम्पोनेंट में <gmp-place-nearby-search-request> जैसे अनुरोध एलिमेंट को नेस्ट करें.
अपने एचटीएमएल कोड में, <gmp-place-search> एलिमेंट को शुरू करें. नतीजों पर क्लिक इवेंट चालू करने के लिए, selectable एट्रिब्यूट का इस्तेमाल करें. इसमें <gmp-place-nearby-search-request> जोड़ें, ताकि यह तय किया जा सके कि इस एलिमेंट का इस्तेमाल आस-पास की खोज के लिए किया जाएगा.
<gmp-place-search selectable>
<gmp-place-nearby-search-request>
</gmp-place-nearby-search-request>
</gmp-place-search>
शुरुआती खोज करने और नतीजे दिखाने के लिए, हम JavaScript का इस्तेमाल करेंगे. इससे हमें नेस्ट किए गए अनुरोध एलिमेंट का रेफ़रंस मिलेगा और हम उसकी प्रॉपर्टी सेट कर पाएंगे. locationRestriction के तौर पर इस्तेमाल करने के लिए, एक सर्कल शुरू करें. इसके लिए, पिछले चरण में मार्कर की पोज़िशन को सेंटर पॉइंट के तौर पर इस्तेमाल करें. इसके बाद, खोज शुरू करने के लिए अनुरोध एलिमेंट पर locationRestriction और includedPrimaryTypes प्रॉपर्टी सेट करें.
इसके लिए कोड स्निपेट यहां दिया गया है:
// Get references to the Place Search and its nested request element
const placeSearchElement = document.querySelector("gmp-place-search");
const placeSearchRequestElement = document.querySelector("gmp-place-nearby-search-request");
// Define the location restriction for the search
const circleRestriction = new Circle({
center: marker.position,
radius: 500
});
// Set the properties on the request element to perform an initial search for restaurants.
placeSearchRequestElement.locationRestriction = circleRestriction;
placeSearchRequestElement.includedPrimaryTypes = ['restaurant'];
इस चरण में, आवेदन कैसा दिख सकता है, इसका उदाहरण यहां दिया गया है:
उपयोगकर्ता को खोजने की अनुमति दें
Place Search Element में, खोज के दो विकल्प मिलते हैं:
<gmp-place-nearby-search-request>- जगह के टाइप का इस्तेमाल करके, आस-पास की जगहों को खोजने की सुविधा से खोज के नतीजे रेंडर करता है.<gmp-place-text-search-request>- जगहों के बारे में टेक्स्ट सर्च से खोज के नतीजे रेंडर करता है. इसके लिए, "सैन फ़्रांसिस्को में सुशी" जैसे फ़्री टेक्स्ट इनपुट का इस्तेमाल किया जाता है.
ये <gmp-place-search> में नेस्ट किए गए एलिमेंट हैं. इसके बाद, JavaScript का इस्तेमाल करके उस नेस्ट किए गए अनुरोध एलिमेंट पर प्रॉपर्टी सेट करके, खोजें ट्रिगर की जाती हैं.
इस सेक्शन में, दोनों तरीकों को लागू करने के बारे में बताया गया है.
आस-पास की जगहों की खोज
उपयोगकर्ताओं को आस-पास की जगहें खोजने की सुविधा देने के लिए, आपको सबसे पहले उनके लिए एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट की ज़रूरत होगी. इसकी मदद से, वे जगह का टाइप चुन पाएंगे. अपने ऐप्लिकेशन के लिए, चुनने का ऐसा तरीका चुनें जो सबसे सही हो. उदाहरण के लिए, जगह के टाइप चुनने के लिए ड्रॉप-डाउन सूची.
हमारा सुझाव है कि आप इस्तेमाल के उदाहरण के हिसाब से, टाइप का सबसेट चुनें.
उदाहरण के लिए, अगर आपको ऐसा ऐप्लिकेशन बनाना है जो पर्यटकों को होटल के आस-पास की जगहें दिखाए, तो आपको ये विकल्प चुनने चाहिए: bakery, coffee_shop, museum, restaurant, और tourist_attraction.
आपके एचटीएमएल में <gmp-place-search> एलिमेंट होना चाहिए, जिसमें <gmp-place-nearby-search-request> नेस्ट किया गया हो.
<gmp-place-search selectable>
<gmp-place-nearby-search-request>
</gmp-place-nearby-search-request>
</gmp-place-search>
इसके बाद, जगह के टाइप चुनने वाले टूल पर change इवेंट के लिए JavaScript लिसनर बनाएं. यह लिसनर, एक ऐसे फ़ंक्शन को कॉल करेगा जो <gmp-place-nearby-search-request> एलिमेंट की प्रॉपर्टी अपडेट करता है. इससे नई खोज अपने-आप ट्रिगर हो जाती है और सूची अपडेट हो जाती है.
// Get a reference to the nested request element
const placeSearchRequestElement = document.querySelector('gmp-place-nearby-search-request');
// Function to update the place search based on the selected type
function updatePlaceList() {
const selectedType = placeTypeSelect.value;
if (!selectedType) {
// If no type is selected, don't perform a search.
// You could optionally hide the list or clear previous results here.
placeSearchElement.style.display = 'none';
return;
}
placeSearchElement.style.display = 'block';
// Set properties on the request element to trigger a new search
placeSearchRequestElement.locationRestriction = searchCircle;
placeSearchRequestElement.maxResultCount = 8;
placeSearchRequestElement.includedPrimaryTypes = [selectedType];
}
सेटअप चरण में इस्तेमाल किया गया searchCircle, locationRestriction के लिए भी इस्तेमाल किया जाता है. includedPrimaryTypes प्रॉपर्टी को उपयोगकर्ता के चुने गए विकल्प के हिसाब से सेट किया जाता है. नतीजों की संख्या सीमित करने के लिए, एक वैकल्पिक maxResultCount भी सेट किया जाता है.
टेक्स्ट सर्च
टेक्स्ट खोज की सुविधा चालू करने के लिए, आपको अपने एचटीएमएल कॉन्फ़िगरेशन में बदलाव करना होगा. आस-पास की जगहों को खोजने के अनुरोध के बजाय, <gmp-place-text-search-request> एलिमेंट को नेस्ट करें.
<gmp-place-search selectable>
<gmp-place-text-search-request>
</gmp-place-text-search-request>
</gmp-place-search>
अपने यूज़र इंटरफ़ेस (यूआई) में टेक्स्ट इनपुट और खोज बटन जोड़ें. बटन के click इवेंट के लिए, JavaScript लिसनर बनाएं. इवेंट हैंडलर, उपयोगकर्ता के इनपुट को लेगा और खोज करने के लिए <gmp-place-text-search-request> एलिमेंट की प्रॉपर्टी अपडेट करेगा.
// Get a reference to the text search request element
const placeTextSearchRequestElement = document.querySelector('gmp-place-text-search-request');
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;
}
// Set properties on the request element to trigger a new search
placeTextSearchRequestElement.textQuery = query;
placeTextSearchRequestElement.locationBias = map.getBounds();
placeTextSearchRequestElement.maxResultCount = 8;
}
यहां, हमने उपयोगकर्ता के इनपुट के साथ textQuery प्रॉपर्टी सेट की है. हम मौजूदा मैप बाउंड्री का इस्तेमाल करके locationBias भी उपलब्ध कराते हैं. इससे एपीआई को उस इलाके के नतीजों को प्राथमिकता देने के लिए कहा जाता है. हालांकि, नतीजों को सिर्फ़ उस इलाके तक सीमित नहीं रखा जाता. ज़रूरी नहीं है कि maxResultCount का इस्तेमाल किया जाए. इससे, दिखाए गए नतीजों की संख्या सीमित हो जाती है.
जगह के पिन और जानकारी दिखाना
अब ऐप्लिकेशन, जगह की जानकारी खोज सकता है और एलिमेंट को भर सकता है. अगले चरण में, हम इसकी सुविधाओं को बेहतर बनाएंगे. इसके लिए:
- जगह की खोज करने वाले एलिमेंट में मौजूद हर जगह के लिए, मैप पर पिन दिखाना.
- इससे उपयोगकर्ता को किसी जगह के बारे में ज़्यादा जानकारी मिलती है. इसके लिए, वह जगह की खोज करने वाले एलिमेंट में मौजूद किसी पिन या जगह पर क्लिक कर सकता है.
इस चरण का सिद्धांत एक जैसा होता है. भले ही, ऐप्लिकेशन आस-पास की जगहें खोजने की सुविधा का इस्तेमाल कर रहा हो या टेक्स्ट खोजने की सुविधा का.
सबसे पहले, जगह के मार्कर सेव करने के लिए, अपने JavaScript कोड में एक ग्लोबल वैरिएबल जोड़ें. इससे आपको खोज के नतीजे बदलने पर, उन्हें हटाने और क्लिक इवेंट मैनेज करने में मदद मिलेगी.
let markers = {};
मैप में मार्कर जोड़ने के लिए, एक फ़ंक्शन बनाएं. खोज के नए नतीजे लोड होने पर, इस फ़ंक्शन को कॉल किया जाएगा. इससे:
- मैप से किसी भी मौजूदा जगह के मार्कर हटाएं.
- जगह की जानकारी खोजने वाले एलिमेंट से मिले नतीजों को लूप करें और हर नतीजे के लिए एक मार्कर जोड़ें.
- मैप की सीमाओं को इस तरह से अडजस्ट करें कि सभी नए मार्कर दिखें.
खोज के नतीजे उपलब्ध होने पर सुनने के लिए, <gmp-place-search> एलिमेंट में gmp-load इवेंट लिसनर
जोड़ें. यह इवेंट, खोज पूरी होने और नतीजे रेंडर होने के बाद ट्रिगर होता है.
हम श्रोता को खोज के नतीजे दिखाने की सुविधा में जोड़ देंगे. जैसे, updatePlaceList) का इस्तेमाल करें. साथ ही, { once: true } विकल्प का इस्तेमाल करके यह पक्का करें कि यह सिर्फ़ मौजूदा खोज के नतीजों के लिए ट्रिगर हो.
// In your search function, after setting the request properties:
placeSearchElement.addEventListener('gmp-load', addMarkers, { once: true });
addMarkers फ़ंक्शन ऐसा दिखता है:
async function addMarkers() {
const { LatLngBounds } = await google.maps.importLibrary("core");
const bounds = new LatLngBounds();
if (placeSearchElement.places.length > 0) {
// Remove existing markers
for (const m in markers) {
markers[m].map = null;
}
markers = {};
// Loop through each place from the search results
// and add a marker for each one.
for (const place of placeSearchElement.places) {
const marker = new google.maps.marker.AdvancedMarkerElement({
map: map,
position: place.location,
});
markers[place.id] = marker;
bounds.extend(place.location);
marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
// Add a click listener for each marker.
marker.addListener('gmp-click', (event) => {
// The main logic for showing details will go here.
});
}
// Position the map to display all markers.
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
}
यह चरण पूरा होने के बाद, ऐप्लिकेशन इस तरह दिखेगा. इसमें Place Search Element से मिली हर जगह के लिए मार्कर दिखाने की सुविधा होगी:
अब हमारे पास मैप पर मार्कर हैं. इसलिए, आखिरी चरण में मार्कर और एलिमेंट पर क्लिक करने से जुड़े इवेंट को मैनेज करना है. इससे जगह की जानकारी वाली विंडो दिखेगी. यह जानकारी, जगह की ज़्यादा जानकारी देने वाले एलिमेंट से मिलती है. इस उदाहरण के लिए, हम जगह की जानकारी देने वाले कॉम्पैक्ट एलिमेंट का इस्तेमाल करेंगे.
अपने कोड में, जगह की जानकारी देने वाले कॉम्पैक्ट एलिमेंट का एचटीएमएल जोड़ें. उदाहरण के लिए:
<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 में एक ग्लोबल वैरिएबल बनाएं, ताकि Place Details Compact Element का रेफ़रंस सेव किया जा सके. इसके बाद, इसे अपने इनिशियलाइज़ेशन कोड में भरें. उदाहरण के लिए:
let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers फ़ंक्शन में, हर मार्कर के लिए gmp-click इवेंट लिसनर जोड़ें. साथ ही, Place Details Compact Element को कॉन्फ़िगर करें, ताकि वह मौजूदा मार्कर का Place ID पास करके जगह की जानकारी दिखा सके.
ऐसा करने के बाद, मार्कर पर ऐंकर किया गया जानकारी वाला विंडो खुलता है. इसमें जगह की जानकारी देने वाला कॉम्पैक्ट एलिमेंट दिखता है.
आखिर में, मैप को चुनी गई जगह के व्यूपोर्ट पर सेट किया जाता है, ताकि वह दिख सके.
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 कोड में यह जोड़ें.
placeSearchElement.addEventListener("gmp-select", ({ place }) => {
if (markers[place.id]) {
markers[place.id].click();
}
});
यह चरण पूरा होने के बाद, ऐप्लिकेशन, जगह की सूची वाले एलिमेंट को भरने के लिए, आस-पास की जगहें खोजने की सुविधा या टेक्स्ट सर्च का इस्तेमाल कर पाएगा. इसके नतीजों में, मैप पर पिन दिखेंगे. साथ ही, पिन या जगह की सूची वाले एलिमेंट में मौजूद किसी जगह पर क्लिक करने से, जगह की जानकारी वाली विंडो दिखेगी. यह जानकारी, जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट से मिलती है.
ऐप्लिकेशन कुछ इस तरह दिखेगा:
नतीजा
Place Search Element और Place Details Compact Element को एक साथ इस्तेमाल करने से, Google Maps Platform के ऐप्लिकेशन में जगह ढूंढने से जुड़ी बेहतर सुविधाएं आसानी से जोड़ी जा सकती हैं.
आज ही Places UI Kit आज़माएं. इससे आपके उपयोगकर्ताओं को आस-पास की जगहों और टेक्स्ट, दोनों का इस्तेमाल करके जगहों को खोजने और एक्सप्लोर करने में मदद मिलेगी. साथ ही, उन्हें जगहों की ज़्यादा जानकारी दिखेगी. इससे, जगहों को खोजने से जुड़े इस्तेमाल के उदाहरणों के साथ उनका इंटरैक्शन बेहतर होगा.
योगदानकर्ता
हेनरिक वाल्व | DevX इंजीनियर