PlaceSearchElement की मदद से जगह की जानकारी ढूंढना

मकसद

PlaceSearchElement को Google Maps के साथ इंटिग्रेट करने का तरीका जानें. इससे उपयोगकर्ताओं को आस-पास की जगहों की जानकारी या टेक्स्ट से खोजने की सुविधा का इस्तेमाल करके, जगहें ढूंढने में मदद मिलती है. साथ ही, वे अपनी पसंद की जगहों को बेहतर तरीके से एक्सप्लोर कर पाते हैं. अपने ऐप्लिकेशन में दिखाई गई जगहों के बारे में ज़्यादा जानकारी देने के लिए, Place Details Compact Element का इस्तेमाल करें.

PlaceSearchElement क्या है?

PlaceSearchElement, Maps JavaScript API में जगहों की जानकारी देने वाली यूआई किट का हिस्सा है. यह एक एचटीएमएल एलिमेंट है, जो आपके ऐप्लिकेशन में सीधे तौर पर सूची के फ़ॉर्मैट में, Place Search के नतीजे दिखाता है. यह एलिमेंट, आस-पास की जगहों की जानकारी या टेक्स्ट से खोजें सुविधा का इस्तेमाल करके मिली जगहों को दिखाने की प्रोसेस को आसान बनाता है. इससे उपयोगकर्ता को जगहें खोजने का बेहतर अनुभव मिलता है. जब कोई उपयोगकर्ता सूची से कोई जगह चुनता है, तो मैप पर उसकी जानकारी दिखाई जा सकती है. इसके लिए, अक्सर जानकारी वाली विंडो और जगह की जानकारी वाले एलिमेंट का इस्तेमाल किया जाता है.

जगह की खोज को विज़ुअलाइज़ करना

यहां दी गई इमेज में, PlaceSearchElement का एक उदाहरण दिखाया गया है. बाईं ओर, रेस्टोरेंट की सूची (PlaceSearchElement) दिखती है. किसी रेस्टोरेंट को चुनने पर, उसकी जानकारी मैप पर जानकारी वाली विंडो में दिखती है. साथ ही, मैप पर उस रेस्टोरेंट की जगह को बीच में दिखाया जाता है.

जगहें खोजने के लिए इस्तेमाल के उदाहरण

PlaceSearchElement को इंटिग्रेट करने से, अलग-अलग इंडस्ट्री के कई ऐप्लिकेशन को बेहतर बनाया जा सकता है:

• यात्रा और पर्यटन: पर्यटकों को किसी इलाके में घूमने-फिरने की जगहें, होटल या खास तरह के पकवान खोजने की सुविधा दें.
• रीयल एस्टेट: संभावित खरीदारों या किराये पर रहने वाले लोगों को आस-पास के स्कूल, सुपरमार्केट या बस, मेट्रो वगैरह के विकल्प ढूंढने की सुविधा दें.
• लॉजिस्टिक्स और सेवाएं: ड्राइवर को ईवी चार्जिंग स्टेशन, पेट्रोल पंप या खास सर्विस सेंटर ढूंढने में मदद करना.

समस्या हल करने का वर्कफ़्लो: जगहें खोजने की सुविधा लागू करना

इस सेक्शन में, मैप पर जगहों को खोजने के लिए PlaceSearchElement को इंटिग्रेट करने का तरीका बताया गया है. साथ ही, इसमें जगहों की जानकारी देने वाली यूआई किट के साथ इंटरैक्ट करने के लिए कोड स्निपेट भी शामिल हैं. मैप को शुरू करने और आस-पास की जगहों की जानकारी और टेक्स्ट से खोजने की सुविधा, दोनों को लागू करने का तरीका जानें. आखिर में, Place Details एलिमेंट का इस्तेमाल करके, किसी जगह के बारे में ज़्यादा जानकारी दिखाएं. ऐसा तब होगा, जब कोई उपयोगकर्ता मैप पर उस जगह के पिन पर क्लिक करेगा.

ज़रूरी शर्तें

हमारा सुझाव है कि आप इन दस्तावेज़ों को पढ़ें:

• PlaceSearchElement - इसका इस्तेमाल, आस-पास की जगहों की जानकारी या टेक्स्ट से खोजें सुविधा का इस्तेमाल करके जगहों की जानकारी दिखाने के लिए किया जाता है
• जगह की जानकारी वाला एलिमेंट - इसका इस्तेमाल, किसी जगह की जानकारी दिखाने के लिए किया जाता है
• Maps JavaScript API - इसका इस्तेमाल, आपके पेज पर मैप दिखाने और जगहों की जानकारी देने वाली यूआई किट को इंपोर्ट करने के लिए किया जाता है

