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

फ़िलहाल, इस सुविधा की सिर्फ़ झलक उपलब्ध है. इसका मतलब यह हो सकता है कि अभी यह सुविधा पूरी तरह से काम न करे. हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं के लिए, आपको पूरी सहायता न मिले. साथ ही, ऐसा हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA के अन्य वर्शन के साथ काम न करें. Pre-GA ऑफ़र पर, Google Maps Platform की सेवा से जुड़ी खास शर्तें लागू होती हैं. ज़्यादा जानने के लिए, लॉन्च के चरणों की जानकारी पढ़ें.

AdvancedPlaceListElement , एक एचटीएमएल एलिमेंट है. यह, जगह के संसाधन के नामों के हिसाब से, जगहों के कलेक्शन को सूची में दिखाता है.

Advanced Place List Element में, बेहतर सुविधाएं मिलती हैं. इनमें, कार्रवाई के बटन को पसंद के मुताबिक बनाना, जगह के एट्रिब्यूशन को कॉन्फ़िगर करना, और गड़बड़ियों को ठीक करना शामिल है.

बुनियादी इस्तेमाल

इस कॉम्पोनेंट का इस्तेमाल करने के लिए, अपने पेज में <gmp-advanced-place-list> एलिमेंट जोड़ें. इसके बाद, जगह के संसाधन के नामों की कॉमा लगाकर अलग की गई लिस्ट places एट्रिब्यूट के ज़रिए पास करें.

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

ऐडवांस सुविधाएं

कार्रवाई के बटन को पसंद के मुताबिक बनाना

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

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <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-list>

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

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

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <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-list>

गड़बड़ियों को ठीक करना

gmp-error इवेंट को सुनकर, उन स्थितियों को आसानी से हैंडल किया जा सकता है जिनमें अनुरोध की गई एक या उससे ज़्यादा जगहों को लोड नहीं किया जा सका.

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});