এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

এই পণ্য বা বৈশিষ্ট্যটি পরীক্ষামূলক (প্রি-GA)। প্রাক-GA পণ্য এবং বৈশিষ্ট্যগুলির সীমিত সমর্থন থাকতে পারে এবং প্রাক-GA পণ্য এবং বৈশিষ্ট্যগুলির পরিবর্তনগুলি অন্যান্য প্রাক-GA সংস্করণগুলির সাথে সামঞ্জস্যপূর্ণ নাও হতে পারে। প্রাক-GA অফারগুলি Google মানচিত্র প্ল্যাটফর্ম পরিষেবার নির্দিষ্ট শর্তাবলী দ্বারা আচ্ছাদিত। আরও তথ্যের জন্য, লঞ্চ পর্যায়ের বিবরণ দেখুন।

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

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

টিপ: প্লেস UI কিট দ্বারা প্রত্যাবর্তিত Place অবজেক্টে শুধুমাত্র রেন্ডার করা জায়গার প্লেস আইডি, অবস্থান এবং ভিউপোর্ট থাকে। আপনি যদি আপনার প্রকল্পের জন্য Places API সক্ষম করে থাকেন, তাহলে আপনি সেই স্থানে place.fetchFields() এ কল করে আরও তথ্য পেতে পারেন।

এই পৃষ্ঠার উদাহরণটি স্থানের বিবরণ উপাদানটিকে রেন্ডার করে যখন ব্যবহারকারী মানচিত্রে ক্লিক করে। একটি মানচিত্রে স্থানের বিবরণ যোগ করতে, HTML পৃষ্ঠায় একটি gmp-place-details উপাদান যোগ করুন। যথাক্রমে size এবং slot বৈশিষ্ট্য ব্যবহার করে এর আকার এবং অবস্থান সেট করুন। নিম্নলিখিত উদাহরণে, এটি একটি gmp-map উপাদানের মধ্যে নেস্ট করা হয়েছে যার size medium সেট করা হয়েছে এবং slot control-inline-start-block-start সেট করা হয়েছে।

<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 size="x-large"></gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>index.html

ইন্টারঅ্যাকশনের জন্য প্রতিটি পৃষ্ঠা উপাদান নির্বাচন করতে একটি querySelector ব্যবহার করা হয়:

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

নিম্নলিখিত স্নিপেটে ইভেন্ট হ্যান্ডলার ব্যবহারকারীর মানচিত্রের ক্লিকের অবস্থানের উপর ভিত্তি করে স্থানের বিবরণ উপাদান রেন্ডার করে:

// 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);
        }
        // Get the offset center.
        let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
        // Show the marker at the selected place.
        marker.position = placeDetails.place.location;
        marker.style.display = 'block';
        map.innerMap.panTo(adjustedCenter);
    });
}index.js

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

টাইপস্ক্রিপ্ট

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map') as any;
const placeDetails = document.querySelector('gmp-place-details') as any;
const marker = document.querySelector('gmp-advanced-marker') as any;

let center = { lat: 47.759737, lng: -122.250632 };

async function initMap(): Promise<void> {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
  const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;

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

  // Set the default selection.
  const place = new Place({
    id: "ChIJC8HakaIRkFQRiOgkgdHmqkk",
    requestedLanguage: "en", // optional
  });
  await placeDetails.configureFromPlace(place);
  let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
  map.innerMap.panTo(adjustedCenter);
  map.innerMap.setZoom(16);
  marker.position = placeDetails.place.location;
  marker.style.display = 'block';
  marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;

  // 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);
    }
    // Get the offset center.
    let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);

    // Show the marker at the selected place.
    marker.position = placeDetails.place.location;
    marker.style.display = 'block';
    map.innerMap.panTo(adjustedCenter);
  });
}

// Helper function to offset the map center.
function offsetLatLngRight(latLng, longitudeOffset) {
  const newLng = latLng.lng() + longitudeOffset;
  return new google.maps.LatLng(latLng.lat(), newLng);
}

initMap();index.ts

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

// 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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    const { Place } = await google.maps.importLibrary("places");
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Set the default selection.
    const place = new Place({
        id: "ChIJC8HakaIRkFQRiOgkgdHmqkk",
        requestedLanguage: "en", // optional
    });
    await placeDetails.configureFromPlace(place);
    let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
    map.innerMap.panTo(adjustedCenter);
    map.innerMap.setZoom(16);
    marker.position = placeDetails.place.location;
    marker.style.display = 'block';
    marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
    // 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);
        }
        // Get the offset center.
        let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
        // Show the marker at the selected place.
        marker.position = placeDetails.place.location;
        marker.style.display = 'block';
        map.innerMap.panTo(adjustedCenter);
    });
}
// Helper function to offset the map center.
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 {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
}

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

gmp-map {
  height: 400px;
}

gmp-place-details {
  background-color: #fff;
  border-radius: 8px;
  margin: 20px;
  width: 400px;
  padding: 12px;
  margin-top: 10px;
  overflow-y: auto;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  height: 400px;
  width: 457px; 
  overflow-y: auto;
  overflow-x: hidden;
}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">
      <div class="widget-container" slot="control-inline-start-block-start">
        <gmp-place-details size="x-large"></gmp-place-details>
      </div>
      <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha"});</script>
  </body>
</html>index.html