अपने प्रोजेक्ट पर, Maps JavaScript API और जगहों की जानकारी देने वाली यूआई किट को चालू करें.

शुरू करने से पहले, पक्का करें कि आपने Maps JavaScript API लोड किया हो और ज़रूरी लाइब्रेरी इंपोर्ट की हों. इस दस्तावेज़ में यह भी माना गया है कि आपको वेब डेवलपमेंट की जानकारी है. इसमें एचटीएमएल, सीएसएस, और JavaScript शामिल हैं.

पेज पर मैप जोड़ना

सबसे पहले, अपने पेज पर मैप जोड़ें. इस मैप का इस्तेमाल, PlaceSearchElement के नतीजों को चुनी जा सकने वाली पिन के तौर पर दिखाने के लिए किया जाएगा.

किसी पेज पर मैप जोड़ने के दो तरीके हैं:

1. gmp-map एचटीएमएल वेब कॉम्पोनेंट का इस्तेमाल करके.
2. JavaScript का इस्तेमाल करना.

इस पेज पर मौजूद कोड स्निपेट, JavaScript मैप का इस्तेमाल करके जनरेट किए गए हैं.

मैप को किसी ऐसी जगह पर सेट किया जा सकता है जिसके आस-पास उपयोगकर्ता को खोज करनी हो, जैसे कि कोई होटल. इसके अलावा, मैप को उपयोगकर्ता की मौजूदा जगह की जानकारी के हिसाब से भी सेट किया जा सकता है. इस दस्तावेज़ के लिए, हम खोज को ऐंकर करने के लिए एक तय जगह का इस्तेमाल करेंगे.

अगर आपको किसी तय जगह, जैसे कि होटल के आस-पास की जगहें देखनी हैं, तो इस जगह को दिखाने के लिए मैप पर मार्कर लगाएं. उदाहरण के लिए:

मैप पर सैन फ़्रांसिस्को को बीच में दिखाया गया है. साथ ही, नीले रंग का पिन उस जगह को दिखाता है जिसके आस-पास हम खोज रहे हैं. PinElement का इस्तेमाल करके, पिन के रंग को पसंद के मुताबिक बनाया गया है. यूज़र इंटरफ़ेस (यूआई) से मैप टाइप कंट्रोल को छिपा दिया गया है.

PlaceSearchElement सेट अप करें

अब PlaceSearchElement दिखाने के लिए, एचटीएमएल और सीएसएस सेट अप करें. इस उदाहरण में, एलिमेंट को मैप के बाईं ओर फ़्लोट किया गया है. हालांकि, अपने ऐप्लिकेशन के हिसाब से अलग-अलग लेआउट आज़माए जा सकते हैं.

PlaceSearchElement, डिक्लेरेटिव तरीके का इस्तेमाल करता है. इसे पूरी तरह से 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'];

इस स्टेज पर आवेदन कैसा दिख सकता है, इसका एक उदाहरण यहां दिया गया है:

उपयोगकर्ता को खोजने की अनुमति दें

PlaceSearchElement में, खोजने के दो विकल्प होते हैं:

• <gmp-place-nearby-search-request> - जगह के टाइप का इस्तेमाल करके, आस-पास की जगहों की जानकारी से खोज के नतीजे रेंडर करना.
• <gmp-place-text-search-request> - Places टेक्स्ट से खोजें की मदद से, खोज के नतीजे रेंडर करें. इसके लिए, "मुंबई में सुशी" जैसे टेक्स्ट इनपुट का इस्तेमाल करें.

ये <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 एक वैकल्पिक पैरामीटर है. इससे नतीजों की संख्या को सीमित किया जा सकता है.

जगह के पिन और जानकारी दिखाना

अब ऐप्लिकेशन, जगह की जानकारी खोज सकता है और एलिमेंट को पॉप्युलेट कर सकता है. अगले चरण में, हम इसकी सुविधाओं को बेहतर बनाएंगे. इसके लिए, हम:

• PlaceSearchElement में मौजूद हर जगह के लिए, मैप पर पिन दिखाना.
• उपयोगकर्ता को PlaceSearchElement में मौजूद किसी पिन या जगह पर क्लिक करने की अनुमति देना, ताकि उस जगह के बारे में ज़्यादा जानकारी दिखाई जा सके.

