জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি)

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA)-এর ডেভেলপার
মনে রাখবেন: সার্ভার-সাইড লাইব্রেরি

এই পৃষ্ঠায় Maps JavaScript API-এর সাথে উপলভ্য ক্লায়েন্ট-সাইড লাইব্রেরির বিবরণ দেওয়া হয়েছে। আপনার সার্ভারে Places API ওয়েব সার্ভিস নিয়ে কাজ করতে চাইলে, Google Maps পরিষেবার জন্য Node.js ক্লায়েন্ট দেখুন। ওই লিঙ্কের পৃষ্ঠায় Google Maps পরিষেবার জন্য Java Client, Python Client ও Go Client-এরও পরিচয় দেওয়া হয়েছে।

ভূমিকা

অটোমেটিক সম্পূর্ণ করা হল Maps JavaScript API-এর Places লাইব্রেরির একটি ফিচার। আপনার অ্যাপ্লিকেশনকে Google Maps সার্চ ফিল্ডের টাইপ-অ্যাহেড-সার্চ বিহেভিয়ার দিতে আপনি অটোমেটিক সম্পূর্ণ হওয়া ফিচার ব্যবহার করতে পারেন। অটো-কমপ্লিট পরিষেবা সম্পূর্ণ শব্দ এবং সাবস্ট্রিংয়ের সাথে মিলতে পারে, যা জায়গার নাম, ঠিকানা এবং প্লাস কোড সমাধান করে। তাই, ব্যবহারকারী টাইপ করার সাথে সাথে অ্যাপ্লিকেশন কোয়েরি পাঠাতে পারে, যাতে তৎক্ষণাৎ জায়গার পূর্বাভাস দেওয়া যায়। Places API-এর সংজ্ঞা অনুযায়ী, 'জায়গা' বলতে কোনও প্রতিষ্ঠান, ভৌগোলিক লোকেশন বা কোনও উল্লেখযোগ্য স্থানকে বোঝায়।

শুরু করা

Maps JavaScript API-তে Places লাইব্রেরি ব্যবহার করার আগে, প্রথমে যাচাই করুন যে Google Cloud কনসোলে Places API চালু করা আছে, Maps JavaScript API-এর জন্য আপনি যে প্রোজেক্ট সেট-আপ করেছেন, সেই একই প্রোজেক্টে।

আপনার চালু করা API-এর তালিকা দেখতে:

  1. Google Cloud Console-এ যান।
  2. প্রোজেক্ট বেছে নিন বোতামে ক্লিক করুন, তারপর Maps JavaScript API-এর জন্য সেট-আপ করা একই প্রোজেক্ট বেছে নিয়ে খুলুন বিকল্পে ক্লিক করুন।
  3. ড্যাশবোর্ড-এ API-এর তালিকা থেকে Places API খুঁজুন।
  4. তালিকায় API দেখতে পেলে, আপনি একদম রেডি। তবে, এই প্রোজেক্টটি লিগ্যাসি স্ট্যাটাসে রয়েছে। Legacy স্টেজ সম্পর্কে আরও তথ্য এবং কীভাবে Legacy থেকে নতুন পরিষেবাতে মাইগ্রেট করবেন তা জানতে, Legacy প্রোডাক্ট ও ফিচার দেখুন। অটোমেটিক সম্পূর্ণ করা এবং SearchBox উইজেটের জন্য একটি ব্যতিক্রম উপলভ্য, যা এখনও Places API (নতুন)-এ GA প্রোডাক্ট হিসেবে উপলভ্য নয়।

লাইব্রেরি লোড করুন

Places পরিষেবা হল একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, যা মূল Maps JavaScript API কোড থেকে আলাদা। এই লাইব্রেরিতে থাকা ফিচার ব্যবহার করতে, আপনাকে প্রথমে Maps API বুটস্ট্র্যাপ URL-এ libraries প্যারামিটার ব্যবহার করে এটি লোড করতে হবে:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>

আরও তথ্যের জন্য লাইব্রেরি ওভারভিউ দেখুন।

ক্লাসের সারসংক্ষেপ

API দুই ধরনের অটোমেটিক সম্পূর্ণ করার উইজেট অফার করে, যা আপনি যথাক্রমে Autocomplete এবং SearchBox ক্লাস ব্যবহার করে যোগ করতে পারবেন। এছাড়াও, আপনি প্রোগ্রাম্যাটিকভাবে অটোমেটিক সম্পূর্ণ ফলাফল পুনরুদ্ধার করতে AutocompleteService ক্লাস ব্যবহার করতে পারেন (Maps JavaScript API রেফারেন্স দেখুন: AutocompleteService ক্লাস)।

