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

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

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

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

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

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

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

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

        <gmp-place-details>
            <gmp-place-details-place-request
                place="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-details>

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

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

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

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

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

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

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

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

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

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();

सीएसएस

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

एचटीएमएल

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

Place Details Compact Element

मैप पर किसी मार्कर पर क्लिक करके, Place Details Compact Element में उस जगह की जानकारी देखें.

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

यहां दिए गए स्निपेट में, gmp-place-details-compact को कॉन्फ़िगर किया गया है. इसमें orientation को horizontal पर सेट किया गया है. एक अतिरिक्त एट्रिब्यूट, truncation-preferred, कुछ कॉन्टेंट को रैप करने के बजाय, एक लाइन में फ़िट करने के लिए छोटा कर देता है. gmp-place-details-compact एलिमेंट में एक चाइल्ड एलिमेंट, gmp-place-details-place-request होता है. इसका इस्तेमाल जगह चुनने के लिए किया जाता है. यह कोई 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-details-compact एलिमेंट से दिखाए जाने वाले जगह के कॉन्टेंट को कंट्रोल किया जा सकता है. इसके लिए, चाइल्ड एलिमेंट को नेस्ट करके, जगह की जानकारी को चुनें और कॉन्फ़िगर करें. इसके बारे में इस स्निपेट में बताया गया है: 

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-details-compact>

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

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

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

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

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

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

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

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

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

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

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

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();

सीएसएस

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

एचटीएमएल

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