इस चरण का सिद्धांत एक ही है, भले ही ऐप्लिकेशन आस-पास की जगहों की जानकारी या टेक्स्ट से खोजने की सुविधा का इस्तेमाल कर रहा हो.

सबसे पहले, प्लेस मार्कर को स्टोर करने के लिए, अपने JavaScript कोड में एक ग्लोबल वैरिएबल जोड़ें. इससे, खोज के नतीजों में बदलाव होने पर, उन्हें हटाया जा सकेगा. साथ ही, क्लिक इवेंट को मैनेज किया जा सकेगा.

let markers = {};

मैप में मार्कर जोड़ने के लिए, एक फ़ंक्शन बनाएं. खोज के नए नतीजे लोड होने पर, इस फ़ंक्शन को कॉल किया जाएगा. इससे:

• मैप से, जगह के सभी मौजूदा मार्कर हटाएं.
• PlaceSearchElement से मिले नतीजों को लूप करें और हर नतीजे के लिए एक मार्कर जोड़ें.
• मैप की सीमाओं को अडजस्ट करें, ताकि सभी नए मार्कर दिखें.

खोज के नतीजे उपलब्ध होने पर सूचना पाने के लिए, <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);
    }
}

यह चरण पूरा होने के बाद, ऐप्लिकेशन कुछ ऐसा दिखेगा. इसमें PlaceSearchElement से मिली हर जगह के लिए मार्कर दिखाने की सुविधा होगी:

अब जब हमारे पास मैप पर मार्कर हैं, तो आखिरी चरण में मार्कर और एलिमेंट पर क्लिक करने के इवेंट को मैनेज करना होगा. इससे, जगह की जानकारी वाली विंडो दिखेगी. यह जानकारी, जगह की जानकारी वाले एलिमेंट से मिलती है. इस उदाहरण के लिए, हम 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 को पास किया जाता है, ताकि सभी एलिमेंट का कॉन्टेंट रेंडर किया जा सके. कौनसा कॉन्टेंट रेंडर करना है, यह चुनने के लिए जगह की जानकारी वाले कॉम्पैक्ट एलिमेंट का दस्तावेज़ देखें.

JavaScript में एक ग्लोबल वैरिएबल बनाएं, ताकि Place Details Compact Element का रेफ़रंस सेव किया जा सके. इसके बाद, इसे अपने इनिशलाइज़ेशन कोड में पॉप्युलेट करें. उदाहरण के लिए:

let placeDetailsElement;
...
placeDetailsElement = document.querySelector('gmp-place-details-compact');

addMarkers फ़ंक्शन में, हर मार्कर के लिए gmp-click इवेंट लिसनर जोड़ें. साथ ही, मौजूदा मार्कर का जगह का आईडी पास करके, जगह की जानकारी दिखाने के लिए, Place Details Compact Element को कॉन्फ़िगर करें.

ऐसा करने के बाद, मार्कर पर ऐंकर किए गए प्लेस की जानकारी वाले कॉम्पैक्ट एलिमेंट को दिखाने के लिए, एक जानकारी वाली विंडो खुलती है.

आखिर में, मैप को चुनी गई जगह के व्यूपोर्ट पर सेट किया जाता है, ताकि वह जगह दिख सके.

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 List एलिमेंट में मौजूद किसी जगह पर क्लिक करने पर, आपको जानकारी विंडो दिखेगी. इसमें जगह की जानकारी होगी. यह जानकारी, Place Details Compact एलिमेंट से मिलती है.

आवेदन कुछ इस तरह दिखेगा:

नतीजा

PlaceSearchElement को जगह की जानकारी देने वाले छोटे एलिमेंट के साथ इस्तेमाल करने पर, Google Maps Platform के ऐप्लिकेशन में जगह की जानकारी देने वाली बेहतर सुविधाएं आसानी से जोड़ी जा सकती हैं.

आज ही जगहों की जानकारी देने वाली यूआई किट आज़माएं. इससे आपके उपयोगकर्ता, आस-पास की जगहों और टेक्स्ट से खोजें के ज़रिए जगहों को खोज पाएंगे और उन्हें एक्सप्लोर कर पाएंगे. साथ ही, जगहों की ज़्यादा जानकारी दिखाएं. इससे, जगहें खोजने के आपके इस्तेमाल के उदाहरणों के साथ उनका इंटरैक्शन बेहतर होगा.

योगदानकर्ता

हेनरिक वाल्व | DevX इंजीनियर