উপলভ্য ক্লাসের সারসংক্ষেপ নিচে দেওয়া হল:

  • Autocomplete আপনার ওয়েব পেজে একটি টেক্সট ইনপুট ফিল্ড যোগ করে, এবং অক্ষর এন্ট্রির জন্য সেই ফিল্ড মনিটর করে। ব্যবহারকারী টেক্সট লিখলে, অটোকমপ্লিট ফিচারটি ড্রপ-ডাউন তালিকার আকারে জায়গার পূর্বাভাস দেখায়। ব্যবহারকারী তালিকা থেকে কোনও জায়গা বেছে নিলে, সেই জায়গা সম্পর্কে তথ্য অটোমেটিক সম্পূর্ণ করার অবজেক্টে ফেরত পাঠানো হয় এবং আপনার অ্যাপ্লিকেশন তা পুনরুদ্ধার করতে পারে। নিচে বিবরণ দেখুন।
    অটোকমপ্লিট টেক্সট ফিল্ড এবং ব্যবহারকারী সার্চ কোয়েরি লিখলে প্রদান করা জায়গার পূর্বাভাসের বাছাই করা তালিকা।
    ছবি ১: অটোমেটিক সম্পূর্ণ হওয়া টেক্সট ফিল্ড ও বাছাই করা তালিকা
    সম্পূর্ণ করা ঠিকানা ফর্ম।
    ছবি ২: সম্পূর্ণ করা ঠিকানা ফর্ম
  • SearchBox আপনার ওয়েব পেজে টেক্সট ইনপুট ফিল্ড যোগ করে, Autocomplete-এর মতোই। পার্থক্যগুলি নিচে উল্লেখ করা হল:
    • প্রধান পার্থক্য হল, পিক লিস্টে দেখানো ফলাফল। SearchBox পূর্বানুমানের একটি বর্ধিত তালিকা প্রদান করে, যার মধ্যে জায়গা (Places API দ্বারা সংজ্ঞায়িত) এবং সাজেস্ট করা সার্চ কোয়েরি অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী যদি 'pizza in new' লেখেন, তাহলে বাছাই তালিকায় 'pizza in New York, NY' বাক্যাংশের পাশাপাশি বিভিন্ন পিৎজা আউটলেটের নামও থাকতে পারে।
    • সার্চ সীমাবদ্ধ করার জন্য SearchBox-এ Autocomplete-এর তুলনায় কম বিকল্প আছে। প্রথমটির ক্ষেত্রে, আপনি প্রদত্ত LatLngBounds-এর দিকে সার্চকে পক্ষপাতদুষ্ট করতে পারেন। পরেরটিতে, আপনি নির্দিষ্ট দেশ ও নির্দিষ্ট ধরনের জায়গার মধ্যে সার্চ সীমাবদ্ধ করতে পারবেন, সেইসাথে বাউন্ডারিও সেট করতে পারবেন। আরও তথ্যের জন্য, নিচে দেখুন।
    সম্পূর্ণ করা ঠিকানা ফর্ম।
    ছবি ৩: SearchBox সার্চ করা শব্দ ও জায়গার পূর্বাভাস দেখায়।
    নিচে বিবরণ দেখুন।
  • আপনি প্রোগ্রাম্যাটিক্যালি পূর্বাভাস পেতে AutocompleteService অবজেক্ট তৈরি করতে পারেন। একই ধরনের জায়গা খুঁজে পেতে getPlacePredictions() কল করুন অথবা একই ধরনের জায়গা এবং সাজেস্ট করা সার্চ করা শব্দ খুঁজে পেতে getQueryPredictions() কল করুন। AutocompleteService কোনও UI কন্ট্রোল যোগ করে না। পরিবর্তে, উপরের পদ্ধতিগুলি পূর্বাভাস অবজেক্টের একটি অ্যারে রিটার্ন করে। প্রতিটি পূর্বাভাস অবজেক্টে পূর্বাভাসের টেক্সট, রেফারেন্স তথ্য এবং ব্যবহারকারীর ইনপুটের সাথে ফলাফল কীভাবে মিলছে তার বিবরণ থাকে। নিচে বিবরণ দেখুন।

অটো-কমপ্লিট উইজেট যোগ করা

Autocomplete উইজেট আপনার ওয়েব পেজে একটি টেক্সট ইনপুট ফিল্ড তৈরি করে, UI পিক লিস্টে জায়গার পূর্বাভাস প্রদান করে এবং getPlace() অনুরোধের উত্তরে জায়গার বিবরণ প্রদান করে। পিক লিস্টের প্রতিটি এন্ট্রি একটি জায়গার সাথে সম্পর্কিত (Places API দ্বারা নির্ধারিত)।

Autocomplete কনস্ট্রাক্টর দুটি আর্গুমেন্ট নেয়:

  • text ধরনের একটি HTML input এলিমেন্ট। এটি হল ইনপুট ফিল্ড যা অটোফিল পরিষেবা মনিটর করবে এবং এর ফলাফল অ্যাটাচ করবে।
  • একটি ঐচ্ছিক AutocompleteOptions আর্গুমেন্ট, যাতে নিম্নলিখিত প্রপার্টি থাকতে পারে:
    • ব্যবহারকারীর বেছে নেওয়া PlaceResult-এর জন্য Place Details উত্তরে অন্তর্ভুক্ত করার জন্য ডেটার fields অ্যারে। যদি প্রপার্টি সেট করা না থাকে বা ['ALL'] পাস করা হয়, তাহলে উপলভ্য সব ফিল্ড রিটার্ন করা হয় এবং বিল করা হয় (প্রোডাকশন ডিপ্লয়মেন্টের জন্য এটি সাজেস্ট করা হয় না)। ফিল্ডের তালিকা দেখতে, PlaceResult দেখুন।
    • types-এর একটি অ্যারে যা সমর্থিত প্রকার-এ তালিকাভুক্ত একটি স্পষ্ট প্রকার বা প্রকার সংগ্রহ নির্দিষ্ট করে। কোনও ধরন উল্লেখ করা না থাকলে, সব ধরন ফেরত দেওয়া হয়।
    • bounds হল একটি google.maps.LatLngBounds অবজেক্ট যা জায়গা সার্চ করার জন্য এলাকা নির্দিষ্ট করে। ফলাফলগুলি এই সীমার মধ্যে থাকা জায়গাগুলির দিকে পক্ষপাতদুষ্ট, তবে সীমাবদ্ধ নয়।
    • strictBounds হল একটি boolean যা নির্দিষ্ট করে যে API-কে অবশ্যই শুধুমাত্র সেইসব জায়গা রিটার্ন করতে হবে যা প্রদত্ত bounds দ্বারা সংজ্ঞায়িত অঞ্চলের মধ্যে কঠোরভাবে পড়ে। ব্যবহারকারীর ইনপুটের সাথে মিল থাকলেও, API এই অঞ্চলের বাইরে ফলাফল দেখায় না।
    • componentRestrictions ব্যবহার করে নির্দিষ্ট গ্রুপে ফলাফল সীমাবদ্ধ করা যেতে পারে। আপনি componentRestrictions ব্যবহার করে সর্বাধিক ৫টি দেশ ফিল্টার করতে পারবেন। দেশকে অবশ্যই দুই-অক্ষরের, ISO 3166-1 Alpha-2 মানানসই দেশের কোড হিসেবে পাস করতে হবে। একাধিক দেশ থাকলে, দেশের কোডের তালিকা হিসেবে পাস করতে হবে।

      মনে রাখবেন: কোনও দেশের কোড ব্যবহার করে অপ্রত্যাশিত ফলাফল পেলে, আপনি যে কোড ব্যবহার করছেন তাতে আপনার অভিপ্রেত দেশ, নির্ভরশীল অঞ্চল এবং ভৌগোলিক আগ্রহের বিশেষ এলাকা অন্তর্ভুক্ত আছে কিনা তা যাচাই করুন। আপনি কোড সংক্রান্ত তথ্য Wikipedia: ISO 3166 দেশের কোডের তালিকা অথবা ISO অনলাইন ব্রাউজিং প্ল্যাটফর্ম থেকে পেতে পারেন।

    • placeIdOnly ব্যবহার করে Autocomplete উইজেটকে শুধুমাত্র প্লেস আইডি ফিরিয়ে আনার নির্দেশ দেওয়া যেতে পারে। Autocomplete অবজেক্টে getPlace() কল করার সময়, PlaceResult উপলভ্য করা হলে, শুধুমাত্র place id, types এবং name প্রপার্টি সেট করা থাকবে। আপনি Places, Geocoding, Directions বা Distance Matrix পরিষেবায় কল করার জন্য রিটার্ন করা প্লেস আইডি ব্যবহার করতে পারবেন।

