यूज़र इंटरफ़ेस (यूआई) किट के इस्तेमाल से जुड़ा अपना अनुभव शेयर करें.

जगह की जानकारी वाले एलिमेंट

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

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

जगह की जानकारी देने वाला एलिमेंट

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

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

मैप पर जगह की जानकारी दिखाने के लिए, एचटीएमएल पेज पर मौजूद gmp-map एलिमेंट में gmp-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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-content-config>
        </gmp-place-details>

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

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

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

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

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

थीम को कॉन्फ़िगर करना

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

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

पूरा कोड उदाहरण देखें

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place && placeDetails.place.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}
initMap();index.js

सीएसएस

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}style.css

एचटीएमएल

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js" defer></script>
        <!-- prettier-ignore -->
        <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
              ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>index.html

सैंपल आज़माएं

JSFiddle.net

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

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

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

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

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

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

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

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <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-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>index.html

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

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

थीम को कॉन्फ़िगर करना

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

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

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

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

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>index.html