মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদান

BasicPlaceAutocompleteElement একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, একটি UI পিক তালিকায় স্থানের পূর্বাভাস সরবরাহ করে এবং নির্বাচিত স্থানের জন্য একটি স্থান আইডি প্রদান করে।

PlaceAutocompleteElement এর বিপরীতে, সরলীকৃত বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটি ইনপুট ক্ষেত্রটি সাফ করে যখন একজন ব্যবহারকারী একটি স্থানের পূর্বাভাস নির্বাচন করে, এবং এটি এমন একটি স্থান অবজেক্টও ফেরত দেয় যেখানে একটি স্থানের PlacePrediction বস্তুর পরিবর্তে শুধুমাত্র স্থান আইডি থাকে। স্থানের অতিরিক্ত বিশদ বিবরণ পেতে একটি Places UI কিট বিবরণ উপাদানের সাথে এই স্থান আইডি ব্যবহার করুন।

পূর্বশর্ত

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটি ব্যবহার করতে, আপনাকে অবশ্যই আপনার Google ক্লাউড প্রকল্পে "Places UI Kit" সক্ষম করতে হবে৷ বিস্তারিত জানার জন্য শুরু করুন দেখুন।

একটি মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদান যোগ করুন

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটি একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, একটি UI পিক তালিকায় স্থানের পূর্বাভাস সরবরাহ করে এবং gmp-select ইভেন্ট ব্যবহার করে ব্যবহারকারী নির্বাচনের প্রতিক্রিয়া হিসাবে একটি স্থান আইডি প্রদান করে। এই বিভাগটি আপনাকে দেখায় কিভাবে একটি ওয়েব পৃষ্ঠা বা মানচিত্রে একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করতে হয়।

একটি ওয়েব পৃষ্ঠায় একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করুন

একটি ওয়েব পৃষ্ঠায় BasicAutocomplete উপাদান যোগ করতে, একটি নতুন google.maps.places.BasicPlaceAutocompleteElement তৈরি করুন এবং নিম্নলিখিত উদাহরণে দেখানো পৃষ্ঠায় এটি যুক্ত করুন:

  // Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

একটি মানচিত্রে একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করুন

একটি মানচিত্রে একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করতে, একটি নতুন BasicPlaceAutocompleteElement দৃষ্টান্ত তৈরি করুন, এটি একটি div এ যুক্ত করুন এবং এটিকে একটি কাস্টম নিয়ন্ত্রণ হিসাবে মানচিত্রে পুশ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

স্বয়ংসম্পূর্ণ পূর্বাভাস সীমাবদ্ধ করুন

ডিফল্টরূপে, বেসিক প্লেস স্বয়ংসম্পূর্ণ সমস্ত স্থান প্রকার উপস্থাপন করে, ব্যবহারকারীর অবস্থানের কাছাকাছি ভবিষ্যদ্বাণীর জন্য পক্ষপাতদুষ্ট। ফলাফল সীমাবদ্ধ করে বা পক্ষপাতদুষ্ট করে আরো প্রাসঙ্গিক পূর্বাভাস উপস্থাপন করতে BasicPlaceAutocompleteElementOptions সেট করুন।

ফলাফল সীমাবদ্ধ করার ফলে বেসিক স্বয়ংসম্পূর্ণ উপাদান সীমাবদ্ধতার এলাকার বাইরের যেকোনো ফলাফলকে উপেক্ষা করে। একটি সাধারণ অভ্যাস হল ফলাফলগুলিকে মানচিত্রের সীমানায় সীমাবদ্ধ করা। বায়াসিং ফলাফলগুলি বেসিকঅটোকম্পলিট উপাদানকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখায়, কিন্তু কিছু মিল সেই এলাকার বাইরে হতে পারে।