অটোমেটিক সম্পূর্ণ করার পূর্বাভাষ সীমাবদ্ধ করুন

ডিফল্ট হিসেবে, 'জায়গা অটোমেটিক সম্পূর্ণ করা' ফিচার সব ধরনের জায়গা দেখায়, ব্যবহারকারীর লোকেশনের কাছাকাছি জায়গার পূর্বাভাস দেয় এবং ব্যবহারকারীর বেছে নেওয়া জায়গার জন্য উপলভ্য সব ডেটা ফিল্ড নিয়ে আসে। আপনার ব্যবহারের উপর ভিত্তি করে আরও প্রাসঙ্গিক পূর্বাভাস দেখানোর জন্য জায়গা অটোমেটিক সম্পূর্ণ করার বিকল্প সেট করুন।

নির্মাণে বিকল্প সেট করুন

Autocomplete কনস্ট্রাক্টর উইজেট তৈরি করার সময় সীমাবদ্ধতা সেট করার জন্য AutocompleteOptions প্যারামিটার গ্রহণ করে। নিম্নলিখিত উদাহরণে bounds, componentRestrictions ও types বিকল্প সেট করা হয়েছে যাতে establishment ধরনের জায়গার জন্য অনুরোধ করা যায়, নির্দিষ্ট ভৌগোলিক এলাকার মধ্যে থাকা জায়গাকে অগ্রাধিকার দেওয়া যায় এবং মার্কিন যুক্তরাষ্ট্রের মধ্যে থাকা জায়গার মধ্যেই অনুমান সীমাবদ্ধ রাখা যায়। fields বিকল্প সেট করলে, ব্যবহারকারীর বেছে নেওয়া জায়গা সম্পর্কে কী তথ্য ফেরত দিতে হবে তা নির্দিষ্ট করে।

আগে থেকে থাকা উইজেটের জন্য কোনও বিকল্পের ভ্যালু পরিবর্তন করতে setOptions() কল করুন।

TypeScript

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);

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

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");
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 Data SKU-এর জন্য বিলিং এড়াতে ডেটা ফিল্ড নির্দিষ্ট করুন। আগের উদাহরণে যেমন দেখানো হয়েছে, উইজেট কনস্ট্রাক্টরে পাস করা AutocompleteOptions-এ fields প্রপার্টি অন্তর্ভুক্ত করুন অথবা আগে থেকে থাকা Autocomplete অবজেক্টে setFields() কল করুন।

autocomplete.setFields(["place_id", "geometry", "name"]);

অটোমেটিক সম্পূর্ণ করার জন্য পক্ষপাতিত্ব এবং সার্চ-এরিয়ার সীমানা নির্ধারণ করুন

আপনি নিম্নলিখিত উপায়ে আনুমানিক লোকেশন বা এলাকার জন্য অটোমেটিক সম্পূর্ণ করার ফলাফল পক্ষপাতদুষ্ট করতে পারেন:

  • Autocomplete অবজেক্ট তৈরি করার সময় বাউন্ড সেট করুন।
  • আগে থেকে থাকা Autocomplete-এর বাউন্ড পরিবর্তন করুন।
  • ম্যাপের ভিউপোর্টে বাউন্ড সেট করুন।
  • সার্চকে সীমার মধ্যে সীমাবদ্ধ করুন।
  • সার্চ ফলাফল নির্দিষ্ট কোনও দেশে সীমিত করা।

আগের উদাহরণে দেখানো হয়েছে যে তৈরি করার সময় কীভাবে বাউন্ড সেট করতে হয়। নিম্নলিখিত উদাহরণগুলি অন্যান্য পক্ষপাতমূলক কৌশল প্রদর্শন করে।

আগে থেকে থাকা অটোকমপ্লিটের বাউন্ড পরিবর্তন করুন

আগে থেকে রয়েছে এমন Autocomplete-এ সার্চ এরিয়া পরিবর্তন করে আয়তাকার বাউন্ডারি করতে setBounds() কল করুন।

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);

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

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
ম্যাপের ভিউপোর্টে বাউন্ড সেট করুন

ম্যাপের ভিউপোর্টে ফলাফল বায়াস করতে bindTo() ব্যবহার করুন, এমনকি ভিউপোর্ট পরিবর্তন হলেও।

TypeScript

autocomplete.bindTo("bounds", map);

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

autocomplete.bindTo("bounds", map);

ম্যাপের ভিউপোর্ট থেকে অটোমেটিক সম্পূর্ণ করার পূর্বাভাষ আনবাইন্ড করতে unbind() ব্যবহার করুন।

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

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

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

উদাহরণ দেখুন

বর্তমান সীমার মধ্যে সার্চ সীমাবদ্ধ করুন

বর্তমান সীমার মধ্যে ফলাফল সীমাবদ্ধ করতে strictBounds বিকল্প সেট করুন, তা ম্যাপ ভিউপোর্ট বা আয়তক্ষেত্রাকার সীমার উপর ভিত্তি করে হোক না কেন।

autocomplete.setOptions({ strictBounds: true });
নির্দিষ্ট কোনও দেশে পূর্বাভাসের সুবিধা সীমিত করা

componentRestrictions বিকল্প ব্যবহার করুন অথবা setComponentRestrictions()-এ কল করে অটোমেটিক সম্পূর্ণ হওয়া সার্চকে সর্বাধিক পাঁচটি দেশের নির্দিষ্ট সেটে সীমাবদ্ধ করুন।

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

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

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

উদাহরণ দেখুন

জায়গার ধরন সীমাবদ্ধ করুন

নির্দিষ্ট ধরনের জায়গার জন্য পূর্বাভাস সীমাবদ্ধ করতে types বিকল্প ব্যবহার করুন অথবা setTypes() কল করুন। এই সীমাবদ্ধতা একটি ধরন বা ধরনের সংগ্রহ নির্দিষ্ট করে, যেমন জায়গার ধরন-এ তালিকাভুক্ত করা আছে। কোনও সীমাবদ্ধতা উল্লেখ করা না থাকলে, সব ধরনের বিজ্ঞাপন দেখানো হয়।

