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

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

प्लैटफ़ॉर्म चुनें: 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">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>index.html

<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-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-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-media lightbox-preferred></gmp-place-media>
        <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('maps'));
    (await google.maps.importLibrary('marker'));
    (await 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) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            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';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();index.js

सीएसएस

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%;
}

h1 {
    font-size: 16px;
    text-align: center;
}

gmp-map {
    height: 500px;
}

gmp-place-details {
    border-radius: 0px;
    margin: 20px;
    width: 400px;
    height: 500px;
    margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
    min-width: 400px;
    overflow-y: none;
    overflow-x: none;
}style.css

एचटीएमएल

<!doctype html>
<html>
    <head>
        <title>Click on the map to view place details</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
            <gmp-advanced-marker></gmp-advanced-marker>
        </gmp-map>
        <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>
        <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>
    </body>
</html>index.html

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

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

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

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

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <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>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

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

आसानी के लिए, 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 एलिमेंट, एलिमेंट के रंग और फ़ॉन्ट को कॉन्फ़िगर करने के लिए, कई कस्टम सीएसएस प्रॉपर्टी के साथ काम करता है. ज़्यादा जानकारी के लिए, जगहों की जानकारी देने वाली यूआई किट की कस्टम स्टाइलिंग देखें.

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

इस उदाहरण में, 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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
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;
}style.css

एचटीएमएल

<!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" 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>
        <!--
        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>index.html