जगह की ज़्यादा जानकारी देने वाले एलिमेंट (प्रीव्यू)

जगह की ज़्यादा जानकारी देने वाला एलिमेंट और जगह की ज़्यादा जानकारी देने वाला कॉम्पैक्ट एलिमेंट, एचटीएमएल एलिमेंट होते हैं. इनकी मदद से, किसी जगह के बारे में जानकारी दिखाई जाती है:

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

कस्टमाइज़ेशन टूल का इस्तेमाल करके, यह देखा जा सकता है कि प्रॉपर्टी के अलग-अलग सेट, जगह की जानकारी देने वाले एलिमेंट के दिखने के तरीके पर कैसे असर डालेंगे. साथ ही, एचटीएमएल/सीएसएस, Kotlin/XML, और Swift में कोड ऐक्सेस किया जा सकता है.

जगह की ज़्यादा जानकारी देने वाला एलिमेंट (झलक)

जगह की ज़्यादा जानकारी देने वाले एलिमेंट में, किसी जगह की जानकारी देखने के लिए, मैप पर मौजूद मार्कर पर क्लिक करें.

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

मैप पर जगह की जानकारी दिखाने के लिए, एचटीएमएल पेज पर मौजूद gmp-map एलिमेंट में, gmp-advanced-place-details एलिमेंट जोड़ें. जगह चुनने के लिए, चाइल्ड एलिमेंट gmp-place-details-place-request, शामिल करें. यह जगह का ऑब्जेक्ट, जगह का आईडी या जगह का रिसॉर्स नेम हो सकता है: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

कॉन्टेंट कॉन्फ़िगर करना

चाइल्ड एलिमेंट को नेस्ट करके, gmp-advanced-place-details एलिमेंट से दिखने वाले, किसी जगह के कॉन्टेंट को कंट्रोल किया जा सकता है. इससे, जगह की जानकारी को चुना और कॉन्फ़िगर किया जा सकता है. इस उदाहरण में, यह तरीका दिखाया गया है: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

हर चाइल्ड कॉन्टेंट एलिमेंट, दिखाने के लिए जगह की जानकारी का कोई एलिमेंट चुनता है: gmp-place-address एलिमेंट, जगह का पता चुनता है, gmp-place-price एलिमेंट, जगह का कीमत लेवल चुनता है वगैरह. gmp-place-summary और gmp-place-review-summary एलिमेंट, एआई की मदद से जगह और उसकी समीक्षाओं की खास जानकारी देते हैं. चाइल्ड एलिमेंट का क्रम मायने नहीं रखता, क्योंकि चुनी गई जानकारी हमेशा पहले से तय क्रम में दिखती है.

कॉन्टेंट के हिसाब से तय किए गए एट्रिब्यूट का इस्तेमाल करके, इनमें से कुछ एलिमेंट को और कॉन्फ़िगर किया जा सकता है:

  • gmp-place-media एलिमेंट का इस्तेमाल, एक फ़ोटो दिखाने के लिए किया जाता है. इसमें lightbox-preferred एट्रिब्यूट शामिल होता है. इस एट्रिब्यूट की मदद से, फ़ोटो पर क्लिक करने पर वह लाइटबॉक्स में खुलती है. लाइटबॉक्स की सुविधा डिफ़ॉल्ट रूप से बंद होती है.
  • The gmp-place-attribution एलिमेंट का इस्तेमाल, Maps API के डेटा एट्रिब्यूशन के सामान्य कॉन्फ़िगरेशन दिखाने के लिए किया जाता है. जैसे, किसी फ़ोटो या समीक्षा का सोर्स. The light-scheme-color और dark-scheme-color एट्रिब्यूट का इस्तेमाल, लाइट और डार्क मोड में एट्रिब्यूशन टेक्स्ट का रंग सेट करने के लिए किया जाता है.

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

आसानी के लिए, gmp-place-all-content का इस्तेमाल करके, जगह की ज़्यादा जानकारी देने वाले एलिमेंट में मौजूद सभी जानकारी दिखाई जा सकती है. इसके अलावा, gmp-place-standard-content का इस्तेमाल करके, स्टैंडर्ड कॉन्फ़िगरेशन दिखाया जा सकता है.

दिखने का तरीका कॉन्फ़िगर करना

gmp-advanced-place-details एलिमेंट के लिए, चौड़ाई की सुझाई गई सीमा 250 पिक्सल से 400 पिक्सल है. 250 पिक्सल से कम चौड़ाई में, एलिमेंट सही तरीके से नहीं दिख सकता. अपने ऐप्लिकेशन के हिसाब से ऊंचाई सेट करें. जगह की ज़्यादा जानकारी देने वाले एलिमेंट को, ज़रूरत के हिसाब से तय की गई जगह में स्क्रोल करने के लिए डिज़ाइन किया गया है.

gmp-advanced-place-details एलिमेंट में, एलिमेंट के रंग और फ़ॉन्ट कॉन्फ़िगर करने के लिए, सीएसएस की कई कस्टम प्रॉपर्टी भी इस्तेमाल की जा सकती हैं. ज़्यादा जानकारी के लिए, जगहों की जानकारी देने वाली यूआई किट की कस्टम स्टाइलिंग देखें.

जगह की ज़्यादा जानकारी देने वाला कॉम्पैक्ट एलिमेंट (झलक)

जगह की ज़्यादा जानकारी देने वाले कॉम्पैक्ट एलिमेंट में, किसी जगह की जानकारी देखने के लिए, मैप पर मौजूद मार्कर पर क्लिक करें.