types বিকল্পের ভ্যালু বা setTypes()-এ পাস করা ভ্যালুর জন্য, আপনি এগুলির মধ্যে যেকোনও একটি নির্দিষ্ট করতে পারেন:

  • জায়গার ধরন থেকে সারণী ১ বা সারণী ২-এর সর্বাধিক পাঁচটি ভ্যালু সহ একটি অ্যারে। যেমন:

    types: ['hospital', 'pharmacy', 'bakery', 'country']

    অথবা:

    autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
  • সারণী ৩-এ জায়গার ধরন থেকে যেকোনও একটি ফিল্টার। আপনি সারণী ৩ থেকে শুধুমাত্র একটি ভ্যালু নির্দিষ্ট করতে পারবেন।

অনুরোধ বাতিল করা হবে যদি:

  • আপনি পাঁচটির বেশি ধরন উল্লেখ করেছেন।
  • আপনি যেকোনও অচেনা ধরন নির্দিষ্ট করেন।
  • আপনি সারণী ১ বা সারণী ২ থেকে যেকোনও ধরনের ফিল্টার সারণী ৩-এর যেকোনও ফিল্টারের সাথে মিশিয়ে নিতে পারেন।

জায়গা অটোমেটিক সম্পূর্ণ করার ডেমো বিভিন্ন ধরনের জায়গার মধ্যে পূর্বাভাসের পার্থক্য দেখায়।

ডেমো দেখুন

জায়গার তথ্য পাওয়া যাচ্ছে

ব্যবহারকারী অটোকমপ্লিট টেক্সট ফিল্ডের সাথে অ্যাটাচ করা অনুমান থেকে কোনও জায়গা বেছে নিলে, পরিষেবাটি place_changed ইভেন্ট ফায়ার করে। জায়গার বিবরণ পেতে:

  1. place_changed ইভেন্টের জন্য একটি ইভেন্ট হ্যান্ডলার তৈরি করুন এবং হ্যান্ডলার যোগ করতে Autocomplete অবজেক্টে addListener() কল করুন।
  2. Autocomplete অবজেক্টে Autocomplete.getPlace() কল করুন, যাতে PlaceResult অবজেক্ট ফিরিয়ে আনা যায়, যা আপনি পরে বেছে নেওয়া জায়গা সম্পর্কে আরও তথ্য পেতে ব্যবহার করতে পারবেন।

ডিফল্ট হিসেবে, কোনও ব্যবহারকারী জায়গা বেছে নিলে, অটোমেটিক সম্পূর্ণ করার ফিচার বেছে নেওয়া জায়গার জন্য উপলভ্য সব ডেটা ফিল্ড দেখায় এবং সেই অনুযায়ী আপনাকে বিল করা হবে। কোন কোন জায়গার ডেটা ফিল্ড ফেরত দিতে হবে তা নির্দিষ্ট করতে Autocomplete.setFields() ব্যবহার করুন। PlaceResult অবজেক্ট সম্পর্কে আরও পড়ুন, এর মধ্যে আপনি অনুরোধ করতে পারেন এমন জায়গার ডেটা ফিল্ডের তালিকাও অন্তর্ভুক্ত আছে। আপনার প্রয়োজন নেই এমন ডেটার জন্য পেমেন্ট করা এড়াতে, আপনি যে ডেটা ব্যবহার করবেন শুধুমাত্র সেই ডেটা নির্দিষ্ট করতে Autocomplete.setFields() ব্যবহার করুন।

name প্রপার্টিতে description থাকে যা জায়গা অটোমেটিক সম্পূর্ণ করার পূর্বাভাষ থেকে পাওয়া যায়। আপনি জায়গা অটোমেটিক সম্পূর্ণ করার ডকুমেন্টেশন-এ description সম্পর্কে আরও পড়তে পারেন।

ঠিকানার ফর্মের ক্ষেত্রে, স্ট্রাকচার্ড ফর্ম্যাটে ঠিকানা পাওয়াটা উপযোগী। বেছে নেওয়া জায়গার জন্য স্ট্রাকচার্ড অ্যাড্রেস ফেরত পেতে, Autocomplete.setFields() কল করুন এবং address_components ফিল্ড নির্দিষ্ট করুন।

নিম্নলিখিত উদাহরণে, ঠিকানার ফর্মে ফিল্ড পূরণ করতে অটোকমপ্লিট ব্যবহার করা হয়।

TypeScript

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 অ্যাটাচ করতে পারেন এবং টেক্সট লেখা হলে, পরিষেবাটি ড্রপ-ডাউন পিক লিস্টের আকারে অনুমান দেখাবে।

SearchBox পূর্বাভাসের একটি বর্ধিত তালিকা প্রদান করে, যার মধ্যে জায়গা (Places API দ্বারা সংজ্ঞায়িত) এবং সাজেস্ট করা সার্চ কোয়েরি অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী 'pizza in new' লিখলে, বাছাই করা তালিকায় 'pizza in New York, NY' বাক্যাংশের পাশাপাশি বিভিন্ন পিৎজা আউটলেটের নামও থাকতে পারে। ব্যবহারকারী তালিকা থেকে কোনও জায়গা বেছে নিলে, সেই জায়গা সম্পর্কিত তথ্য SearchBox অবজেক্টে ফেরত পাঠানো হয় এবং আপনার অ্যাপ্লিকেশন তা ফিরিয়ে আনতে পারে।

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 অবজেক্ট।

PlaceResult অবজেক্ট সম্পর্কে আরও তথ্যের জন্য, জায়গার বিবরণ সংক্রান্ত ফলাফল-এর ডকুমেন্টেশন দেখুন।

TypeScript

// 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);
});

উদাহরণ দেখুন

উইজেটের চেহারা কাস্টমাইজ করতে অটোমেটিক সম্পূর্ণ হওয়া এবং SearchBox উইজেট স্টাইল করা দেখুন।

প্রোগ্রাম্যাটিক্যালি জায়গা অটোমেটিক সম্পূর্ণ করার পরিষেবা সংক্রান্ত পূর্বাভাস ফিরিয়ে আনা

