স্থান বিবরণ উপাদান

PlaceDetailsElement হল একটি HTML উপাদান যা একটি স্থানের বিবরণ প্রদান করে। gmp-place-details উপাদান কনফিগার করার জন্য দুটি পদ্ধতি ব্যবহার করা হয়:

  • configureFromPlace পদ্ধতি একটি স্থান আইডি বা একটি Place বস্তুর উপর ভিত্তি করে স্থান বিবরণ উপাদান রেন্ডার করে।
  • configureFromLocation পদ্ধতিটি অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের উপর ভিত্তি করে স্থানের বিবরণ উপাদান রেন্ডার করে।

এই পৃষ্ঠার উদাহরণটি স্থানের বিবরণ উপাদানটিকে রেন্ডার করে যখন ব্যবহারকারী মানচিত্রে ক্লিক করে। একটি মানচিত্রে স্থানের বিবরণ যোগ করতে, HTML পৃষ্ঠায় একটি 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';
});

সম্পূর্ণ কোড উদাহরণ দেখুন

জাভাস্ক্রিপ্ট 

/**
 * @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>