নিরাপত্তা বিজ্ঞপ্তি : আমরা একটি নিরাপত্তা সমস্যা সম্পর্কে সচেতন হয়েছি যা নির্দিষ্ট তৃতীয় পক্ষের লাইব্রেরি (polyfill.io সহ) ব্যবহার করে ওয়েবসাইটগুলিকে প্রভাবিত করতে পারে। এই সমস্যাটি কখনও কখনও ওয়েবসাইট মালিকের জ্ঞান বা অনুমতি ছাড়াই দর্শকদের উদ্দেশ্যযুক্ত ওয়েবসাইট থেকে দূরে পুনঃনির্দেশ করতে পারে। আমাদের জাভাস্ক্রিপ্টের অনেক নমুনায় আগে একটি polyfill.io স্ক্রিপ্ট ঘোষণা অন্তর্ভুক্ত ছিল। আমরা আমাদের নমুনা থেকে এটি মুছে ফেলা হয়েছে. আপনি যদি আমাদের জাভাস্ক্রিপ্ট নমুনাগুলি ব্যবহার করে থাকেন যাতে এই ঘোষণা রয়েছে, আমরা ঘোষণাটি সরানোর পরামর্শ দিই।
ঘোষণা : নতুন বেসম্যাপ স্টাইলিং শীঘ্রই গুগল ম্যাপ প্ল্যাটফর্মে আসছে। মানচিত্র স্টাইলিংয়ের এই আপডেটে একটি নতুন ডিফল্ট রঙ প্যালেট, আধুনিক পিন এবং মানচিত্রের অভিজ্ঞতা এবং ব্যবহারযোগ্যতার উন্নতি অন্তর্ভুক্ত রয়েছে। সমস্ত মানচিত্রের শৈলী মার্চ 2025-এ স্বয়ংক্রিয়ভাবে আপডেট হবে। প্রাপ্যতা এবং আগে কীভাবে নির্বাচন করবেন সে সম্পর্কে আরও তথ্যের জন্য, Google Maps প্ল্যাটফর্মের জন্য নতুন মানচিত্রের শৈলী দেখুন।
এই পৃষ্ঠাটি Maps JavaScript API-এর সাথে উপলব্ধ ক্লায়েন্ট-সাইড লাইব্রেরি বর্ণনা করে। আপনি যদি আপনার সার্ভারে Places API ওয়েব পরিষেবার সাথে কাজ করতে চান, তাহলে Google Maps পরিষেবার জন্য Node.js ক্লায়েন্ট দেখুন। সেই লিঙ্কের পৃষ্ঠাটি Google মানচিত্র পরিষেবাগুলির জন্য জাভা ক্লায়েন্ট, পাইথন ক্লায়েন্ট এবং গো ক্লায়েন্টের পরিচয় দেয়।
ভূমিকা
স্বয়ংসম্পূর্ণ হল মানচিত্র জাভাস্ক্রিপ্ট API-এ স্থান লাইব্রেরির একটি বৈশিষ্ট্য। আপনি আপনার অ্যাপ্লিকেশনগুলিকে Google মানচিত্র অনুসন্ধান ক্ষেত্রের টাইপ-আগে-সার্চ আচরণ দিতে স্বয়ংসম্পূর্ণ ব্যবহার করতে পারেন। স্বয়ংসম্পূর্ণ পরিষেবাটি সম্পূর্ণ শব্দ এবং সাবস্ট্রিংগুলির সাথে মিলতে পারে, স্থানের নাম, ঠিকানা এবং প্লাস কোডগুলি সমাধান করে৷ অ্যাপ্লিকেশনগুলি তাই ব্যবহারকারীর ধরন হিসাবে প্রশ্ন পাঠাতে পারে, যাতে উড়ে যাওয়ার জায়গায় পূর্বাভাস দেওয়া যায়। Places API দ্বারা সংজ্ঞায়িত হিসাবে, একটি 'স্থান' একটি স্থাপনা, একটি ভৌগলিক অবস্থান, বা আগ্রহের একটি বিশিষ্ট স্থান হতে পারে।
শুরু হচ্ছে
Maps JavaScript API-এ স্থানের লাইব্রেরি ব্যবহার করার আগে, প্রথমে নিশ্চিত করুন যে Google ক্লাউড কনসোলে আপনি Maps JavaScript API-এর জন্য সেট আপ করেছেন একই প্রকল্পে Places API সক্ষম করা আছে।
একটি প্রকল্প নির্বাচন করুন বোতামে ক্লিক করুন, তারপরে আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য সেট আপ করা একই প্রকল্প নির্বাচন করুন এবং খুলুন ক্লিক করুন।
ড্যাশবোর্ডে API-এর তালিকা থেকে, স্থান API সন্ধান করুন।
আপনি যদি তালিকায় API দেখতে পান, আপনি সম্পূর্ণ প্রস্তুত। API তালিকাভুক্ত না হলে, এটি সক্ষম করুন:
পৃষ্ঠার শীর্ষে, লাইব্রেরি ট্যাব প্রদর্শন করতে API ENABLE নির্বাচন করুন। বিকল্পভাবে, বাম পাশের মেনু থেকে, লাইব্রেরি নির্বাচন করুন।
স্থান API অনুসন্ধান করুন, তারপর ফলাফল তালিকা থেকে এটি নির্বাচন করুন।
ENABLE নির্বাচন করুন। প্রক্রিয়াটি শেষ হলে, স্থান APIড্যাশবোর্ডে API-এর তালিকায় উপস্থিত হয়।
লাইব্রেরি লোড হচ্ছে
স্থান পরিষেবা হল একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, প্রধান মানচিত্র জাভাস্ক্রিপ্ট API কোড থেকে আলাদা৷ এই লাইব্রেরির মধ্যে থাকা কার্যকারিতা ব্যবহার করতে, আপনাকে প্রথমে মানচিত্র API বুটস্ট্র্যাপ URL-এ libraries প্যারামিটার ব্যবহার করে এটি লোড করতে হবে:
এপিআই দুটি ধরনের স্বয়ংসম্পূর্ণ উইজেট অফার করে, যা আপনি যথাক্রমে Autocomplete এবং SearchBox ক্লাসের মাধ্যমে যোগ করতে পারেন। উপরন্তু, আপনি স্বয়ংসম্পূর্ণ ফলাফল প্রোগ্রামে পুনরুদ্ধার করতে AutocompleteService ক্লাস ব্যবহার করতে পারেন (Maps JavaScript API রেফারেন্স দেখুন: AutocompleteService ক্লাস )।
নীচে উপলব্ধ ক্লাসগুলির একটি সারসংক্ষেপ রয়েছে:
Autocomplete আপনার ওয়েব পৃষ্ঠায় একটি পাঠ্য ইনপুট ক্ষেত্র যোগ করে, এবং অক্ষর এন্ট্রিগুলির জন্য সেই ক্ষেত্রটি নিরীক্ষণ করে। ব্যবহারকারী পাঠ্য প্রবেশ করার সাথে সাথে, স্বয়ংসম্পূর্ণতা একটি ড্রপডাউন বাছাই তালিকার আকারে পূর্বাভাস প্রদান করে। যখন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করে, সেই স্থান সম্পর্কে তথ্য স্বয়ংসম্পূর্ণ বস্তুতে ফেরত দেওয়া হয় এবং আপনার অ্যাপ্লিকেশন দ্বারা পুনরুদ্ধার করা যেতে পারে। নিচে বিস্তারিত দেখুন. চিত্র 1: স্বয়ংসম্পূর্ণ পাঠ্য ক্ষেত্র এবং বাছাই তালিকা ছবি 2: ঠিকানা ফর্ম পূরণ করা হয়েছে
SearchBox আপনার ওয়েব পৃষ্ঠায় একটি পাঠ্য ইনপুট ক্ষেত্র যোগ করে, অনেকটা Autocomplete মতোই। পার্থক্যগুলি নিম্নরূপ:
প্রধান পার্থক্য বাছাই তালিকায় প্রদর্শিত ফলাফলের মধ্যে রয়েছে। SearchBox ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা সরবরাহ করে, যেখানে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে।
অনুসন্ধান সীমাবদ্ধ করার জন্য SearchBoxAutocomplete চেয়ে কম বিকল্প অফার করে। পূর্বে, আপনি একটি প্রদত্ত LatLngBounds এর দিকে অনুসন্ধানটিকে পক্ষপাতিত্ব করতে পারেন। পরবর্তীতে, আপনি অনুসন্ধানটিকে একটি নির্দিষ্ট দেশ এবং নির্দিষ্ট স্থানের ধরনগুলিতে সীমাবদ্ধ করতে পারেন, সেইসাথে সীমা নির্ধারণ করতে পারেন৷ আরও তথ্যের জন্য, নীচে দেখুন।
চিত্র 3: একটি অনুসন্ধানবাক্স অনুসন্ধানের পদ এবং স্থানের পূর্বাভাস উপস্থাপন করে।নিচে বিস্তারিত দেখুন.
প্রোগ্রামগতভাবে ভবিষ্যদ্বাণী পুনরুদ্ধার করতে আপনি একটি AutocompleteService অবজেক্ট তৈরি করতে পারেন। মিলিত স্থানগুলি পুনরুদ্ধার করতে getPlacePredictions() কল করুন, অথবা মিলিত স্থানগুলি এবং প্রস্তাবিত অনুসন্ধান পদগুলি পুনরুদ্ধার করতে getQueryPredictions() কল করুন৷ দ্রষ্টব্য: AutocompleteService কোনো UI নিয়ন্ত্রণ যোগ করে না। পরিবর্তে, উপরের পদ্ধতিগুলি ভবিষ্যদ্বাণী বস্তুর একটি অ্যারে প্রদান করে। প্রতিটি ভবিষ্যদ্বাণী অবজেক্টে ভবিষ্যদ্বাণীর পাঠ্য, সেইসাথে রেফারেন্স তথ্য এবং ফলাফল কীভাবে ব্যবহারকারীর ইনপুটের সাথে মেলে তার বিশদ রয়েছে। নিচে বিস্তারিত দেখুন.
একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করা হচ্ছে
Autocomplete উইজেট আপনার ওয়েব পৃষ্ঠায় একটি পাঠ্য ইনপুট ক্ষেত্র তৈরি করে, একটি UI বাছাই তালিকায় স্থানগুলির পূর্বাভাস সরবরাহ করে এবং একটি getPlace() অনুরোধের প্রতিক্রিয়া হিসাবে স্থানের বিবরণ প্রদান করে। বাছাই তালিকার প্রতিটি এন্ট্রি একটি একক স্থানের সাথে মিলে যায় (স্থান API দ্বারা সংজ্ঞায়িত)।
Autocomplete কনস্ট্রাক্টর দুটি আর্গুমেন্ট নেয়:
টাইপ text একটি HTML input উপাদান। এটি সেই ইনপুট ক্ষেত্র যা স্বয়ংসম্পূর্ণ পরিষেবা নিরীক্ষণ করবে এবং এর ফলাফল সংযুক্ত করবে।
একটি ঐচ্ছিক AutocompleteOptions আর্গুমেন্ট, যাতে নিম্নলিখিত বৈশিষ্ট্য থাকতে পারে:
ব্যবহারকারীর নির্বাচিত PlaceResult এর জন্য Place Details প্রতিক্রিয়ায় অন্তর্ভুক্ত করার জন্য ডেটা fields একটি অ্যারে। যদি সম্পত্তি সেট করা না থাকে বা ['ALL'] পাস করা হয়, তাহলে সমস্ত উপলব্ধ ক্ষেত্র ফেরত দেওয়া হয় এবং এর জন্য বিল করা হয় (এটি উত্পাদন স্থাপনার জন্য সুপারিশ করা হয় না)। ক্ষেত্রগুলির একটি তালিকার জন্য, PlaceResult দেখুন।
types একটি অ্যারে যা একটি সুস্পষ্ট প্রকার বা একটি প্রকার সংগ্রহকে নির্দিষ্ট করে, যেমন সমর্থিত প্রকারগুলিতে তালিকাভুক্ত করা হয়েছে৷ যদি কোন প্রকার নির্দিষ্ট করা না থাকে, সব ধরনের ফেরত দেওয়া হয়।
bounds হল একটি google.maps.LatLngBounds অবজেক্ট যেখানে জায়গাগুলি অনুসন্ধান করতে হবে তা নির্দিষ্ট করে৷ ফলাফলগুলি এই সীমার মধ্যে থাকা স্থানগুলির প্রতি পক্ষপাতমূলক, কিন্তু সীমাবদ্ধ নয়৷
strictBounds হল একটি boolean যা নির্দিষ্ট করে দেয় যে API-কে শুধুমাত্র সেই জায়গাগুলি ফেরত দিতে হবে যেগুলি প্রদত্ত bounds দ্বারা সংজ্ঞায়িত অঞ্চলের মধ্যে কঠোরভাবে। এপিআই এই অঞ্চলের বাইরে ফলাফল প্রদান করে না এমনকি যদি তারা ব্যবহারকারীর ইনপুটের সাথে মেলে।
componentRestrictions নির্দিষ্ট গ্রুপে ফলাফল সীমাবদ্ধ করতে ব্যবহার করা যেতে পারে। বর্তমানে, আপনি 5 টি দেশ পর্যন্ত ফিল্টার করতে componentRestrictions ব্যবহার করতে পারেন। দেশগুলোকে অবশ্যই দুই-অক্ষর, ISO 3166-1 Alpha-2 সামঞ্জস্যপূর্ণ দেশের কোড হিসেবে পাস করতে হবে। দেশের কোডের তালিকা হিসাবে একাধিক দেশ পাস করতে হবে।
দ্রষ্টব্য: আপনি যদি একটি দেশের কোড সহ অপ্রত্যাশিত ফলাফল পান, তাহলে যাচাই করুন যে আপনি এমন একটি কোড ব্যবহার করছেন যাতে দেশ, নির্ভরশীল অঞ্চল এবং আপনার ইচ্ছাকৃত ভৌগলিক আগ্রহের বিশেষ ক্ষেত্রগুলি অন্তর্ভুক্ত রয়েছে৷ আপনি Wikipedia: ISO 3166 দেশের কোডের তালিকা বা ISO অনলাইন ব্রাউজিং প্ল্যাটফর্মে কোড তথ্য পেতে পারেন।
placeIdOnly শুধুমাত্র প্লেস আইডি পুনরুদ্ধার করার জন্য Autocomplete উইজেটকে নির্দেশ দিতে ব্যবহার করা যেতে পারে। Autocomplete অবজেক্টে getPlace() কল করার সময়, উপলব্ধ করা PlaceResult শুধুমাত্র place id , types এবং name বৈশিষ্ট্য সেট থাকবে। আপনি স্থান, জিওকোডিং, দিকনির্দেশ বা দূরত্ব ম্যাট্রিক্স পরিষেবাগুলিতে কল করার জন্য ফেরত স্থান আইডি ব্যবহার করতে পারেন।
স্বয়ংসম্পূর্ণ পূর্বাভাস সীমাবদ্ধ করা
ডিফল্টরূপে, স্থান স্বয়ংসম্পূর্ণ সমস্ত স্থান প্রকার উপস্থাপন করে, ব্যবহারকারীর অবস্থানের কাছাকাছি ভবিষ্যদ্বাণীর জন্য পক্ষপাতদুষ্ট, এবং ব্যবহারকারীর নির্বাচিত স্থানের জন্য সমস্ত উপলব্ধ ডেটা ক্ষেত্র নিয়ে আসে। আপনার ব্যবহারের ক্ষেত্রের উপর ভিত্তি করে আরও প্রাসঙ্গিক পূর্বাভাস উপস্থাপন করতে স্থান স্বয়ংসম্পূর্ণ বিকল্পগুলি সেট করুন৷
নির্মাণে বিকল্প সেট করুন
Autocomplete কনস্ট্রাক্টর উইজেট তৈরিতে সীমাবদ্ধতা সেট করতে একটি AutocompleteOptions পরামিতি গ্রহণ করে। নিম্নলিখিত উদাহরণটি নির্দিষ্ট ভৌগোলিক এলাকার মধ্যে establishment জন্য অনুরোধ করার জন্য bounds , componentRestrictions , এবং types বিকল্পগুলি সেট করে, যা নির্দিষ্ট ভৌগলিক এলাকার মধ্যে এবং পূর্বাভাসগুলিকে শুধুমাত্র মার্কিন যুক্তরাষ্ট্রের মধ্যে সীমাবদ্ধ করে৷ fields বিকল্প সেট করা ব্যবহারকারীর নির্বাচিত স্থান সম্পর্কে কোন তথ্য ফেরত দিতে হবে তা নির্দিষ্ট করে।
একটি বিদ্যমান উইজেটের জন্য একটি বিকল্পের মান পরিবর্তন করতে setOptions() কল করুন।
টাইপস্ক্রিপ্ট
const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
bounds: defaultBounds,
componentRestrictions: { country: "us" },
fields: ["address_components", "geometry", "icon", "name"],
strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
আপনার প্রয়োজন নেই এমন Places ডেটা SKU- এর জন্য বিল করা এড়াতে ডেটা ক্ষেত্রগুলি নির্দিষ্ট করুন৷ AutocompleteOptionsfields বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন যা উইজেট কনস্ট্রাক্টরের কাছে পাস করা হয়, যেমনটি পূর্ববর্তী উদাহরণে প্রদর্শিত হয়েছে, বা একটি বিদ্যমান Autocomplete বস্তুতে setFields() কল করুন।
মানচিত্র ভিউপোর্ট বা আয়তক্ষেত্রাকার সীমার উপর ভিত্তি করে ফলাফলগুলিকে বর্তমান সীমার মধ্যে সীমাবদ্ধ করতে strictBounds বিকল্পটি সেট করুন।
autocomplete.setOptions({ strictBounds: true });
একটি নির্দিষ্ট দেশে পূর্বাভাস সীমাবদ্ধ করুন
স্বয়ংসম্পূর্ণ অনুসন্ধানটিকে পাঁচটি পর্যন্ত দেশের নির্দিষ্ট সেটে সীমাবদ্ধ করতে componentRestrictions বিকল্প ব্যবহার করুন বা setComponentRestrictions() কল করুন।
নির্দিষ্ট স্থানের প্রকারের পূর্বাভাস সীমাবদ্ধ করতে types বিকল্পটি ব্যবহার করুন বা setTypes() কল করুন। এই সীমাবদ্ধতা একটি প্রকার বা টাইপ সংগ্রহকে নির্দিষ্ট করে, যেমনটি স্থানের প্রকারগুলিতে তালিকাভুক্ত। কোন সীমাবদ্ধতা নির্দিষ্ট করা না থাকলে, সব ধরনের ফেরত দেওয়া হয়।
types বিকল্পের মান বা setTypes() এ পাস করা মানটির জন্য, আপনি যেকোন একটি নির্দিষ্ট করতে পারেন:
যখন একজন ব্যবহারকারী স্বয়ংসম্পূর্ণ পাঠ্য ক্ষেত্রে সংযুক্ত ভবিষ্যদ্বাণী থেকে একটি স্থান নির্বাচন করেন, তখন পরিষেবাটি একটি place_changed ইভেন্ট চালু করে। জায়গার বিস্তারিত পেতে:
place_changed ইভেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার তৈরি করুন এবং হ্যান্ডলার যোগ করতে Autocomplete অবজেক্টে addListener() কল করুন।
একটি PlaceResult অবজেক্ট পুনরুদ্ধার করতে Autocomplete.getPlace()Autocomplete অবজেক্টে কল করুন, যা আপনি নির্বাচিত স্থান সম্পর্কে আরও তথ্য পেতে ব্যবহার করতে পারেন।
ডিফল্টরূপে, যখন একজন ব্যবহারকারী একটি স্থান নির্বাচন করেন, স্বয়ংসম্পূর্ণ নির্বাচিত স্থানের জন্য উপলব্ধ সমস্ত ডেটা ক্ষেত্র ফেরত দেয় এবং সেই অনুযায়ী আপনাকে বিল করা হবে৷ কোন স্থানের ডেটা ক্ষেত্রগুলি ফেরত দিতে হবে তা নির্দিষ্ট করতে Autocomplete.setFields() ব্যবহার করুন৷ PlaceResult অবজেক্ট সম্পর্কে আরও পড়ুন, যেখানে আপনি অনুরোধ করতে পারেন এমন জায়গার ডেটা ফিল্ডের তালিকা সহ। আপনার প্রয়োজন নেই এমন ডেটার জন্য অর্থ প্রদান এড়াতে, আপনি যে স্থানের ডেটা ব্যবহার করবেন তা নির্দিষ্ট করতে Autocomplete.setFields() ব্যবহার করতে ভুলবেন না।
name সম্পত্তি স্থান স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণী থেকে description রয়েছে. আপনি স্থান স্বয়ংসম্পূর্ণ ডকুমেন্টেশনেdescription সম্পর্কে আরও পড়তে পারেন।
ঠিকানা ফর্মের জন্য, এটি কাঠামোগত বিন্যাসে ঠিকানা পেতে দরকারী। নির্বাচিত স্থানের জন্য কাঠামোগত ঠিকানা ফেরত দিতে, Autocomplete.setFields() কল করুন এবং address_components ক্ষেত্রটি নির্দিষ্ট করুন।
নিম্নলিখিত উদাহরণটি একটি ঠিকানা ফর্মের ক্ষেত্রগুলি পূরণ করতে স্বয়ংসম্পূর্ণ ব্যবহার করে।
টাইপস্ক্রিপ্ট
function fillInAddress() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
// @ts-ignore remove once typings fixed
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
(document.querySelector("#locality") as HTMLInputElement).value =
component.long_name;
break;
case "administrative_area_level_1": {
(document.querySelector("#state") as HTMLInputElement).value =
component.short_name;
break;
}
case "country":
(document.querySelector("#country") as HTMLInputElement).value =
component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
function fillInAddress() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
for (const component of place.address_components) {
// @ts-ignore remove once typings fixed
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
document.querySelector("#locality").value = component.long_name;
break;
case "administrative_area_level_1": {
document.querySelector("#state").value = component.short_name;
break;
}
case "country":
document.querySelector("#country").value = component.long_name;
break;
}
}
address1Field.value = address1;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
window.initAutocomplete = initAutocomplete;
ডিফল্টরূপে, স্বয়ংসম্পূর্ণ পরিষেবা দ্বারা তৈরি টেক্সট ফিল্ডে স্ট্যান্ডার্ড প্লেসহোল্ডার টেক্সট থাকে। পাঠ্য পরিবর্তন করতে, input উপাদানে placeholder বৈশিষ্ট্য সেট করুন:
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
দ্রষ্টব্য: ডিফল্ট স্থানধারক পাঠ্য স্বয়ংক্রিয়ভাবে স্থানীয়করণ করা হয়। আপনি যদি আপনার নিজস্ব স্থানধারক মান নির্দিষ্ট করেন, তাহলে আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনে সেই মানটির স্থানীয়করণ পরিচালনা করতে হবে। Google Maps JavaScript API কীভাবে ব্যবহার করার জন্য ভাষা বেছে নেয় সে সম্পর্কে তথ্যের জন্য, অনুগ্রহ করে স্থানীয়করণের ডকুমেন্টেশন পড়ুন।
SearchBox ব্যবহারকারীদের একটি পাঠ্য-ভিত্তিক ভৌগলিক অনুসন্ধান করতে দেয়, যেমন 'নিউ ইয়র্কে পিজা' বা 'রবসন স্ট্রীটের কাছে জুতার দোকান'। আপনি একটি পাঠ্য ক্ষেত্রে SearchBox সংযুক্ত করতে পারেন এবং, পাঠ্য প্রবেশ করানো হলে, পরিষেবাটি একটি ড্রপ-ডাউন বাছাই তালিকা আকারে পূর্বাভাস প্রদান করবে।
SearchBox ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা সরবরাহ করে, যেখানে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে। যখন একজন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করেন, সেই স্থান সম্পর্কে তথ্য অনুসন্ধানবক্স অবজেক্টে ফেরত দেওয়া হয় এবং আপনার অ্যাপ্লিকেশন দ্বারা পুনরুদ্ধার করা যেতে পারে।
SearchBox কনস্ট্রাক্টর দুটি আর্গুমেন্ট নেয়:
টাইপ text একটি HTML input উপাদান। এটি সেই ইনপুট ক্ষেত্র যা SearchBox পরিষেবা নিরীক্ষণ করবে এবং এর ফলাফল সংযুক্ত করবে।
একটি options আর্গুমেন্ট, যা bounds প্রোপার্টি ধারণ করতে পারে: bounds হল একটি google.maps.LatLngBounds অবজেক্ট যেখানে জায়গাগুলি অনুসন্ধান করতে হবে তা নির্দিষ্ট করে৷ ফলাফলগুলি এই সীমার মধ্যে থাকা স্থানগুলির প্রতি পক্ষপাতমূলক, কিন্তু সীমাবদ্ধ নয়৷
নিম্নোক্ত কোডটি অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কের মাধ্যমে নির্দিষ্ট করা একটি নির্দিষ্ট ভৌগলিক এলাকার মধ্যে স্থানগুলির দিকে ফলাফলগুলিকে পক্ষপাতিত্ব করতে বাউন্ড প্যারামিটার ব্যবহার করে।
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('searchTextField');
var searchBox = new google.maps.places.SearchBox(input, {
bounds: defaultBounds
});
SearchBox-এর জন্য অনুসন্ধান এলাকা পরিবর্তন করা হচ্ছে
একটি বিদ্যমান SearchBox এর জন্য অনুসন্ধান এলাকা পরিবর্তন করতে, SearchBox অবজেক্টে setBounds() কল করুন এবং প্রাসঙ্গিক LatLngBounds অবজেক্টটি পাস করুন।
ব্যবহারকারী সার্চ বাক্সের সাথে সংযুক্ত ভবিষ্যদ্বাণী থেকে একটি আইটেম নির্বাচন করলে, পরিষেবাটি একটি places_changed ইভেন্ট চালু করে। আপনি SearchBox অবজেক্টে getPlaces() কল করতে পারেন, বেশ কয়েকটি ভবিষ্যদ্বাণী সম্বলিত একটি অ্যারে পুনরুদ্ধার করতে, যার প্রতিটি একটি PlaceResult অবজেক্ট।
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
const icon = {
url: place.icon as string,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
})
);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach((marker) => {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
const icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
// Create a marker for each place.
markers.push(
new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
}),
);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
প্রোগ্রামগতভাবে স্থান স্বয়ংসম্পূর্ণ পরিষেবার পূর্বাভাস পুনরুদ্ধার করা হচ্ছে
প্রোগ্রামগতভাবে পূর্বাভাস পুনরুদ্ধার করতে, AutocompleteService ক্লাস ব্যবহার করুন। AutocompleteService কোনো UI নিয়ন্ত্রণ যোগ করে না। পরিবর্তে, এটি ভবিষ্যদ্বাণী বস্তুর একটি অ্যারে ফেরত দেয়, প্রতিটিতে ভবিষ্যদ্বাণীর পাঠ্য, রেফারেন্স তথ্য এবং ফলাফলটি ব্যবহারকারীর ইনপুটের সাথে কীভাবে মেলে তার বিশদ থাকে। উপরে বর্ণিত Autocomplete এবং SearchBox দ্বারা প্রস্তাবিত ব্যবহারকারীর ইন্টারফেসের উপর আপনি যদি আরও বেশি নিয়ন্ত্রণ চান তবে এটি কার্যকর।
AutocompleteService নিম্নলিখিত পদ্ধতিগুলি প্রকাশ করে:
getPlacePredictions() স্থানের পূর্বাভাস প্রদান করে। দ্রষ্টব্য: একটি 'স্থান' হতে পারে একটি স্থাপনা, ভৌগলিক অবস্থান, বা আগ্রহের বিশিষ্ট স্থান, যেমন স্থান API দ্বারা সংজ্ঞায়িত করা হয়েছে।
getQueryPredictions() ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা প্রদান করে, যা স্থানগুলিকে অন্তর্ভুক্ত করতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে।
উপরের উভয় পদ্ধতি নিম্নলিখিত ফর্মের ভবিষ্যদ্বাণী বস্তুর একটি অ্যারে প্রদান করে:
description হল মিলে যাওয়া ভবিষ্যদ্বাণী।
distance_meters হল নির্দিষ্ট AutocompletionRequest.origin থেকে স্থানের মিটারের দূরত্ব।
matched_substrings এ বর্ণনার সাবস্ট্রিংগুলির একটি সেট রয়েছে যা ব্যবহারকারীর ইনপুটের উপাদানগুলির সাথে মেলে। এটি আপনার অ্যাপ্লিকেশনে সেই সাবস্ট্রিংগুলি হাইলাইট করার জন্য দরকারী। অনেক ক্ষেত্রে, ক্যোয়ারীটি বর্ণনা ক্ষেত্রের একটি সাবস্ট্রিং হিসাবে উপস্থিত হবে।
length হল সাবস্ট্রিং এর দৈর্ঘ্য।
offset হল ক্যারেক্টার অফসেট, বর্ণনা স্ট্রিং এর শুরু থেকে পরিমাপ করা হয়, যেখানে মিলিত সাবস্ট্রিং দেখা যায়।
terms হল একটি অ্যারে যাতে কোয়েরির উপাদান থাকে। একটি স্থানের জন্য, প্রতিটি উপাদান সাধারণত ঠিকানার একটি অংশ তৈরি করবে।
offset হল ক্যারেক্টার অফসেট, বর্ণনা স্ট্রিং এর শুরু থেকে পরিমাপ করা হয়, যেখানে মিলিত সাবস্ট্রিং দেখা যায়।
value হল মিলিত শব্দ।
নীচের উদাহরণটি 'পিজা কাছাকাছি' শব্দগুচ্ছের জন্য একটি ক্যোয়ারী পূর্বাভাস অনুরোধ কার্যকর করে এবং একটি তালিকায় ফলাফল প্রদর্শন করে।
টাইপস্ক্রিপ্ট
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
const displaySuggestions = function (
predictions: google.maps.places.QueryAutocompletePrediction[] | null,
status: google.maps.places.PlacesServiceStatus
) {
if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
alert(status);
return;
}
predictions.forEach((prediction) => {
const li = document.createElement("li");
li.appendChild(document.createTextNode(prediction.description));
(document.getElementById("results") as HTMLUListElement).appendChild(li);
});
};
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}
declare global {
interface Window {
initService: () => void;
}
}
window.initService = initService;
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
const displaySuggestions = function (predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
alert(status);
return;
}
predictions.forEach((prediction) => {
const li = document.createElement("li");
li.appendChild(document.createTextNode(prediction.description));
document.getElementById("results").appendChild(li);
});
};
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}
window.initService = initService;
<html>
<head>
<title>Retrieving Autocomplete Predictions</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<p>Query suggestions for 'pizza near Syd':</p>
<ul id="results"></ul>
<!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
<img
class="powered-by-google"
src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
alt="Powered by Google"
/>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
defer
></script>
</body>
</html>
AutocompleteService.getPlacePredictions() সেশন টোকেন ব্যবহার করতে পারে (যদি বাস্তবায়িত হয়) বিলিং উদ্দেশ্যে স্বয়ংসম্পূর্ণ অনুরোধগুলিকে একত্রিত করতে। সেশন টোকেনগুলি একটি ব্যবহারকারীর স্বয়ংসম্পূর্ণ অনুসন্ধানের প্রশ্ন এবং নির্বাচনের পর্যায়গুলিকে বিলিং উদ্দেশ্যে একটি পৃথক সেশনে গোষ্ঠীভুক্ত করে। সেশন শুরু হয় যখন ব্যবহারকারী একটি ক্যোয়ারী টাইপ করা শুরু করে এবং যখন তারা একটি স্থান নির্বাচন করে তখন শেষ হয়। প্রতিটি সেশনে একাধিক প্রশ্ন থাকতে পারে, তারপরে একটি স্থান নির্বাচন। একবার একটি অধিবেশন শেষ হয়ে গেলে, টোকেনটি আর বৈধ থাকে না। আপনার অ্যাপ অবশ্যই প্রতিটি সেশনের জন্য একটি নতুন টোকেন তৈরি করবে। আমরা সমস্ত স্বয়ংসম্পূর্ণ সেশনের জন্য সেশন টোকেন ব্যবহার করার পরামর্শ দিই। যদি sessionToken প্যারামিটারটি বাদ দেওয়া হয়, বা আপনি যদি একটি সেশন টোকেন পুনরায় ব্যবহার করেন, তাহলে সেশনটি চার্জ করা হবে যেন কোনো সেশন টোকেন প্রদান করা হয়নি (প্রতিটি অনুরোধ আলাদাভাবে বিল করা হয়)।
AutocompleteService.getPlacePredictions() এ কল করার ফলে যে স্থানে একটি স্থানের বিশদ অনুরোধ করতে আপনি একই সেশন টোকেন ব্যবহার করতে পারেন। এই ক্ষেত্রে, স্বয়ংসম্পূর্ণ অনুরোধটি স্থানের বিবরণের অনুরোধের সাথে মিলিত হয় এবং কলটি একটি নিয়মিত স্থানের বিবরণ অনুরোধ হিসাবে চার্জ করা হয়। স্বয়ংসম্পূর্ণ অনুরোধের জন্য কোন চার্জ নেই।
প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক স্বয়ংসম্পূর্ণ সেশনের জন্য একই টোকেন ব্যবহার করা সেই স্বয়ংসম্পূর্ণ সেশনগুলিকে বাতিল করে দেবে এবং অবৈধ সেশনের সমস্ত স্বয়ংসম্পূর্ণ অনুরোধের জন্য স্বয়ংসম্পূর্ণ প্রতি অনুরোধ SKU ব্যবহার করে পৃথকভাবে চার্জ করা হবে। সেশন টোকেন সম্পর্কে আরও পড়ুন ।
নিচের উদাহরণে দেখানো হয়েছে একটি সেশন টোকেন তৈরি করা, তারপর এটিকে একটি AutocompleteService এ পাস করা ( displaySuggestions() ফাংশনটি সংক্ষিপ্ততার জন্য বাদ দেওয়া হয়েছে):
// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();
// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
input: 'pizza near Syd',
sessionToken: sessionToken
},
displaySuggestions);
প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক সেশনের জন্য একই টোকেন ব্যবহার করার ফলে প্রতিটি অনুরোধ পৃথকভাবে বিল করা হবে।
ডিফল্টরূপে, Autocomplete এবং SearchBox দ্বারা প্রদত্ত UI উপাদানগুলিকে Google মানচিত্রে অন্তর্ভুক্ত করার জন্য স্টাইল করা হয়৷ আপনার নিজের সাইটের জন্য আপনি স্টাইলিং সামঞ্জস্য করতে চাইতে পারেন। নিম্নলিখিত CSS ক্লাস উপলব্ধ. নীচে তালিকাভুক্ত সমস্ত ক্লাস Autocomplete এবং SearchBox উইজেট উভয় ক্ষেত্রেই প্রযোজ্য।
স্বয়ংসম্পূর্ণ এবং অনুসন্ধানবক্স উইজেটের জন্য CSS ক্লাস
সিএসএস ক্লাস
বর্ণনা
pac-container
স্থান স্বয়ংসম্পূর্ণ পরিষেবা দ্বারা প্রত্যাবর্তিত ভবিষ্যদ্বাণীগুলির তালিকা ধারণকারী ভিজ্যুয়াল উপাদান৷ এই তালিকাটি Autocomplete বা SearchBox উইজেটের নীচে একটি ড্রপডাউন তালিকা হিসাবে উপস্থিত হয়।
pac-icon
ভবিষ্যদ্বাণীর তালিকায় প্রতিটি আইটেমের বাম দিকে প্রদর্শিত আইকন।
pac-item
Autocomplete বা SearchBox উইজেট দ্বারা সরবরাহকৃত পূর্বাভাসের তালিকার একটি আইটেম।
pac-item:hover
আইটেম যখন ব্যবহারকারী এটির উপর তাদের মাউস পয়েন্টার ঘোরায়।
pac-item-selected
আইটেমটি যখন ব্যবহারকারী কীবোর্ডের মাধ্যমে নির্বাচন করে। দ্রষ্টব্য: নির্বাচিত আইটেমগুলি এই শ্রেণীর এবং pac-item শ্রেণীর সদস্য হবে।
pac-item-query
একটি pac-item ভিতরে একটি স্প্যান যা পূর্বাভাসের প্রধান অংশ। ভৌগলিক অবস্থানের জন্য, এতে একটি স্থানের নাম রয়েছে, যেমন 'সিডনি', বা একটি রাস্তার নাম এবং নম্বর, যেমন '10 কিং স্ট্রিট'৷ টেক্সট-ভিত্তিক অনুসন্ধানের জন্য যেমন 'নিউ ইয়র্কে পিজা', এতে কোয়েরির সম্পূর্ণ পাঠ্য রয়েছে। ডিফল্টরূপে, pac-item-query কালো রঙের হয়। pac-item এ কোনো অতিরিক্ত পাঠ্য থাকলে, এটি pac-item-query বাইরে থাকে এবং pac-item থেকে এর স্টাইলিং উত্তরাধিকারসূত্রে পাওয়া যায়। এটি ডিফল্টরূপে ধূসর রঙের হয়। অতিরিক্ত পাঠ্যটি সাধারণত একটি ঠিকানা।
pac-matched
প্রত্যাবর্তিত পূর্বাভাসের অংশ যা ব্যবহারকারীর ইনপুটের সাথে মেলে। ডিফল্টরূপে, এই মিলে যাওয়া টেক্সটটিকে বোল্ড টেক্সটে হাইলাইট করা হয়। মনে রাখবেন যে মিলিত টেক্সট pac-item মধ্যে যেকোনো জায়গায় থাকতে পারে। এটি অগত্যা pac-item-query এর অংশ নয়, এবং এটি আংশিকভাবে pac-item-query মধ্যে এবং আংশিকভাবে pac-item অবশিষ্ট পাঠ্যের মধ্যেও থাকতে পারে।
প্লেস পিকার কম্পোনেন্ট ব্যবহার করুন
দ্রষ্টব্য: এই নমুনাটি একটি ওপেন সোর্স লাইব্রেরি ব্যবহার করে। লাইব্রেরি সম্পর্কিত সমর্থন এবং প্রতিক্রিয়ার জন্য README দেখুন।
ওয়েব উপাদান চেষ্টা করুন. টেক্সট ইনপুট সক্ষম করতে প্লেস পিকার ওয়েব কম্পোনেন্ট ব্যবহার করুন যা শেষ ব্যবহারকারীদের স্বয়ংসম্পূর্ণ ব্যবহার করে একটি নির্দিষ্ট ঠিকানা বা স্থান অনুসন্ধান করতে দেয়।
চিত্র 1: স্বয়ংসম্পূর্ণ ব্যবহার করে একটি নির্দিষ্ট ঠিকানা বা স্থান অনুসন্ধান করতে পাঠ্য ইনপুট
স্বয়ংসম্পূর্ণ অপ্টিমাইজেশান রাখুন
এই বিভাগটি আপনাকে প্লেস স্বয়ংসম্পূর্ণ পরিষেবার সর্বাধিক ব্যবহার করতে সাহায্য করার জন্য সর্বোত্তম অনুশীলনগুলি বর্ণনা করে৷
শুরু থেকেই অপরিহার্য স্থান স্বয়ংসম্পূর্ণ ডেটা ক্ষেত্রগুলির একটি বোঝার বিকাশ করুন।
অবস্থানের পক্ষপাতিত্ব এবং অবস্থানের সীমাবদ্ধতা ক্ষেত্রগুলি ঐচ্ছিক কিন্তু স্বয়ংসম্পূর্ণ কর্মক্ষমতার উপর উল্লেখযোগ্য প্রভাব ফেলতে পারে৷
যদি API একটি ত্রুটি ফেরত দেয় তবে আপনার অ্যাপটি সুন্দরভাবে হ্রাস পায় তা নিশ্চিত করতে ত্রুটি পরিচালনা ব্যবহার করুন।
নিশ্চিত করুন যে কোনও নির্বাচন না থাকলে আপনার অ্যাপ পরিচালনা করে এবং ব্যবহারকারীদের চালিয়ে যাওয়ার একটি উপায় দেয়।
খরচ অপ্টিমাইজেশান সেরা অনুশীলন
মৌলিক খরচ অপ্টিমাইজেশান
প্লেস স্বয়ংসম্পূর্ণ পরিষেবা ব্যবহার করার খরচ অপ্টিমাইজ করতে, শুধুমাত্র আপনার প্রয়োজনীয় স্থানের ডেটা ক্ষেত্রগুলি ফেরাতে স্থানের বিবরণ এবং প্লেস স্বয়ংসম্পূর্ণ উইজেটগুলিতে ফিল্ড মাস্ক ব্যবহার করুন।
উন্নত খরচ অপ্টিমাইজেশান
প্রতি অনুরোধ মূল্য অ্যাক্সেস করতে এবং স্থানের বিবরণের পরিবর্তে নির্বাচিত স্থান সম্পর্কে জিওকোডিং এপিআই ফলাফলের জন্য অনুরোধ করার জন্য স্থান স্বয়ংসম্পূর্ণের প্রোগ্রাম্যাটিক বাস্তবায়ন বিবেচনা করুন। জিওকোডিং এপিআই-এর সাথে পেয়ার করা প্রতি অনুরোধ মূল্য প্রতি সেশন (সেশন-ভিত্তিক) মূল্যের চেয়ে বেশি সাশ্রয়ী হয় যদি নিম্নলিখিত দুটি শর্ত পূরণ করা হয়:
আপনার যদি শুধুমাত্র ব্যবহারকারীর নির্বাচিত স্থানের অক্ষাংশ/দ্রাঘিমাংশ বা ঠিকানার প্রয়োজন হয়, তবে জিওকোডিং API এই তথ্যটি স্থানের বিবরণ কলের চেয়েও কম সময়ে সরবরাহ করে।
ব্যবহারকারীরা যদি গড়ে চারটি স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণী অনুরোধের মধ্যে একটি স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণী নির্বাচন করে বা তার চেয়ে কম, প্রতি অনুরোধ মূল্য প্রতি সেশন মূল্যের চেয়ে বেশি সাশ্রয়ী হতে পারে।
আপনার প্রয়োজনের সাথে মানানসই স্থান স্বয়ংসম্পূর্ণ বাস্তবায়ন নির্বাচন করতে সাহায্যের জন্য, নিম্নলিখিত প্রশ্নের আপনার উত্তরের সাথে সামঞ্জস্যপূর্ণ ট্যাবটি নির্বাচন করুন।
আপনার আবেদনে কি নির্বাচিত ভবিষ্যদ্বাণীর ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ ছাড়া অন্য কোনো তথ্যের প্রয়োজন আছে?
নিম্নলিখিত নির্দেশিকাগুলি স্থান স্বয়ংসম্পূর্ণ কর্মক্ষমতা অপ্টিমাইজ করার উপায় বর্ণনা করে:
আপনার স্থান স্বয়ংসম্পূর্ণ বাস্তবায়নে দেশের সীমাবদ্ধতা, অবস্থানের পক্ষপাতিত্ব এবং (প্রোগ্রামাটিক বাস্তবায়নের জন্য) ভাষা পছন্দ যোগ করুন। উইজেটগুলির সাথে ভাষার পছন্দের প্রয়োজন নেই কারণ তারা ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষা পছন্দগুলি বেছে নেয়।
যদি স্থান স্বয়ংসম্পূর্ণ একটি মানচিত্র দ্বারা অনুষঙ্গী হয়, আপনি মানচিত্র ভিউপোর্ট দ্বারা অবস্থান পক্ষপাতিত্ব করতে পারেন.
এমন পরিস্থিতিতে যখন একজন ব্যবহারকারী স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণীগুলির মধ্যে একটিকে বেছে নেন না, সাধারণত যেহেতু এই ভবিষ্যদ্বাণীগুলির কোনওটিই পছন্দসই ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করতে মূল ব্যবহারকারীর ইনপুট পুনরায় ব্যবহার করতে পারেন:
যদি আপনি আশা করেন যে ব্যবহারকারী শুধুমাত্র ঠিকানার তথ্য লিখবেন, তাহলে জিওকোডিং API- এ একটি কলে মূল ব্যবহারকারীর ইনপুট পুনরায় ব্যবহার করুন।
আপনি যদি আশা করেন যে ব্যবহারকারী একটি নির্দিষ্ট স্থানের জন্য নাম বা ঠিকানা দ্বারা প্রশ্ন লিখবেন, তাহলে একটি সন্ধান করুন স্থান অনুরোধ ব্যবহার করুন। ফলাফল শুধুমাত্র একটি নির্দিষ্ট অঞ্চলে প্রত্যাশিত হলে, অবস্থানের পক্ষপাতিত্ব ব্যবহার করুন৷
অন্যান্য পরিস্থিতিতে যখন জিওকোডিং এপিআইতে ফিরে আসা ভাল তখন এর মধ্যে রয়েছে:
ব্যবহারকারীরা এমন দেশগুলিতে সাব -প্রিমিস ঠিকানাগুলি ইনপুট করা যেখানে সাবপ্রেমাইজ ঠিকানার স্বতঃপূর্ব সমর্থন রাখে অসম্পূর্ণ, যেমন চেকিয়া, এস্তোনিয়া এবং লিথুয়ানিয়া। উদাহরণস্বরূপ, চেক ঠিকানা "স্ট্রুপইনিকহো 3191/17, প্রাহা" জায়গায় স্বতঃপ্রবাহে একটি আংশিক পূর্বাভাস দেয়।
ব্যবহারকারীরা নিউইয়র্ক সিটির "23-30 29 তম এসটি, কুইন্স" বা হাওয়াইয়ের কাউই দ্বীপে "47-380 কামহামেহা হুই, কেনোহে" এর মতো রোড-সেগমেন্টের উপসর্গগুলির সাথে ঠিকানাগুলি ইনপুট করছেন।