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 দেখুন।
স্থান অনুরোধ উপাদান কনফিগার করুন
যখন ব্যবহারকারী একটি ভবিষ্যদ্বাণী নির্বাচন করে তখন প্লেস রিকোয়েস্ট উপাদান আপডেট করতে একজন শ্রোতা যোগ করুন:
// 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); 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; });
এই উদাহরণটি আপনাকে দেখায় কিভাবে একটি Google মানচিত্রে একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করতে হয়।
জাভাস্ক্রিপ্ট
const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete'); const placeDetailsElement = document.querySelector('gmp-place-details-compact'); const placeDetailsParent = placeDetailsElement.parentElement; const mapDiv = document.getElementById('map-container'); const center = { lat: 40.749933, lng: -73.98633 }; // New York City 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 { Map, InfoWindow } = await google.maps.importLibrary('maps'); // Set the initial location bias for the autocomplete element. placeAutocompleteElement.locationBias = center; // Create the map object with specified options. const map = new Map(mapDiv, { zoom: 12, center: center, mapId: 'DEMO_MAP_ID', clickableIcons: false, mapTypeControl: false, streetViewControl: false, }); // Create an advanced marker to show the location of a selected place. const advancedMarkerElement = new AdvancedMarkerElement({ map: map, }); // Create an InfoWindow to hold the place details component. const infoWindow = new InfoWindow({ minWidth: 360, disableAutoPan: true, closeButton: false, 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); 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); placeDetailsElement.focus(); }); // 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();
সিএসএস
html, body { height: 100%; margin: 0; padding: 0; } #map-container { height: 100%; } gmp-basic-place-autocomplete { position: absolute; height: 50px; width: 500px; 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; min-width: 300px; max-height: 300px; border: none; background-color: #ffffff; color-scheme: light; }
এইচটিএমএল
<html>
<head>
<title>Basic 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"></div>
<gmp-basic-place-autocomplete
slot="control-inline-start-block-start"
></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-standard-content></gmp-place-standard-content>
</gmp-place-details-compact>
<!-- 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>