প্রোগ্রাম্যাটিক্যালি পূর্বাভাস পেতে, AutocompleteService ক্লাস ব্যবহার করুন। AutocompleteService কোনও UI কন্ট্রোল যোগ করে না। পরিবর্তে, এটি পূর্বাভাসের অবজেক্টের একটি অ্যারে প্রদান করে, যার প্রতিটিতে পূর্বাভাসের টেক্সট, রেফারেন্স তথ্য এবং ফলাফল কীভাবে ব্যবহারকারীর ইনপুটের সাথে মেলে তার বিবরণ থাকে। আপনি যদি ইউজার ইন্টারফেসের উপর আরও বেশি কন্ট্রোল চান, তাহলে এটি উপযোগী হবে। উপরে বর্ণিত Autocomplete এবং SearchBox দ্বারা এটি অফার করা হয়।

AutocompleteService নিম্নলিখিত পদ্ধতিগুলি প্রকাশ করে:

  • getPlacePredictions() জায়গার পূর্বাভাস প্রদান করে। মনে রাখবেন: Places API-এর সংজ্ঞা অনুযায়ী, 'জায়গা' বলতে কোনও প্রতিষ্ঠান, ভৌগোলিক লোকেশন বা উল্লেখযোগ্য স্থানকে বোঝায়।
  • getQueryPredictions() পূর্বাভাসের একটি বর্ধিত তালিকা প্রদান করে, যার মধ্যে জায়গা (Places API দ্বারা সংজ্ঞায়িত) এবং সাজেস্ট করা সার্চ করা শব্দ অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী যদি 'pizza in new' লেখেন, তাহলে বাছাই করা তালিকায় 'pizza in New York, NY' বাক্যাংশের পাশাপাশি বিভিন্ন পিৎজা আউটলেটের নামও থাকতে পারে।

উপরের দুটি পদ্ধতিই নিম্নলিখিত ফর্মের পূর্বাভাস অবজেক্টের একটি অ্যারে রিটার্ন করে:

  • description হল মিলে যাওয়া পূর্বাভাস।
  • distance_meters হল নির্দিষ্ট AutocompletionRequest.origin থেকে জায়গাটির দূরত্ব মিটারে।
  • matched_substrings-এর বিবরণে সাবস্ট্রিংয়ের একটি সেট আছে যা ব্যবহারকারীর ইনপুটের এলিমেন্টের সাথে মেলে। আপনার অ্যাপ্লিকেশনে সেই সাবস্ট্রিং হাইলাইট করার জন্য এটি উপযোগী। অনেক ক্ষেত্রে, কোয়েরিটি বিবরণ ফিল্ডের সাবস্ট্রিং হিসেবে দেখা যাবে।
    • length হল সাবস্ট্রিংয়ের দৈর্ঘ্য।
    • offset হল অক্ষর অফসেট, যা বিবরণ স্ট্রিংয়ের শুরু থেকে পরিমাপ করা হয়, যেখানে মিলে যাওয়া সাবস্ট্রিং দেখা যায়।
  • place_id হল একটি টেক্সট শনাক্তকারী যা অনন্যভাবে কোনও জায়গা শনাক্ত করে। জায়গাটি সম্পর্কে তথ্য পেতে, এই শনাক্তকারীকে জায়গার বিবরণ অনুরোধ-এর placeId ফিল্ডে পাস করুন। কীভাবে প্লেস আইডি দিয়ে কোনও জায়গার রেফারেন্স দেবেন সেই সম্পর্কে আরও জানুন।
  • terms হল একটি অ্যারে যাতে কোয়েরির এলিমেন্ট থাকে। কোনও জায়গার ক্ষেত্রে, প্রতিটি এলিমেন্ট সাধারণত ঠিকানার একটি অংশ তৈরি করবে।
    • offset হল অক্ষর অফসেট, যা বিবরণ স্ট্রিংয়ের শুরু থেকে পরিমাপ করা হয়, যেখানে মিলে যাওয়া সাবস্ট্রিং দেখা যায়।
    • value হল ম্যাচিং শব্দ।

নিচের উদাহরণে 'কাছাকাছি পিৎজা' শব্দগুচ্ছের জন্য কোয়েরি পূর্বাভাসের অনুরোধ এক্সিকিউট করা হয়েছে এবং ফলাফল একটি তালিকায় দেখানো হয়েছে।

TypeScript

// 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;

CSS

HTML

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

প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক Autocomplete সেশনের জন্য একই টোকেন ব্যবহার করলে, সেইসব Autocomplete সেশন বাতিল হয়ে যাবে এবং বাতিল সেশনে সব Autocomplete অনুরোধের জন্য প্রতি অনুরোধে Autocomplete 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);

প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক সেশনের জন্য একই টোকেন ব্যবহার করলে প্রতিটি অনুরোধের জন্য আলাদাভাবে বিল করা হবে।

সেশন টোকেন সম্পর্কে আরও জানুন।

অটোমেটিক সম্পূর্ণ করা এবং SearchBox উইজেট স্টাইল করা

ডিফল্ট হিসেবে, Autocomplete এবং SearchBox-এর মাধ্যমে প্রদান করা UI এলিমেন্ট Google ম্যাপে অন্তর্ভুক্ত করার জন্য স্টাইল করা হয়। আপনার সাইটের সাথে মানানসই করতে আপনি স্টাইলিং অ্যাডজাস্ট করতে চাইতে পারেন। নিম্নলিখিত CSS ক্লাস উপলভ্য। নিচে তালিকাভুক্ত সব ক্লাস Autocomplete এবং SearchBox উইজেট, দুটির ক্ষেত্রেই প্রযোজ্য।