আপনি যদি কোনো সীমানা বা একটি মানচিত্র ভিউপোর্ট সরবরাহ না করেন, API তাদের IP ঠিকানা থেকে ব্যবহারকারীর অবস্থান সনাক্ত করার চেষ্টা করবে এবং ফলাফলগুলিকে সেই অবস্থানে পক্ষপাতিত্ব করবে৷ যখনই সম্ভব সীমা নির্ধারণ করুন। অন্যথায়, বিভিন্ন ব্যবহারকারী বিভিন্ন ভবিষ্যদ্বাণী পেতে পারে। এছাড়াও, সাধারণভাবে ভবিষ্যদ্বাণীগুলি উন্নত করার জন্য একটি বুদ্ধিমান ভিউপোর্ট প্রদান করা গুরুত্বপূর্ণ, যেমন আপনি ম্যাপে প্যানিং বা জুম করে সেট করেছেন বা ডিভাইসের অবস্থান এবং ব্যাসার্ধের উপর ভিত্তি করে একটি বিকাশকারী-সেট ভিউপোর্ট। যখন একটি ব্যাসার্ধ উপলব্ধ না হয়, তখন 5km কে মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদানের জন্য একটি সংবেদনশীল ডিফল্ট হিসাবে বিবেচনা করা হয়। শূন্য ব্যাসার্ধ (একটি একক বিন্দু), একটি ভিউপোর্ট যা মাত্র কয়েক মিটার জুড়ে (100 মিটারের কম।) বা বিশ্বজুড়ে বিস্তৃত একটি ভিউপোর্ট সেট করবেন না।

দেশ অনুসারে স্থান অনুসন্ধান সীমাবদ্ধ করুন

স্থান অনুসন্ধান এক বা একাধিক নির্দিষ্ট দেশে সীমাবদ্ধ করতে, নিম্নলিখিত স্নিপেটে দেখানো দেশের কোড(গুলি) নির্দিষ্ট করতে includedRegionCodes কোড বৈশিষ্ট্য ব্যবহার করুন:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

স্থান অনুসন্ধান ম্যাপ সীমানা সীমাবদ্ধ

স্থান অনুসন্ধানকে মানচিত্রের সীমানায় সীমাবদ্ধ করতে, সীমানা যোগ করতে locationRestrictions বৈশিষ্ট্যটি ব্যবহার করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

মানচিত্রের সীমানাগুলিতে সীমাবদ্ধ করার সময়, সীমাগুলি পরিবর্তন করার সময় আপডেট করার জন্য একজন শ্রোতাকে যুক্ত করতে ভুলবেন না:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

locationRestriction অপসারণ করতে, এটি null এ সেট করুন।

পক্ষপাত স্থান অনুসন্ধান ফলাফল

বায়াস locationBias প্রপার্টি ব্যবহার করে এবং একটি ব্যাসার্ধ অতিক্রম করে সার্চের ফলাফলকে একটি বৃত্ত এলাকায় স্থাপন করে, যেমনটি এখানে দেখানো হয়েছে:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

locationBias অপসারণ করতে, এটি null সেট করুন।

নির্দিষ্ট ধরনের স্থান অনুসন্ধান ফলাফল সীমাবদ্ধ

includedPrimaryTypes প্রপার্টি ব্যবহার করে এবং এক বা একাধিক প্রকার নির্দিষ্ট করে নির্দিষ্ট ধরণের জায়গায় স্থান অনুসন্ধানের ফলাফল সীমাবদ্ধ করুন, যেমনটি এখানে দেখানো হয়েছে:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

সমর্থিত প্রকারের একটি সম্পূর্ণ তালিকার জন্য, প্লেস টাইপ টেবিল A এবং B দেখুন।

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

নির্বাচিত স্থানের জন্য স্থান আইডি পেতে, PlaceAutocompleteElement এ একটি gmp-select শ্রোতা যোগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

// Add the gmp-select listener, and display the results.
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      selectedPlaceTitle.textContent = 'Selected Place:';
      selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
  });

পূর্ববর্তী উদাহরণে, ইভেন্ট শ্রোতা প্লেস ক্লাসের একটি বস্তু ফেরত দেয়। আপনার আবেদনের জন্য প্রয়োজনীয় স্থানের বিবরণ ডেটা ক্ষেত্র পেতে place.fetchFields() এ কল করুন।

পরবর্তী উদাহরণে শ্রোতা স্থানের তথ্যের জন্য অনুরোধ করে এবং এটি একটি মানচিত্রে প্রদর্শন করে।

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });

এই উদাহরণটি আপনাকে দেখায় কিভাবে একটি Google মানচিত্রে একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করতে হয়।

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

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

সিএসএস 

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

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

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

এইচটিএমএল 

<html>
  <head>
    <title>Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

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

নমুনা চেষ্টা করুন