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

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

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

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

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

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

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

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

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

        <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 एलिमेंट का इस्तेमाल, फ़ोटो का सोर्स दिखाने के लिए किया जाता है. The light-scheme-color और dark-scheme-color एट्रिब्यूट का इस्तेमाल, लाइट और डार्क मोड में एट्रिब्यूशन टेक्स्ट का रंग सेट करने के लिए किया जाता है.

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

आसानी के लिए, gmp-place-content-config एलिमेंट को gmp-place-all-content से बदला जा सकता है. इससे Place Details एलिमेंट में मौजूद सभी जानकारी दिखती है. इसके अलावा, इसे 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 init() {
    // 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?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && 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';
        }
    });
}

void init();

CSS

/* 
 * 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;
}

HTML

<!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"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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>

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

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

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

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

  <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-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>

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

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

आसानी के लिए, gmp-place-content-config एलिमेंट को gmp-place-all-content से बदला जा सकता है. इससे Place Details कॉम्पैक्ट एलिमेंट में मौजूद सभी जानकारी दिखती है. इसके अलावा, इसे with 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>

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

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * 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;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow 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>
            <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>
        </gmp-place-details-compact>
    </body>
</html>