অটোকমপ্লিট এবং সার্চবক্স উইজেটের জন্য CSS ক্লাসের গ্রাফিক্যাল ইলাস্ট্রেশন
অটোকমপ্লিট ও সার্চবক্স উইজেটের জন্য CSS ক্লাস
CSS ক্লাস বিবরণ
pac-container ভিজ্যুয়াল এলিমেন্ট যাতে Place Autocomplete পরিষেবার মাধ্যমে ফেরত পাঠানো পূর্বাভাসের তালিকা থাকে। এই তালিকাটি Autocomplete বা SearchBox উইজেটের নিচে ড্রপ-ডাউন তালিকা হিসেবে দেখা যায়।
pac-icon পূর্বানুমানের তালিকায় প্রতিটি আইটেমের বাঁদিকে দেখানো আইকন।
pac-item Autocomplete বা SearchBox উইজেটের মাধ্যমে প্রদান করা পূর্বাভাসের তালিকায় থাকা একটি আইটেম।
pac-item:hover ব্যবহারকারী মাউস পয়েন্টার নিয়ে গেলে আইটেমটি কেমন দেখাবে।
pac-item-selected ব্যবহারকারী কীবোর্ড ব্যবহার করে আইটেমটি বেছে নিলে। মনে রাখবেন: বেছে নেওয়া আইটেমগুলি এই ক্লাস এবং pac-item ক্লাসের মেম্বার হবে।
pac-item-query pac-item-এর মধ্যে একটি স্প্যান যা পূর্বাভাসের প্রধান অংশ। ভৌগোলিক লোকেশনের ক্ষেত্রে, এতে জায়গার নাম থাকে, যেমন 'সিডনি' অথবা রাস্তার নাম ও নম্বর, যেমন '১০ কিং স্ট্রিট'। 'নিউ ইয়র্কে পিৎজা'-এর মতো টেক্সট-ভিত্তিক সার্চের ক্ষেত্রে, এতে কোয়েরির সম্পূর্ণ টেক্সট থাকে। ডিফল্ট হিসেবে, pac-item-query-এর রঙ কালো হয়। pac-item-এ কোনও অতিরিক্ত টেক্সট থাকলে, সেটি pac-item-query-এর বাইরে থাকে এবং pac-item থেকে স্টাইলিং ইনহেরিট করে। ডিফল্ট হিসেবে এটি ধূসর রঙের হয়। অতিরিক্ত টেক্সট সাধারণত একটি ঠিকানা হয়।
pac-matched ব্যবহারকারীর ইনপুটের সাথে মিলে যাওয়া রিটার্ন করা পূর্বাভাসের অংশ। ডিফল্ট হিসেবে, এই ম্যাচ করা টেক্সট মোটা হরফে হাইলাইট করা হয়। মনে রাখবেন যে, মিলে যাওয়া টেক্সট pac-item-এর মধ্যে যেকোনও জায়গায় থাকতে পারে। এটি pac-item-query-এর অংশ নাও হতে পারে এবং এটি আংশিকভাবে pac-item-query-এর মধ্যে এবং আংশিকভাবে pac-item-এর বাকি টেক্সটের মধ্যে থাকতে পারে।

Place Autocomplete (Legacy) অপ্টিমাইজেশন

এই বিভাগে, Place Autocomplete (Legacy) পরিষেবা থেকে সর্বাধিক সুবিধা পেতে আপনাকে সাহায্য করার জন্য পেশাদার পদ্ধতিগুলি বর্ণনা করা হয়েছে।

এখানে কিছু সাধারণ নির্দেশিকা দেওয়া হল:

  • কাজ করে এমন ইউজার ইন্টারফেস ডেভেলপ করার সবচেয়ে দ্রুত উপায় হল Maps JavaScript API জায়গা অটোমেটিক সম্পূর্ণ করা (Legacy) উইজেট, Android-এর জন্য Places SDK জায়গা অটোমেটিক সম্পূর্ণ করা (Legacy) উইজেট, অথবা iOS-এর জন্য Places SDK জায়গা অটোমেটিক সম্পূর্ণ করা (Legacy) UI কন্ট্রোল ব্যবহার করা।
  • শুরু থেকেই Place Autocomplete (Legacy) ডেটা ফিল্ড সম্পর্কে প্রয়োজনীয় তথ্য জেনে নিন।
  • লোকেশন বায়াসিং ও লোকেশন সংক্রান্ত বিধিনিষেধের ফিল্ডগুলি ঐচ্ছিক হলেও, অটো-কমপ্লিট পারফর্ম্যান্সের উপর এগুলির উল্লেখযোগ্য প্রভাব থাকতে পারে।
  • API কোনও সমস্যা রিটার্ন করলে, আপনার অ্যাপ যাতে ঠিকভাবে কাজ করা বন্ধ করে দেয় তা নিশ্চিত করতে সমস্যা ম্যানেজ করার সুবিধা ব্যবহার করুন।
  • কোনও কিছু বেছে না নেওয়া হলে আপনার অ্যাপ যেন সেটি ম্যানেজ করতে পারে এবং ব্যবহারকারীকে চালিয়ে যাওয়ার উপায় অফার করে তা নিশ্চিত করুন।

খরচ অপ্টিমাইজ করার পেশাদার পদ্ধতি

প্রাথমিক খরচ অপ্টিমাইজেশন

Place Autocomplete (Legacy) পরিষেবা ব্যবহারের খরচ অপ্টিমাইজ করতে, Place Details (Legacy) এবং Place Autocomplete (Legacy) উইজেটে ফিল্ড মাস্ক ব্যবহার করুন যাতে শুধুমাত্র Place Autocomplete (Legacy) ডেটা ফিল্ড ফেরত পাওয়া যায়।

উন্নত খরচ অপ্টিমাইজেশন

Place Autocomplete (Legacy) অ্যাক্সেস করার জন্য প্রোগ্রাম্যাটিক ইমপ্লিমেন্টেশন বিবেচনা করুন SKU: Autocomplete - প্রতি অনুরোধের জন্য মূল্য এবং Place Details (Legacy)-এর পরিবর্তে বেছে নেওয়া জায়গার জন্য Geocoding API ফলাফল অনুরোধ করুন। Geocoding API-এর সাথে পেয়ার করা প্রতি-অনুরোধের মূল্য প্রতি-সেশন (সেশন-ভিত্তিক) মূল্যের চেয়ে বেশি সাশ্রয়ী হয় যদি নিম্নলিখিত দুটি শর্তই পূরণ হয়:

  • ব্যবহারকারীর বেছে নেওয়া জায়গার শুধু অক্ষাংশ ও দ্রাঘিমাংশ বা ঠিকানা প্রয়োজন হলে, Geocoding API এই তথ্য প্রদান করে, যা জায়গার বিবরণ (লিগ্যাসি) কলের চেয়ে কম।
  • ব্যবহারকারীরা যদি গড়ে চারটি বা তার কম প্লেস অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) পূর্বাভাসের অনুরোধের মধ্যে একটি অটোমেটিক সম্পূর্ণ করার পূর্বাভাস বেছে নেন, তাহলে প্রতি-অনুরোধের মূল্য প্রতি-সেশনের মূল্যের চেয়ে বেশি সাশ্রয়ী হতে পারে।
আপনার প্রয়োজন অনুযায়ী জায়গা অটোমেটিক সম্পূর্ণ করা (পুরনো) ইমপ্লিমেন্টেশন বেছে নেওয়ার ব্যাপারে সাহায্য পেতে, নিম্নলিখিত প্রশ্নের উত্তর অনুযায়ী ট্যাব বেছে নিন।

