मकसद
जानें कि Google Maps के साथ, Place Search Element को कैसे इंटिग्रेट किया जाता है. इससे उपयोगकर्ताओं को आस-पास की जगहों की जानकारी या टेक्स्ट से खोजकर, जगहें ढूंढने में मदद मिलती है. साथ ही, उन्हें दिलचस्पी की जगहों के बारे में ज़्यादा जानने में भी मदद मिलती है. अपने ऐप्लिकेशन में दिखने वाली जगहों के बारे में ज़्यादा जानकारी देने के लिए, Place Details Compact Element का इस्तेमाल करें.
Place Search Element क्या है?
Place Search Element, Maps JavaScript API में मौजूद Places UI Kit का हिस्सा है. यह एक एचटीएमएल एलिमेंट है, जो आपके ऐप्लिकेशन में सीधे तौर पर, सूची के फ़ॉर्मैट में जगह की खोज के नतीजे दिखाता है. इस एलिमेंट की मदद से, आस-पास की जगहों की जानकारी या टेक्स्ट से खोजकर मिली जगहों को दिखाना आसान हो जाता है. इससे उपयोगकर्ताओं को जगहें ढूंढने का बेहतर अनुभव मिलता है. जब कोई उपयोगकर्ता सूची में से कोई जगह चुनता है, तो आपको मैप पर उसकी जानकारी दिखानी होती है. इसके लिए, अक्सर Info Window और Place Details Element का इस्तेमाल किया जाता है.
जगहें ढूंढने की सुविधा को विज़ुअलाइज़ करना
नीचे दी गई इमेज में, Place Search Element का इस्तेमाल करने का एक उदाहरण दिखाया गया है. बाईं ओर, रेस्टोरेंट की सूची दिखाई गई है. यह Place Search Element है. कोई रेस्टोरेंट चुने जाने पर, उसकी जानकारी मैप पर Info Window में दिखती है. साथ ही, मैप पर उस रेस्टोरेंट की जगह दिखाई जाती है.
जगहें ढूंढने की सुविधा के इस्तेमाल के उदाहरण
Place Search Element को इंटिग्रेट करने से, अलग-अलग इंडस्ट्री के कई ऐप्लिकेशन बेहतर हो सकते हैं:
- यात्रा और पर्यटन: पर्यटकों को किसी इलाके में, घूमने-फिरने की जगहों, होटलों या खास तरह के खाने के बारे में खोजने की अनुमति दें.
- रीयल एस्टेट: संभावित खरीदारों या किराएदारों को आस-पास के स्कूल, सुपरमार्केट या सार्वजनिक परिवहन के विकल्प ढूंढने की अनुमति दें.
- लॉजिस्टिक्स और सेवाएं: ड्राइवरों को ईवी चार्जिंग स्टेशन, पेट्रोल पंप या खास सर्विस सेंटर ढूंढने में मदद करें.
सॉल्यूशन का वर्कफ़्लो: जगहें ढूंढने की सुविधा लागू करना
इस सेक्शन में, मैप पर जगहें ढूंढने के लिए, Place Search Element को इंटिग्रेट करने के चरणों के बारे में बताया गया है. इसमें Places UI Kit के साथ इंटरैक्ट करने के लिए, कोड स्निपेट भी शामिल हैं. हम मैप को शुरू करने और आस-पास की जगहों की जानकारी और टेक्स्ट से खोजें, दोनों सुविधाओं को लागू करने के बारे में बताएंगे. आखिर में, हम Place Details Element का इस्तेमाल करके, मैप पर किसी जगह के पिन पर क्लिक करने पर, उस जगह के बारे में ज़्यादा जानकारी दिखाएंगे.
ज़रूरी शर्तें
हमारा सुझाव है कि आप यहां दिए गए दस्तावेज़ों के बारे में जानकारी हासिल करें:
- Place Search Element - इसका इस्तेमाल, आस-पास की जगहों की जानकारी या टेक्स्ट से खोजें, दोनों में से किसी भी सुविधा का इस्तेमाल करके, जगहें दिखाने के लिए किया जाता है
- Place Details Element - इसका इस्तेमाल, किसी जगह की जानकारी दिखाने के लिए किया जाता है
- Maps JavaScript API - इसका इस्तेमाल, अपने पेज पर मैप दिखाने और Places UI Kit को इंपोर्ट करने के लिए किया जाता है
अपने प्रोजेक्ट पर, Maps JavaScript API और Places UI Kit को चालू करें.
शुरू करने से पहले, पक्का करें कि आपने Maps JavaScript API लोड कर लिया हो और ज़रूरी लाइब्रेरी इंपोर्ट कर ली हों. इस दस्तावेज़ में यह भी माना गया है कि आपको वेब डेवलपमेंट की जानकारी है. इसमें एचटीएमएल, सीएसएस, और JavaScript की जानकारी शामिल है.
पेज में मैप जोड़ना
पहला चरण, अपने पेज में मैप जोड़ना है. इस मैप का इस्तेमाल, Place Search Element के नतीजों को चुने जा सकने वाले पिन के तौर पर दिखाने के लिए किया जाएगा.
किसी पेज में मैप जोड़ने के दो तरीके हैं:
gmp-mapएचटीएमएल वेब कॉम्पोनेंट का इस्तेमाल करना.- JavaScript का इस्तेमाल करना.
इस पेज पर दिए गए कोड स्निपेट, JavaScript मैप का इस्तेमाल करके जनरेट किए गए हैं.
मैप को किसी ऐसी जगह पर सेंटर किया जा सकता है जिसके आस-पास उपयोगकर्ता को खोज करनी है. जैसे, कोई होटल. इसके अलावा, मैप को शुरू करने के लिए, उपयोगकर्ता की मौजूदा जगह की जानकारी का अनुरोध किया जा सकता है, ताकि मैप को उस जगह पर सेंटर किया जा सके. इस दस्तावेज़ के लिए, हम खोज को ऐंकर करने के लिए, किसी तय जगह का इस्तेमाल करेंगे.
अगर आपको किसी तय जगह, जैसे कि होटल के आस-पास की जगहें दिखानी हैं, तो इस जगह को दिखाने के लिए, मैप पर मार्कर लगाएं. उदाहरण के लिए:
मैप को सैन फ़्रांसिस्को पर सेंटर किया गया है. साथ ही, आस-पास की जगहें खोजने के लिए, नीले रंग का पिन इस्तेमाल किया गया है. पिन के रंग को
PinElement का इस्तेमाल करके पसंद के मुताबिक बनाया गया है.
यूज़र इंटरफ़ेस (यूआई) से, मैप टाइप कंट्रोल को छिपा दिया गया है.
Place Search Element सेट अप करना
अब हम 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 के तौर पर इस्तेमाल करने के लिए, Circle को शुरू करें. इसके लिए, पिछले चरण में मार्कर की पोज़िशन को सेंटर पॉइंट के तौर पर इस्तेमाल करें. इसके बाद, खोज को ट्रिगर करने के लिए, अनुरोध एलिमेंट पर 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>- Place Types का इस्तेमाल करके, Places Nearby Search से खोज के नतीजे रेंडर करें.<gmp-place-text-search-request>- "सैन फ़्रांसिस्को में सुशी" जैसे फ़्री टेक्स्ट इनपुट का इस्तेमाल करके, Places टेक्स्ट से खोजें के नतीजे रेंडर करें.
ये <gmp-place-search> के अंदर नेस्ट किए गए एलिमेंट हैं. इसके बाद, JavaScript का इस्तेमाल करके, नेस्ट किए गए अनुरोध एलिमेंट पर प्रॉपर्टी सेट करके, खोजें ट्रिगर की जाती हैं.
इस सेक्शन में, दोनों तरीकों को लागू करने के बारे में बताया गया है.
आस-पास की जगहों की जानकारी
उपयोगकर्ताओं को आस-पास की जगहों की जानकारी खोजने की अनुमति देने के लिए, आपको सबसे पहले उनके लिए Place Type चुनने के लिए, यूज़र इंटरफ़ेस (यूआई) एलिमेंट की ज़रूरत होगी. अपने ऐप्लिकेशन के लिए, चुनने का वह तरीका चुनें जो सबसे सही हो. उदाहरण के लिए, ड्रॉप-डाउन सूची में, जगह के टाइप के विकल्प शामिल किए जा सकते हैं.
हमारा सुझाव है कि आप टाइप का ऐसा सबसेट चुनें जो आपके इस्तेमाल के उदाहरण के लिए काम का हो.
उदाहरण के लिए, अगर आपको ऐसा ऐप्लिकेशन बनाना है जिससे पर्यटकों को यह दिखाया जा सके कि किसी होटल के आस-पास क्या है, तो ये विकल्प चुने जा सकते हैं: 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];
}
locationRestriction के लिए, सेटअप वाले चरण में इस्तेमाल किया गया searchCircle ही इस्तेमाल किया जाता है. 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 को सेट करके, नतीजों की संख्या को सीमित किया जा सकता है. यह ज़रूरी नहीं है.
जगह के पिन और जानकारी दिखाना
अब ऐप्लिकेशन, जगह की खोज कर सकता है और एलिमेंट में जानकारी भर सकता है. अगले चरण में, हम इसकी सुविधाओं को बेहतर बनाएंगे. इसके लिए:
- Place Search Element में भरी गई हर जगह के लिए, मैप पर पिन दिखाएंगे.
- उपयोगकर्ता को किसी जगह के बारे में ज़्यादा जानकारी दिखाने के लिए, Place Search Element में मौजूद किसी पिन या जगह पर क्लिक करने की अनुमति देंगे.
इस चरण का सिद्धांत वही है, चाहे ऐप्लिकेशन आस-पास की जगहों की जानकारी या टेक्स्ट से खोजें, दोनों में से किसी भी सुविधा का इस्तेमाल कर रहा हो.
सबसे पहले, अपने JavaScript कोड में एक ग्लोबल वैरिएबल जोड़ें, ताकि जगह के मार्कर सेव किए जा सकें. इससे, खोज में बदलाव होने पर, मार्कर हटाए जा सकेंगे और क्लिक इवेंट मैनेज किए जा सकेंगे.
let markers = {};
मैप में मार्कर जोड़ने के लिए, एक फ़ंक्शन बनाएं. जब भी खोज के नए नतीजे लोड होंगे, तब इस फ़ंक्शन को कॉल किया जाएगा. यह:
- मैप से, जगह के मौजूदा मार्कर हटाएगा.
- Place Search Element से मिले नतीजों के लिए लूप करेगा और हर नतीजे के लिए एक मार्कर जोड़ेगा.
- मैप के बाउंड को अडजस्ट करेगा, ताकि सभी नए मार्कर दिखें.
खोज के नतीजे उपलब्ध होने पर, इसकी जानकारी पाने के लिए, gmp-load इवेंट लिसनर
<gmp-place-search> एलिमेंट में जोड़ें. खोज पूरी होने और नतीजे रेंडर होने के बाद, यह इवेंट ट्रिगर होता है.
हम लिसनर को अपने खोज फ़ंक्शन (जैसे, 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 से मिली हर जगह के लिए मार्कर दिखाने की सुविधा होगी:
अब हमारे पास मैप पर मार्कर हैं. इसलिए, आखिरी चरण में, मार्कर और एलिमेंट के क्लिक इवेंट मैनेज करने होंगे, ताकि Place Details Elementसे मिली जगह की जानकारी के साथ, एक Info Window दिखाया जा सके. इस उदाहरण के लिए, हम Place Details Compact Element का इस्तेमाल करेंगे.
अपने कोड में, Place Details Compact 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 को, एलिमेंट का सारा कॉन्टेंट रेंडर करने के लिए पास किया जाता है. यह चुनने के लिए कि कौनसा
कॉन्टेंट रेंडर करना है, Place Details Compact
Element
का दस्तावेज़ देखें.
JavaScript में एक ग्लोबल वैरिएबल बनाएं, ताकि Place Details Compact Element का रेफ़रंस सेव किया जा सके. साथ ही, इसे अपने शुरुआती कोड में भरें. उदाहरण के लिए:
let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');
addMarkers फ़ंक्शन में, हर मार्कर में gmp-click इवेंट लिसनर जोड़ें. साथ ही, Place Details Compact Element को कॉन्फ़िगर करें, ताकि मौजूदा मार्कर का Place ID पास करके, जगह की जानकारी दिखाई जा सके.
ऐसा करने के बाद, मार्कर पर ऐंकर किया गया Place Details Compact Element दिखाने के लिए, एक Info Window खुलता है.
आखिर में, मैप को चुनी गई जगह के व्यूपोर्ट पर सेट किया जाता है, ताकि वह दिखे.
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 });
});
});
...
});
}
}
Place List Element में मौजूद किसी जगह पर क्लिक करके, Place Details Compact Element दिखाने की सुविधा चालू करने के लिए, configureFromSearchNearbyRequest को कॉल करने के बाद, JavaScript कोड में यह जोड़ें.
placeSearchElement.addEventListener("gmp-select", ({ place }) => {
if (markers[place.id]) {
markers[place.id].click();
}
});
यह चरण पूरा होने के बाद, ऐप्लिकेशन, Place List Element में जानकारी भरने के लिए, आस-पास की जगहों की जानकारी या टेक्स्ट से खोजें, दोनों में से किसी भी सुविधा का इस्तेमाल कर सकेगा. इसके नतीजों में, मैप पर पिन दिखेंगे. साथ ही, Place List Element में मौजूद किसी पिन या जगह पर क्लिक करने पर, Place Details Compact Element से मिली जगह की जानकारी के साथ, एक Info Window दिखेगा.
ऐप्लिकेशन ऐसा दिखेगा:
नतीजा
Place Search Element को Place Details Compact Element के साथ मिलाकर, Google Maps Platform के ऐप्लिकेशन में, जगहें ढूंढने की बेहतर सुविधाएं जोड़ी जा सकती हैं.
आज ही Places UI Kit आज़माएं, ताकि आपके उपयोगकर्ता, आस-पास की जगहों की जानकारी और टेक्स्ट से खोजें, दोनों का इस्तेमाल करके, जगहें ढूंढ सकें और उनके बारे में ज़्यादा जान सकें. साथ ही, उन्हें जगह की ज़्यादा जानकारी दिखाएं, ताकि वे जगहें ढूंढने के आपके इस्तेमाल के उदाहरणों के साथ बेहतर तरीके से इंटरैक्ट कर सकें.
योगदानकर्ता
हेनरिक वाल्व | DevX इंजीनियर