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

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

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

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

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

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

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

<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-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 चाइल्ड एलिमेंट होता है. यह जगह का ऑब्जेक्ट, जगह का आईडी या 'places/{place_id}' फ़ॉर्मैट में जगह का संसाधन नाम हो सकता है: 

<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 mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();
index.js

सीएसएस

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

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

#map-container {
    box-sizing: border-box;
    width: 100%;
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);
  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

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>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <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