আপনার অ্যাপ্লিকেশনে কি বেছে নেওয়া পূর্বাভাসের ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ ছাড়া অন্য কোনও তথ্য প্রয়োজন?

হ্যাঁ, আরও বিবরণ প্রয়োজন

জায়গার বিবরণ (লিগ্যাসি) সহ সেশন-ভিত্তিক জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) ব্যবহার করুন।
আপনার অ্যাপ্লিকেশনের জন্য জায়গার বিবরণ (লিগ্যাসি) প্রয়োজন, যেমন জায়গার নাম, ব্যবসার স্ট্যাটাস বা খোলা থাকার সময়, তাই আপনার Place Autocomplete (লিগ্যাসি) প্রয়োগের ক্ষেত্রে সেশন টোকেন (প্রোগ্রাম্যাটিক্যালি বা JavaScript, Android বা iOS উইজেটে বিল্ট-ইন) প্রতি সেশনে এবং প্রযোজ্য Places Data SKU ব্যবহার করা উচিত, আপনি কোন কোন জায়গার ডেটা ফিল্ডের জন্য অনুরোধ করছেন তার উপর নির্ভর করে।১

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android, অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে জায়গা অটোমেটিক সম্পূর্ণ করা (পুরনো) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর জায়গার বিবরণ (পুরনো) অনুরোধ অন্তর্ভুক্ত। আপনার প্রয়োজনীয় জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) ডেটা ফিল্ড শুধুমাত্র অনুরোধ করছেন কিনা তা নিশ্চিত করতে fields প্যারামিটার উল্লেখ করতে ভুলবেন না।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার Place Autocomplete (Legacy) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য জায়গার বিবরণ (পুরনো) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

  1. প্লেস অটোকমপ্লিট (লিগ্যাসি) রেসপন্স থেকে প্লেস আইডি
  2. জায়গা অটোমেটিক সম্পূর্ণ করা (পুরনো) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
  3. fields প্যারামিটার আপনার প্রয়োজনীয় জায়গা অটোমেটিক সম্পূর্ণ করা (Legacy) ডেটা ফিল্ড নির্দিষ্ট করে

না, শুধু ঠিকানা ও লোকেশন প্রয়োজন

আপনার Place Autocomplete (Legacy) ব্যবহারের পারফর্ম্যান্সের উপর নির্ভর করে, Geocoding API আপনার অ্যাপ্লিকেশনের জন্য Place Details (Legacy)-এর চেয়ে বেশি সাশ্রয়ী বিকল্প হতে পারে। প্রতিটি অ্যাপ্লিকেশনের Place Autocomplete (Legacy) কার্যকারিতা নির্ভর করে ব্যবহারকারীরা কী লিখছেন, অ্যাপ্লিকেশনটি কোথায় ব্যবহার করা হচ্ছে এবং পারফর্ম্যান্স অপ্টিমাইজেশনের পেশাদার পদ্ধতি প্রয়োগ করা হয়েছে কিনা তার উপর।

নিম্নলিখিত প্রশ্নের উত্তর দিতে, আপনার অ্যাপ্লিকেশনে প্লেস অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) পূর্বাভাস বেছে নেওয়ার আগে একজন ব্যবহারকারী গড়ে কতগুলি অক্ষর টাইপ করেন তা বিশ্লেষণ করুন।

আপনার ব্যবহারকারীরা কি গড়ে চার বা তার কম অনুরোধে প্লেস অটোকমপ্লিট (লিগ্যাসি) সংক্রান্ত পূর্বাভাস বেছে নেন?

হ্যাঁ

সেশন টোকেন ছাড়াই প্রোগ্রাম্যাটিকভাবে Place Autocomplete (Legacy) প্রয়োগ করুন এবং বেছে নেওয়া জায়গার পূর্বাভাসের উপর Geocoding API কল করুন।
Geocoding API ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক প্রদান করে। চারটি Autocomplete - Per Request অনুরোধ এবং বেছে নেওয়া জায়গার পূর্বাভাসের জন্য একটি Geocoding API কল করার খরচ সেশন প্রতি Place Autocomplete (Legacy) খরচের চেয়ে কম।১

আপনার ব্যবহারকারীরা যাতে আরও কম অক্ষর ব্যবহার করে তাদের কাঙ্ক্ষিত পূর্বাভাস পেতে পারেন, তার জন্য পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করার কথা বিবেচনা করুন।

না

জায়গার বিবরণ (লিগ্যাসি) সহ সেশন-ভিত্তিক জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) ব্যবহার করুন।
ব্যবহারকারী কোনও Place Autocomplete (Legacy) পূর্বাভাস বেছে নেওয়ার আগে আপনি যতগুলি অনুরোধ করবেন বলে আশা করেন, তার গড় সংখ্যা সেশন প্রতি দামের থেকে বেশি হয়, তাই আপনার Place Autocomplete (Legacy) প্রয়োগের ক্ষেত্রে Place Autocomplete (Legacy) অনুরোধ এবং সংশ্লিষ্ট Place Details (Legacy) অনুরোধ, উভয়ের জন্যই সেশন টোকেন ব্যবহার করা উচিত সেশন প্রতি। ১

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর জায়গার বিবরণ (লিগ্যাসি) অনুরোধ, দুটিই অন্তর্ভুক্ত। আপনার প্রয়োজনীয় ফিল্ডের জন্য অনুরোধ করছেন কিনা তা নিশ্চিত করতে fields প্যারামিটার উল্লেখ করতে ভুলবেন না।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার Place Autocomplete (Legacy) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য জায়গার বিবরণ (পুরনো) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

  1. প্লেস অটোকমপ্লিট (লিগ্যাসি) রেসপন্স থেকে প্লেস আইডি
  2. জায়গা অটোমেটিক সম্পূর্ণ করা (পুরনো) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
  3. fields প্যারামিটার প্রাথমিক ডেটা ফিল্ড নির্দিষ্ট করে যেমন ঠিকানা ও জ্যামিতি

