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

PlaceDetailsElement एक एचटीएमएल एलिमेंट है, जो किसी जगह की जानकारी दिखाता है. gmp-place-details एलिमेंट को कॉन्फ़िगर करने के लिए, दो तरीके इस्तेमाल किए जाते हैं:

  • configureFromPlace तरीका, जगह की जानकारी वाले एलिमेंट को जगह के आईडी या Place ऑब्जेक्ट के आधार पर रेंडर करता है.
  • configureFromLocation तरीका, अक्षांश और देशांतर निर्देशांक के आधार पर, जगह की जानकारी वाले एलिमेंट को रेंडर करता है.

इस पेज पर दिए गए उदाहरण में, मैप पर क्लिक करने पर, जगह की जानकारी वाला एलिमेंट रेंडर होता है. मैप में जगह की जानकारी जोड़ने के लिए, एचटीएमएल पेज में gmp-place-details एलिमेंट जोड़ें. इसके साइज़ और पोज़िशन को सेट करने के लिए, size और slot एट्रिब्यूट का इस्तेमाल करें. नीचे दिए गए उदाहरण में, इसे gmp-map एलिमेंट में नेस्ट किया गया है. इसमें size को medium पर और slot को control-inline-start-block-start पर सेट किया गया है. 

<gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
  <gmp-place-details
    size="medium"
    slot="control-inline-start-block-start"></gmp-place-details>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

इंटरैक्शन के लिए हर पेज एलिमेंट को चुनने के लिए, querySelector का इस्तेमाल किया जाता है:

const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');

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

// Add an event listener to handle map clicks.
map.innerMap.addListener('click', async (event) => {
  marker.position = null;
  event.stop();
  if (event.placeId) {
    // The user clicked a point on the map that has a Place ID (for example a
    // POI).
    await placeDetails.configureFromPlace({id: event.placeId});
  } else {
    // The user clicked an area of the map with no Place ID.
    await placeDetails.configureFromLocation(event.latLng);
  }
  // Show the marker at the selected place.
  marker.position = placeDetails.place.location;
  marker.style.display = 'block';
});

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

JavaScript

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
  // Import the needed libraries.
  await google.maps.importLibrary('places');
  await google.maps.importLibrary('marker');

  // Calls the geolocation helper function to center the map on the current
  // device location.
  findCurrentLocation();

  // Hide the map type control.
  map.innerMap.setOptions({mapTypeControl: false});

  // Add an event listener to handle map clicks.
  map.innerMap.addListener('click', async (event) => {
    marker.position = null;
    event.stop();
    if (event.placeId) {
      // Fire when the user clicks a POI.
      await placeDetails.configureFromPlace({id: event.placeId});
    } else {
      // Fire when the user clicks the map (not on a POI).
      await placeDetails.configureFromLocation(event.latLng);
    }
    // Show the marker at the selected place.
    marker.position = placeDetails.place.location;
    marker.style.display = 'block';
  });
}

// Helper function for geolocation.
async function findCurrentLocation() {
  const {LatLng} = await google.maps.importLibrary('core');
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos =
              new LatLng(position.coords.latitude, position.coords.longitude);
          map.innerMap.panTo(pos);
          map.innerMap.setZoom(16);
        },
        () => {
          console.log('The Geolocation service failed.');
          map.innerMap.setZoom(16);
        },
    );
  } else {
    console.log('Your browser doesn\'t support geolocation');
    map.innerMap.setZoom(16);
  }
}

init();

सीएसएस

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

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

gmp-map {
  box-sizing: border-box;
  padding: 0 20px 20px;
  width: 100%;
}

gmp-place-details {
  background-color: #fff;
  border-radius: 8px;
  margin: 20px;
  width: 400px;
}


gmp-advanced-marker {
    display: none;
}

एचटीएमएल

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Click on the map to view place details</h1>
    <gmp-map center="-37.813,144.963" zoom="2" map-id="DEMO_MAP_ID">
      <gmp-place-details
        size="large"
        slot="control-inline-start-block-start"></gmp-place-details>
      <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <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: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>