AdvancedPlaceDetailsCompactElement में, चुनी गई जगह के बारे में कम जगह में जानकारी दिखाई जाती है. यह जानकारी, किसी जगह को हाइलाइट करने वाली जानकारी वाली विंडो में, सोशल मीडिया पर चैट में जगह शेयर करने जैसे अनुभव में, अपनी मौजूदा जगह चुनने के सुझाव के तौर पर या Google Maps पर जगह का रेफ़रंस देने के लिए, मीडिया लेख में काम आ सकती है. The AdvancedPlaceDetailsCompactElement में, नाम, पता, रेटिंग, टाइप, कीमत, ऐक्सेस करने की सुविधा का आइकॉन, खुले होने की स्थिति, और एक फ़ोटो दिखाई जा सकती है. इसे हॉरिज़ॉन्टल या वर्टिकल तरीके से दिखाया जा सकता है, जैसा कि orientation एट्रिब्यूट के हिसाब से चुना गया है.

यहां दिए गए स्निपेट में, gmp-advanced-place-details-compact को orientation को horizontal पर सेट करके कॉन्फ़िगर किया गया है. एक अतिरिक्त एट्रिब्यूट, truncation-preferred, कुछ कॉन्टेंट को रैप करने के बजाय, एक लाइन में दिखाने के लिए ट्रंकेट करता है. gmp-advanced-place-details-compact एलिमेंट में, चाइल्ड एलिमेंट gmp-place-details-place-request शामिल होता है. इसकी मदद से, जगह को चुना जा सकता है. यह जगह का ऑब्जेक्ट, जगह का आईडी या जगह का रिसॉर्स नेम हो सकता है. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

कॉन्टेंट कॉन्फ़िगर करना

चाइल्ड एलिमेंट को नेस्ट करके, gmp-advanced-place-details-compact एलिमेंट से दिखने वाले, किसी जगह के कॉन्टेंट को कंट्रोल किया जा सकता है. इससे, जगह की जानकारी को चुना और कॉन्फ़िगर किया जा सकता है. इस स्निपेट में, यह तरीका दिखाया गया है: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

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

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

आसानी के लिए, gmp-place-all-content का इस्तेमाल करके, जगह की ज़्यादा जानकारी देने वाले कॉम्पैक्ट एलिमेंट में मौजूद सभी जानकारी दिखाई जा सकती है. इसके अलावा, gmp-place-standard-content का इस्तेमाल करके, स्टैंडर्ड कॉन्फ़िगरेशन दिखाया जा सकता है.

दिखने का तरीका कॉन्फ़िगर करना

वर्टिकल ओरिएंटेशन में, gmp-advanced-place-details-compact एलिमेंट के लिए, चौड़ाई की सुझाई गई सीमा 180 पिक्सल से 300 पिक्सल है. 160 पिक्सल से कम चौड़ाई में, एलिमेंट सही तरीके से नहीं दिख सकता. ऊंचाई को तय न करें.

हॉरिज़ॉन्टल स्क्रीन की दिशा में, the gmp-advanced-place-details-compact एलिमेंट के लिए, चौड़ाई की सुझाई गई सीमा 180 पिक्सल से 500 पिक्सल है. 160 पिक्सल से कम चौड़ाई में, एलिमेंट सही तरीके से नहीं दिख सकता. 350 पिक्सल से कम चौड़ाई में, थंबनेल इमेज नहीं दिखेगी. ऊंचाई को तय न करें.

gmp-advanced-place-details-compact एलिमेंट में, एलिमेंट के रंग और फ़ॉन्ट कॉन्फ़िगर करने के लिए, सीएसएस की कई कस्टम प्रॉपर्टी भी इस्तेमाल की जा सकती हैं. ज़्यादा जानकारी के लिए, जगहों की जानकारी देने वाली यूआई किट की कस्टम स्टाइलिंग देखें.

ध्यान दें कि अगर जानकारी वाली विंडो में, जगह की ज़्यादा जानकारी देने वाला कॉम्पैक्ट एलिमेंट जोड़ा जाता है, तो कस्टम स्टाइलिंग सीधे gmp-advanced-place-details-compact एलिमेंट पर लागू की जानी चाहिए. ऐसा इसलिए, क्योंकि जानकारी वाली विंडो, मैप के शैडो DOM का हिस्सा होती है. इसलिए, बाहरी सीएसएस स्टाइल लागू नहीं होंगी. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

इस उदाहरण में, AdvancedPlaceDetailsCompactElement और InfoWindow का इस्तेमाल करके, प्रोग्राम के ज़रिए मैप में AdvancedMarkerElement जोड़ने का तरीका दिखाया गया है.

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

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

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

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

एट्रिब्यूशन के लिए, दिखने के तरीके से जुड़ी ज़रूरी शर्तें

अहम जानकारी: आपको यह साफ़ तौर पर बताना होगा कि कस्टम कार्रवाई का बटन, Google के अलावा किसी तीसरे पक्ष के साथ उपयोगकर्ता की जानकारी कब शेयर करेगा. एट्रिब्यूशन के लिए, दिखने के तरीके से जुड़ी ज़रूरी शर्तें देखें .

जगह का नाम हटाना

जगह का नाम हटाने के लिए, कस्टम कॉन्टेंट से <gmp-place-name> एलिमेंट को साफ़ तौर पर हटाएं. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

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

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

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

JavaScript का इस्तेमाल करके, खोज क्वेरी से मैच करने वाले आइटम की कुल संख्या भी देखी जा सकती है. इसके लिए, searchMediaCount और searchReviewsCount प्रॉपर्टी को पढ़ा जा सकता है. इन प्रॉपर्टी को ऐक्सेस करने से पहले, आपको gmp-load इवेंट का इंतज़ार करना होगा. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});