প্লেস অটোকমপ্লিট (লিগ্যাসি) অনুরোধে দেরি করার কথা বিবেচনা করুন
আপনি এমন কৌশল অবলম্বন করতে পারেন যেমন ব্যবহারকারী প্রথম তিন বা চারটি অক্ষর টাইপ না করা পর্যন্ত প্লেস অটোকমপ্লিট (লিগ্যাসি) অনুরোধে দেরি করা যাতে আপনার অ্যাপ্লিকেশন কম অনুরোধ করে। যেমন, ব্যবহারকারী তৃতীয় অক্ষর টাইপ করার পরে প্রতিটি অক্ষরের জন্য Place Autocomplete (Legacy) অনুরোধ করার অর্থ হল, ব্যবহারকারী সাতটি অক্ষর টাইপ করে একটি সাজেশন বেছে নিলে, যার জন্য আপনি একটি Geocoding API অনুরোধ করেন, তাহলে মোট খরচ হবে ৪টি Place Autocomplete (Legacy) প্রতি অনুরোধ + Geocoding।১

অনুরোধে দেরি করার ফলে আপনার গড় প্রোগ্রাম্যাটিক অনুরোধ চারের কম হলে, আপনি Geocoding API-এর সাথে পারফর্ম্যান্ট Place Autocomplete (Legacy) প্রয়োগ করার নির্দেশিকা অনুসরণ করতে পারেন। মনে রাখবেন, অনুরোধ পাঠাতে দেরি হলে ব্যবহারকারী মনে করতে পারেন যে লেটেন্সি হচ্ছে, কারণ তিনি হয়ত প্রতিটি নতুন কিস্ট্রোকে সাজেশন দেখতে চান।

আপনার ব্যবহারকারীরা যাতে কম অক্ষর ব্যবহার করেই তাদের প্রয়োজনীয় পূর্বাভাস পেতে পারেন, তার জন্য পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করার কথা বিবেচনা করুন।

  1. খরচের জন্য, Google Maps Platform-এর দামের তালিকা দেখুন।

পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি

নিচে উল্লেখ করা নির্দেশিকায় জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) পারফর্ম্যান্স অপ্টিমাইজ করার উপায় বর্ণনা করা হয়েছে:

  • আপনার 'জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি)' ইমপ্লিমেন্টেশনে নিষেধাজ্ঞা আছে এমন দেশ, লোকেশন বায়াসিং এবং (প্রোগ্রাম্যাটিক ইমপ্লিমেন্টেশনের জন্য) পছন্দের ভাষা যোগ করুন। উইজেটের ক্ষেত্রে ভাষার পছন্দ সেট করার প্রয়োজন নেই কারণ এটি ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষার পছন্দ বেছে নেয়।
  • জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) ফিচারের সাথে ম্যাপ থাকলে, আপনি ম্যাপ ভিউপোর্ট অনুযায়ী লোকেশন বায়াস করতে পারবেন।
  • এমন পরিস্থিতিতে যখন কোনও ব্যবহারকারী জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) সংক্রান্ত পূর্বাভাসের মধ্যে থেকে কোনও একটি বেছে নেন না, সাধারণত কারণ সেইসব পূর্বাভাসের মধ্যে কোনওটিই কাঙ্ক্ষিত ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করতে ব্যবহারকারীর আসল ইনপুট আবার ব্যবহার করতে পারেন:
    • আপনি যদি আশা করেন যে ব্যবহারকারী শুধুমাত্র ঠিকানা সংক্রান্ত তথ্য লিখবেন, তাহলে Geocoding API-তে কল করার সময় ব্যবহারকারীর আসল ইনপুট আবার ব্যবহার করুন।
    • ব্যবহারকারী নাম বা ঠিকানা দিয়ে নির্দিষ্ট কোনও জায়গার জন্য কোয়েরি লিখবেন বলে আপনি আশা করলে, জায়গার বিবরণ (লিগ্যাসি) সংক্রান্ত অনুরোধ ব্যবহার করুন। শুধুমাত্র নির্দিষ্ট অঞ্চলে ফলাফল প্রত্যাশিত হলে, লোকেশন বায়াসিং ব্যবহার করুন।
    অন্যান্য পরিস্থিতিতে Geocoding API-তে ফিরে যাওয়া সবচেয়ে ভালো, যার মধ্যে রয়েছে:
    • ব্যবহারকারীরা সাব-প্রিমাইজ ঠিকানা ইনপুট করছেন, যেমন কোনও বিল্ডিংয়ের মধ্যে নির্দিষ্ট ইউনিট বা অ্যাপার্টমেন্টের ঠিকানা। যেমন, চেক প্রজাতন্ত্রের ঠিকানা "Stroupežnického 3191/17, Praha" জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি) ফিচারে আংশিক পূর্বাভাস দেখায়।
    • ব্যবহারকারীরা রাস্তার সেগমেন্ট প্রিফিক্স সহ ঠিকানা ইনপুট করছেন, যেমন নিউ ইয়র্ক সিটিতে "23-30 29th St, Queens" বা হাওয়াইয়ের কাউয়াই দ্বীপে "47-380 Kamehameha Hwy, Kaneohe"।

লোকেশন বায়াসিং

location প্যারামিটার ও radius প্যারামিটার পাস করে নির্দিষ্ট এলাকার জন্য পক্ষপাতদুষ্ট ফলাফল দেখান। এটি 'জায়গা অটোমেটিক সম্পূর্ণ করা (লিগ্যাসি)' ফিচারকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখানোর জন্য অগ্রাধিকার দিতে নির্দেশ দেয়। নির্দিষ্ট করা এলাকার বাইরের ফলাফল এখনও দেখানো হতে পারে। আপনি includedRegionCodes প্যারামিটার ব্যবহার করে ফলাফল ফিল্টার করতে পারেন যাতে শুধুমাত্র নির্দিষ্ট দেশের মধ্যে থাকা জায়গাগুলি দেখানো হয়।

লোকেশন সংক্রান্ত বিধিনিষেধ

locationRestriction প্যারামিটার পাস করে ফলাফল নির্দিষ্ট এলাকায় সীমাবদ্ধ করুন।

এছাড়াও, আপনি location এবং radius প্যারামিটার দ্বারা নির্ধারিত অঞ্চলে ফলাফল সীমাবদ্ধ করতে পারেন, এর জন্য strictbounds প্যারামিটার যোগ করতে হবে। এটি জায়গা অটোমেটিক সম্পূর্ণ করা (Legacy) ফিচারকে নির্দেশ দেয় যাতে সেটি শুধুমাত্র সেই অঞ্চলের মধ্যে ফলাফল দেখায়।

ব্যবহারের সীমা

কোটা

কোটা ও দাম সংক্রান্ত তথ্যের জন্য, Places API-এর ব্যবহার ও বিলিং সংক্রান্ত ডকুমেন্টেশন দেখুন।