जगह के हिसाब से ऐडवांस खोज करने वाला एलिमेंट (प्रीव्यू)

AdvancedPlaceSearchElement एक एचटीएमएल एलिमेंट है. यह किसी जगह की खोज के नतीजों को सूची में दिखाता है. gmp-advanced-place-search एलिमेंट को कॉन्फ़िगर करने के दो तरीके हैं:

आस-पास की खोज और टेक्स्ट खोज, दोनों में एक जैसी ऐडवांस सुविधाएं मिलती हैं. जैसे, कार्रवाई बटन को पसंद के मुताबिक बनाना, समीक्षाओं और मीडिया को फ़िल्टर करना, जगह के एट्रिब्यूशन को कॉन्फ़िगर करना, और जगह चुनने और गड़बड़ियों को ठीक करने की सुविधा.

आस-पास की जगहें खोजने का अनुरोध

जगह के टाइप के हिसाब से, आस-पास की जगहों के खोज नतीजे देखने के लिए, मेन्यू से जगह का टाइप चुनें.

आस-पास की जगहें खोजने की सुविधा को मुख्य रूप से जगह के टाइप और जगह के हिसाब से खोजने के लिए कॉन्फ़िगर किया जाता है. साथ ही, rankPreference प्रॉपर्टी का इस्तेमाल करके, नतीजों को दूरी या लोकप्रियता के हिसाब से रैंक किया जा सकता है. ज़्यादा जानकारी के लिए, PlaceNearbySearchRequestElement क्लास का रेफ़रंस दस्तावेज़ देखें.

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

मैप में ऐडवांस Place Search एलिमेंट जोड़ने के लिए, एचटीएमएल पेज में gmp-advanced-place-search एलिमेंट जोड़ें. इसमें नेस्ट किया गया gmp-place-nearby-search-request एलिमेंट होना चाहिए. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

select एलिमेंट की मदद से, उपयोगकर्ता मेन्यू से किसी जगह का टाइप चुन सकता है. आसानी के लिए, यहां सिर्फ़ तीन तरह की जगहों के बारे में बताया गया है: रेस्टोरेंट, कैफ़े, और ईवी चार्जिंग स्टेशन. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

जब उपयोगकर्ता मेन्यू से किसी जगह का टाइप चुनता है, तो gmp-place-nearby-search-request एलिमेंट अपडेट हो जाता है. इसके बाद, ऐडवांस जगह की खोज करने वाला एलिमेंट, नतीजे दिखाता है.

टेक्स्ट अनुरोध की मदद से खोजना

इनपुट फ़ील्ड में, खोज के लिए कोई शब्द डालें. इसके बाद, उस शब्द से मिलती-जुलती जगहों की सूची पाने के लिए, खोजें बटन पर क्लिक करें.

टेक्स्ट सर्च को मुख्य रूप से, टेक्स्ट क्वेरी और जगह की जानकारी का इस्तेमाल करके खोजने के लिए कॉन्फ़िगर किया जाता है. साथ ही, नतीजों को कीमत, रेटिंग, और कारोबार के खुले होने की स्थिति के हिसाब से बेहतर बनाया जा सकता है. rankPreference प्रॉपर्टी का इस्तेमाल करके, नतीजों को दूरी या लोकप्रियता के हिसाब से भी रैंक किया जा सकता है. ज़्यादा जानकारी के लिए, PlaceTextSearchRequestElement क्लास का रेफ़रंस दस्तावेज़ देखें.

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

मैप में ऐडवांस Place Search एलिमेंट जोड़ने के लिए, एचटीएमएल पेज में gmp-advanced-place-search एलिमेंट जोड़ें. इसमें नेस्ट किया गया gmp-place-text-search-request एलिमेंट होना चाहिए. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input एलिमेंट की मदद से, उपयोगकर्ता खोज के लिए टेक्स्ट डाल सकता है. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

जब उपयोगकर्ता खोजें बटन पर क्लिक करता है, तो खोज फ़ंक्शन चालू हो जाता है. साथ ही, gmp-place-text-search-request एलिमेंट अपडेट हो जाता है और ऐडवांस Place Search एलिमेंट, नतीजे दिखाता है.

बेहतर सुविधाएं

ऐक्शन बटन को पसंद के मुताबिक बनाना

ऐडवांस प्लेस सर्च कॉम्पोनेंट के <template slot="place-list-item"> एलिमेंट में, ऐक्शन बटन को चाइल्ड कॉम्पोनेंट के तौर पर जोड़ें. स्टैंडर्ड नेविगेशनल कनेक्शन के लिए <gmp-place-link> का इस्तेमाल करें. साथ ही, action एट्रिब्यूट को साफ़ तौर पर सेट करें. आपके पास slot एट्रिब्यूट की वैल्यू देने का विकल्प होता है. पहले से तय की गई मान्य कार्रवाइयां open-website, open-directions, open-map, और call हैं. अगर slot एट्रिब्यूट को शामिल नहीं किया जाता है, तो यह डिफ़ॉल्ट रूप से action-main पर सेट होता है. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

समीक्षाएं और मीडिया फ़िल्टर करना

इस कोड सैंपल में, सिर्फ़ ऐसे मीडिया और समीक्षाएं दिखती हैं जिनमें "कॉफ़ी" का ज़िक्र किया गया है.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

जगह के हिसाब से एट्रिब्यूशन कॉन्फ़िगर करना

विज़ुअल एट्रिब्यूशन को कॉन्फ़िगर करने के लिए, <gmp-place-attribution> एलिमेंट जोड़ें. इससे Maps API के डेटा एट्रिब्यूशन कॉन्फ़िगरेशन दिखेंगे. जैसे, किसी फ़ोटो या समीक्षा का सोर्स. इसे <template> के डायरेक्ट सिबलिंग के तौर पर जोड़ा जाना चाहिए. <template> एलिमेंट के अंदर रखे गए एट्रिब्यूशन को अनदेखा कर दिया जाएगा. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

जगह चुनने और गड़बड़ियों को ठीक करने की सुविधा

selectable एट्रिब्यूट मौजूद होने पर, gmp-select इवेंट को सुना जा सकता है. इससे उपयोगकर्ता की चुनी गई जगह की जानकारी मिलती है. जगह की जानकारी फ़ेच न होने पर, gmp-error इवेंट को भी सुना जा सकता है, ताकि स्थितियों को आसानी से हैंडल किया जा सके. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});