প্লেস স্বয়ংসম্পূর্ণ উইজেট একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, একটি UI পিক তালিকায় স্থানের পূর্বাভাস সরবরাহ করে এবং ব্যবহারকারীর নির্বাচনের প্রতিক্রিয়া হিসাবে স্থানের বিবরণ প্রদান করে। আপনার ওয়েব পৃষ্ঠায় একটি সম্পূর্ণ স্বয়ংসম্পূর্ণ স্বয়ংসম্পূর্ণ ব্যবহারকারী ইন্টারফেস এম্বেড করতে স্থান স্বয়ংসম্পূর্ণ উইজেট ব্যবহার করুন।
পূর্বশর্ত
স্থান স্বয়ংসম্পূর্ণ ব্যবহার করতে, আপনাকে অবশ্যই আপনার Google ক্লাউড প্রকল্পে "স্থানীয় API (নতুন)" সক্ষম করতে হবে৷ বিস্তারিত জানার জন্য শুরু করুন দেখুন।
নতুন কি
স্থান স্বয়ংসম্পূর্ণ নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:
- স্বয়ংসম্পূর্ণ উইজেট UI পাঠ্য ইনপুট স্থানধারক, পূর্বাভাস তালিকার লোগো এবং স্থানের পূর্বাভাসগুলির জন্য আঞ্চলিক স্থানীয়করণ (RTL ভাষা সহ) সমর্থন করে।
- স্ক্রিন রিডার এবং কীবোর্ড ইন্টারঅ্যাকশনের জন্য সমর্থন সহ উন্নত অ্যাক্সেসযোগ্যতা।
- স্বয়ংসম্পূর্ণ উইজেট প্রত্যাবর্তিত বস্তুর পরিচালনাকে সহজ করার জন্য নতুন প্লেস ক্লাস প্রদান করে।
- মোবাইল ডিভাইস এবং ছোট পর্দার জন্য আরও ভাল সমর্থন।
- উন্নত কর্মক্ষমতা এবং উন্নত গ্রাফিকাল চেহারা।
একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করুন
স্বয়ংসম্পূর্ণ উইজেট একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, একটি UI বাছাই তালিকায় স্থানের পূর্বাভাস সরবরাহ করে এবং gmp-select শ্রোতা ব্যবহার করে ব্যবহারকারীর ক্লিকের প্রতিক্রিয়া হিসাবে স্থানের বিবরণ প্রদান করে। এই বিভাগটি আপনাকে দেখায় কিভাবে একটি ওয়েব পৃষ্ঠা বা একটি Google মানচিত্রে একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করতে হয়।
একটি ওয়েব পৃষ্ঠায় একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করুন
একটি ওয়েব পৃষ্ঠায় স্বয়ংসম্পূর্ণ উইজেট যোগ করতে, একটি নতুন google.maps.places.PlaceAutocompleteElement তৈরি করুন এবং নিম্নলিখিত উদাহরণে দেখানো পৃষ্ঠায় এটি যুক্ত করুন:
টাইপস্ক্রিপ্ট
// Request needed libraries. await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); document.body.appendChild(placeAutocomplete);
জাভাস্ক্রিপ্ট
// Request needed libraries. await google.maps.importLibrary("places"); // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); document.body.appendChild(placeAutocomplete);
একটি মানচিত্রে একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করুন৷
যদি আপনার বিলিং ঠিকানা ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA) এর বাইরে হয়, তাহলে আপনি Google Map সহ স্বয়ংসম্পূর্ণ উইজেটও ব্যবহার করতে পারেন।
একটি মানচিত্রে একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করতে, একটি নতুন google.maps.places.PlaceAutocompleteElement দৃষ্টান্ত তৈরি করুন, একটি div এ PlaceAutocompleteElement যুক্ত করুন এবং এটিকে একটি কাস্টম নিয়ন্ত্রণ হিসাবে মানচিত্রে পুশ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:
টাইপস্ক্রিপ্ট
// Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); });
জাভাস্ক্রিপ্ট
// Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); });
স্বয়ংসম্পূর্ণ পূর্বাভাস সীমাবদ্ধ করুন
ডিফল্টরূপে, স্থান স্বয়ংসম্পূর্ণ সমস্ত স্থান প্রকার উপস্থাপন করে, ব্যবহারকারীর অবস্থানের কাছাকাছি ভবিষ্যদ্বাণীর জন্য পক্ষপাতদুষ্ট, এবং ব্যবহারকারীর নির্বাচিত স্থানের জন্য সমস্ত উপলব্ধ ডেটা ক্ষেত্র নিয়ে আসে। ফলাফল সীমাবদ্ধ করে বা পক্ষপাতদুষ্ট করে আরও প্রাসঙ্গিক পূর্বাভাস উপস্থাপন করতে PlaceAutocompleteElementOptions সেট করুন।
ফলাফল সীমাবদ্ধ করার ফলে স্বয়ংসম্পূর্ণ উইজেট বিধিনিষেধ এলাকার বাইরের যেকোনো ফলাফলকে উপেক্ষা করে। একটি সাধারণ অভ্যাস হল ফলাফলগুলিকে মানচিত্রের সীমানায় সীমাবদ্ধ করা। বায়াসিং ফলাফলগুলি স্বয়ংসম্পূর্ণ উইজেটকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখায়, কিন্তু কিছু মিল সেই এলাকার বাইরে হতে পারে।
আপনি যদি কোনো সীমানা বা একটি মানচিত্র ভিউপোর্ট সরবরাহ না করেন, API তাদের IP ঠিকানা থেকে ব্যবহারকারীর অবস্থান সনাক্ত করার চেষ্টা করবে এবং ফলাফলগুলিকে সেই অবস্থানে পক্ষপাতিত্ব করবে৷ যখনই সম্ভব একটি সীমা নির্ধারণ করুন। অন্যথায়, বিভিন্ন ব্যবহারকারী বিভিন্ন ভবিষ্যদ্বাণী পেতে পারে। এছাড়াও, সাধারণত ভবিষ্যদ্বাণীগুলি উন্নত করার জন্য একটি বুদ্ধিমান ভিউপোর্ট প্রদান করা গুরুত্বপূর্ণ যেমন আপনি ম্যাপে প্যানিং বা জুম করে সেট করেছেন, অথবা ডিভাইসের অবস্থান এবং ব্যাসার্ধের উপর ভিত্তি করে একটি বিকাশকারী-সেট ভিউপোর্ট। যখন একটি ব্যাসার্ধ পাওয়া যায় না, 5 কিমি স্থান স্বয়ংসম্পূর্ণতার জন্য একটি সংবেদনশীল ডিফল্ট হিসাবে বিবেচিত হয়। শূন্য ব্যাসার্ধের (একটি একক বিন্দু), একটি ভিউপোর্ট যা মাত্র কয়েক মিটার জুড়ে (100 মিটারের কম), বা বিশ্বজুড়ে বিস্তৃত একটি ভিউপোর্ট সেট করবেন না।
দেশ অনুসারে স্থান অনুসন্ধান সীমাবদ্ধ করুন
স্থান অনুসন্ধান এক বা একাধিক নির্দিষ্ট দেশে সীমাবদ্ধ করতে, নিম্নলিখিত স্নিপেটে দেখানো দেশের কোড(গুলি) নির্দিষ্ট করতে includedRegionCodes কোড বৈশিষ্ট্য ব্যবহার করুন:
const pac = new google.maps.places.PlaceAutocompleteElement({ includedRegionCodes: ['us', 'au'], });
স্থান অনুসন্ধান ম্যাপ সীমানা সীমাবদ্ধ
স্থান অনুসন্ধানকে মানচিত্রের সীমানায় সীমাবদ্ধ করতে, সীমানা যোগ করতে locationRestrictions বৈশিষ্ট্যটি ব্যবহার করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
মানচিত্রের সীমানাগুলিতে সীমাবদ্ধ করার সময়, সীমাগুলি পরিবর্তন করার সময় আপডেট করার জন্য একজন শ্রোতাকে যুক্ত করতে ভুলবেন না:
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
locationRestriction অপসারণ করতে, এটি null এ সেট করুন।
পক্ষপাত স্থান অনুসন্ধান ফলাফল
বায়াস locationBias প্রপার্টি ব্যবহার করে এবং একটি ব্যাসার্ধ অতিক্রম করে সার্চের ফলাফলকে একটি বৃত্ত এলাকায় স্থাপন করে, যেমনটি এখানে দেখানো হয়েছে:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
locationBias অপসারণ করতে, এটি null সেট করুন।
নির্দিষ্ট ধরনের স্থান অনুসন্ধান ফলাফল সীমাবদ্ধ
includedPrimaryTypes প্রপার্টি ব্যবহার করে এবং এক বা একাধিক প্রকার নির্দিষ্ট করে নির্দিষ্ট ধরণের জায়গায় স্থান অনুসন্ধানের ফলাফল সীমাবদ্ধ করুন, যেমনটি এখানে দেখানো হয়েছে:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ['establishment'], });
সমর্থিত প্রকারের একটি সম্পূর্ণ তালিকার জন্য, প্লেস টাইপ টেবিল A এবং B দেখুন।
স্থান বিবরণ পান
নির্বাচিত স্থানের জন্য স্থানের বিবরণ পেতে, PlaceAutocompleteElement এ একটি gmp-select শ্রোতা যোগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:
টাইপস্ক্রিপ্ট
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); });
জাভাস্ক্রিপ্ট
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); 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 ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } );
জাভাস্ক্রিপ্ট
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; });
উদাহরণ মানচিত্র
এই বিভাগে এই পৃষ্ঠায় বৈশিষ্ট্যযুক্ত উদাহরণ মানচিত্রের জন্য সম্পূর্ণ কোড রয়েছে।
স্বয়ংসম্পূর্ণ উপাদান
এই উদাহরণটি একটি ওয়েব পৃষ্ঠায় একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করে এবং প্রতিটি নির্বাচিত স্থানের জন্য ফলাফল প্রদর্শন করে।
টাইপস্ক্রিপ্ট
async function initMap(): Promise<void> { // Request needed libraries. await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); }); } initMap();
জাভাস্ক্রিপ্ট
async function initMap() { // Request needed libraries. await google.maps.importLibrary("places"); // Create the input HTML element, and append it. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2); }); } initMap();
সিএসএস
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } p { font-family: Roboto, sans-serif; font-weight: bold; }
এইচটিএমএল
<html>
<head>
<title>Place Autocomplete element</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<p style="font-family: roboto, sans-serif">Search for a place here:</p>
<!-- 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>নমুনা চেষ্টা করুন
স্বয়ংসম্পূর্ণ মানচিত্র
এই উদাহরণটি আপনাকে দেখায় কিভাবে একটি Google মানচিত্রে একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করতে হয়।
টাইপস্ক্রিপ্ট
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; const placeAutocomplete = document.querySelector( 'gmp-place-autocomplete' ) as google.maps.places.PlaceAutocompleteElement; let innerMap; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap(): Promise<void> { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('places'), ]); // Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker and infowindow. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; } ); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map: innerMap, anchor: marker, shouldFocus: false, }); } initMap();
জাভাস্ক্রিপ্ট
const mapElement = document.querySelector('gmp-map'); const placeAutocomplete = document.querySelector('gmp-place-autocomplete'); let innerMap; let marker; let infoWindow; let center = { lat: 40.749933, lng: -73.98633 }; // New York City async function initMap() { // Request needed libraries. const [] = await Promise.all([ google.maps.importLibrary('marker'), google.maps.importLibrary('places'), ]); // Get the inner map. innerMap = mapElement.innerMap; innerMap.setOptions({ mapTypeControl: false, }); // Use the bounds_changed event to restrict results to the current map bounds. google.maps.event.addListener(innerMap, 'bounds_changed', async () => { placeAutocomplete.locationRestriction = innerMap.getBounds(); }); // Create the marker and infowindow. marker = new google.maps.marker.AdvancedMarkerElement({ map: innerMap, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'], }); // If the place has a geometry, then present it on a map. if (place.viewport) { innerMap.fitBounds(place.viewport); } else { innerMap.setCenter(place.location); innerMap.setZoom(17); } let content = document.createElement('div'); let nameText = document.createElement('span'); nameText.textContent = place.displayName; content.appendChild(nameText); content.appendChild(document.createElement('br')); let addressText = document.createElement('span'); addressText.textContent = place.formattedAddress; content.appendChild(addressText); updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map: innerMap, anchor: marker, shouldFocus: false, }); } initMap();
সিএসএস
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 5px; font-family: Roboto, sans-serif; font-size: large; font-weight: bold; } gmp-place-autocomplete { width: 300px; } #infowindow-content .title { font-weight: bold; } #map #infowindow-content { display: inline; }
এইচটিএমএল
<html>
<head>
<title>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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
<div
class="place-autocomplete-card"
slot="control-inline-start-block-start">
<p>Search for a place here:</p>
<gmp-place-autocomplete></gmp-place-autocomplete>
</div>
</gmp-map>
</body>
</html>নমুনা চেষ্টা করুন
প্লেস পিকার কম্পোনেন্ট ব্যবহার করুন
স্থান চয়নকারী উপাদান হল একটি পাঠ্য ইনপুট যা শেষ ব্যবহারকারীদের স্বয়ংসম্পূর্ণ ব্যবহার করে একটি নির্দিষ্ট ঠিকানা বা স্থান অনুসন্ধান করতে দেয়। এটি এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরির অংশ, ওয়েব কম্পোনেন্টগুলির একটি সেট যা ডেভেলপারদের আরও ভাল মানচিত্র এবং অবস্থান বৈশিষ্ট্যগুলি দ্রুত তৈরি করতে সহায়তা করে৷
একটি কাস্টম প্লেস পিকার কম্পোনেন্টের জন্য এম্বেডযোগ্য কোড তৈরি করতে প্লেস পিকার কনফিগারেশন ব্যবহার করুন, তারপর এটিকে রপ্তানি করুন জনপ্রিয় ফ্রেমওয়ার্ক যেমন রিঅ্যাক্ট এবং অ্যাঙ্গুলার বা কোনো ফ্রেমওয়ার্কের সাথে ব্যবহার করার জন্য।