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

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটি PlaceAutocompleteElement এর চেয়ে প্রয়োগ করা সহজ, এবং এটি নিম্নলিখিত উপায়ে পৃথক:

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

পূর্বশর্ত

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

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

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

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

একটি ওয়েব পৃষ্ঠায় 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);

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

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

<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
  <gmp-basic-place-autocomplete
    slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>
index.html

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

ডিফল্টরূপে, বেসিক প্লেস স্বয়ংসম্পূর্ণ সমস্ত স্থান প্রকার উপস্থাপন করে, ব্যবহারকারীর অবস্থানের কাছাকাছি ভবিষ্যদ্বাণীর জন্য পক্ষপাতদুষ্ট। ফলাফল সীমাবদ্ধ করে বা পক্ষপাতদুষ্ট করে আরো প্রাসঙ্গিক ভবিষ্যদ্বাণী উপস্থাপন করতে 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 দেখুন।

স্থান অনুরোধ উপাদান কনফিগার করুন

যখন ব্যবহারকারী একটি ভবিষ্যদ্বাণী নির্বাচন করে তখন প্লেস রিকোয়েস্ট উপাদান আপডেট করতে একজন শ্রোতা যোগ করুন:

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();
    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});
index.js

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

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

const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');
async function initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
        collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new google.maps.Size(0, -10),
    });
    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();
        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place.location;
        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });
    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });
    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();
        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters.
        });
    });
}
initMap();
index.js

সিএসএস 

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

gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 30px;
  width: 500px;
  top: 10px;
  left: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  color-scheme: light;
  border-radius: 10px;
}
style.css

এইচটিএমএল 

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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>
  </head>
  <body>
    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
      <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
    </gmp-map>
    <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
    <gmp-place-details-compact
      orientation="horizontal"
      style="width: 400px;
      display: none;
      border: none;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color-scheme: light;">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>
  </body>
</html>
index.html

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