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

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

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

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

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

পূর্বশর্ত

বেসিক প্লেস অটোকম্পলিট এলিমেন্ট ব্যবহার করতে, আপনার গুগল ক্লাউড প্রোজেক্টে প্লেস 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 ঠিকানা থেকে সনাক্ত করার চেষ্টা করবে এবং ফলাফলগুলিকে সেই অবস্থানের সাথে সংযুক্ত করবে। যখনই সম্ভব সীমানা নির্ধারণ করুন। অন্যথায়, বিভিন্ন ব্যবহারকারী বিভিন্ন পূর্বাভাস পেতে পারেন। এছাড়াও, সাধারণত পূর্বাভাস উন্নত করার জন্য একটি বোধগম্য ভিউপোর্ট প্রদান করা গুরুত্বপূর্ণ, যেমন মানচিত্রে প্যানিং বা জুম করে সেট করা একটি ভিউপোর্ট, অথবা ডিভাইসের অবস্থান এবং ব্যাসার্ধের উপর ভিত্তি করে একটি বিকাশকারী-সেট ভিউপোর্ট। যখন একটি ব্যাসার্ধ উপলব্ধ না থাকে, তখন বেসিক প্লেস অটোকম্পলিট উপাদানের জন্য 5 কিমি একটি বুদ্ধিমান ডিফল্ট হিসাবে বিবেচিত হয়। শূন্য ব্যাসার্ধ (একটি একক বিন্দু), মাত্র কয়েক মিটার জুড়ে একটি ভিউপোর্ট (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 প্রোপার্টি ব্যবহার করে এবং একটি ব্যাসার্ধ অতিক্রম করে, এখানে দেখানো হয়েছে, Bias অনুসন্ধান ফলাফলগুলিকে একটি বৃত্ত এলাকায় স্থাপন করে:

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

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

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

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

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