স্বয়ংসম্পূর্ণ রাখুন

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

এই পৃষ্ঠায় ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর সাথে উপলব্ধ ক্লায়েন্ট-সাইড লাইব্রেরি সম্পর্কে বর্ণনা করা হয়েছে। আপনি যদি আপনার সার্ভারে প্লেসেস এপিআই ওয়েব সার্ভিস নিয়ে কাজ করতে চান, তাহলে গুগল ম্যাপস সার্ভিসেস-এর জন্য নোড.জেএস ক্লায়েন্টটি দেখুন। ঐ লিঙ্কের পৃষ্ঠাটিতে গুগল ম্যাপস সার্ভিসেস-এর জন্য জাভা ক্লায়েন্ট, পাইথন ক্লায়েন্ট এবং গো ক্লায়েন্টেরও পরিচিতি দেওয়া হয়েছে।

ভূমিকা

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

শুরু করা হচ্ছে

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

আপনার সক্রিয় API-গুলির তালিকা দেখতে:

  1. গুগল ক্লাউড কনসোলে যান।
  2. 'Select a project' বোতামে ক্লিক করুন, তারপর আপনি Maps JavaScript API-এর জন্য যে প্রজেক্টটি সেট আপ করেছিলেন সেটিই নির্বাচন করুন এবং 'Open'-এ ক্লিক করুন।
  3. ড্যাশবোর্ডে থাকা API-এর তালিকা থেকে Places API খুঁজুন।
  4. যদি আপনি তালিকায় API-টি দেখতে পান, তাহলে আপনার আর কিছু করার নেই। তবে, এই প্রজেক্টটি Legacy স্ট্যাটাসে রয়েছে। Legacy পর্যায় এবং Legacy থেকে নতুন পরিষেবাগুলিতে কীভাবে মাইগ্রেট করতে হয় সে সম্পর্কে আরও তথ্যের জন্য, Legacy products and features দেখুন। Autocomplete এবং SearchBox উইজেটগুলির জন্য একটি ব্যতিক্রম রয়েছে, যেগুলি Places API (New)-তে এখনও GA প্রোডাক্ট হিসাবে উপলব্ধ নয়।

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

Places সার্ভিসটি একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, যা মূল Maps জাভাস্ক্রিপ্ট 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>

আরও তথ্যের জন্য গ্রন্থাগারসমূহের সংক্ষিপ্ত বিবরণ দেখুন।

শ্রেণীসমূহের সারাংশ

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

উপলব্ধ ক্লাসগুলোর একটি সংক্ষিপ্ত বিবরণ নিচে দেওয়া হলো:

  • Autocomplete আপনার ওয়েব পেজে একটি টেক্সট ইনপুট ফিল্ড যোগ করে এবং সেই ফিল্ডে করা অক্ষরের প্রবেশ পর্যবেক্ষণ করে। ব্যবহারকারী যখন টেক্সট প্রবেশ করান, তখন অটোকমপ্লিট একটি ড্রপ-ডাউন তালিকার আকারে সম্ভাব্য স্থানের তালিকা ফেরত দেয়। ব্যবহারকারী যখন তালিকা থেকে কোনো স্থান নির্বাচন করেন, তখন সেই স্থান সম্পর্কিত তথ্য অটোকমপ্লিট অবজেক্টে ফেরত আসে এবং আপনার অ্যাপ্লিকেশন তা পুনরুদ্ধার করতে পারে। বিস্তারিত নিচে দেখুন।
    একটি স্বয়ংক্রিয় পূরণের টেক্সট ফিল্ড, এবং ব্যবহারকারী সার্চ কোয়েরি প্রবেশ করানোর সাথে সাথে সরবরাহ করা স্থানের পূর্বাভাসের একটি বাছাই তালিকা।
    চিত্র ১: অটোকমপ্লিট টেক্সট ফিল্ড এবং পিক লিস্ট
    একটি পূরণকৃত ঠিকানা ফর্ম।
    চিত্র ২: পূরণকৃত ঠিকানা ফর্ম
  • SearchBox আপনার ওয়েব পেজে Autocomplete মতোই একটি টেক্সট ইনপুট ফিল্ড যোগ করে। পার্থক্যগুলো নিম্নরূপ:
    • মূল পার্থক্যটি হলো পিক লিস্টে প্রদর্শিত ফলাফল। SearchBox ভবিষ্যদ্বাণীর একটি বর্ধিত তালিকা সরবরাহ করে, যার মধ্যে স্থান (প্লেসেস এপিআই দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত সার্চ টার্ম অন্তর্ভুক্ত থাকতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী 'pizza in new' টাইপ করেন, তাহলে পিক লিস্টে 'pizza in New York, NY' এই বাক্যাংশটির পাশাপাশি বিভিন্ন পিজ্জা আউটলেটের নামও অন্তর্ভুক্ত থাকতে পারে।
    • সার্চ সীমাবদ্ধ করার ক্ষেত্রে Autocomplete তুলনায় SearchBox বিকল্প কম থাকে। প্রথমটিতে, আপনি একটি নির্দিষ্ট অক্ষাংশ ও দ্রাঘিমাংশের LatLngBounds দিকে সার্চকে পক্ষপাতদুষ্ট করতে পারেন। দ্বিতীয়টিতে, আপনি সীমানা নির্ধারণ করার পাশাপাশি সার্চকে একটি নির্দিষ্ট দেশ ও স্থানের ধরনের মধ্যে সীমাবদ্ধ করতে পারেন। আরও তথ্যের জন্য, নিচে দেখুন।
    একটি পূরণকৃত ঠিকানা ফর্ম।
    চিত্র ৩: একটি সার্চবক্স অনুসন্ধানের শব্দ এবং স্থানের পূর্বাভাস উপস্থাপন করে।
    বিস্তারিত নিচে দেখুন।
  • আপনি প্রোগ্রাম্যাটিকভাবে প্রেডিকশন (পূর্বাভাস) পাওয়ার জন্য একটি 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 যা নির্দিষ্ট করে যে এপিআই-কে অবশ্যই শুধুমাত্র সেই স্থানগুলি ফেরত দিতে হবে কিনা যা প্রদত্ত bounds দ্বারা সংজ্ঞায়িত অঞ্চলের মধ্যে কঠোরভাবে অবস্থিত। এপিআই এই অঞ্চলের বাইরের ফলাফল ফেরত দেয় না, এমনকি যদি সেগুলি ব্যবহারকারীর ইনপুটের সাথে মিলে যায়।
    • ফলাফলকে নির্দিষ্ট গোষ্ঠীর মধ্যে সীমাবদ্ধ করতে componentRestrictions ব্যবহার করা যেতে পারে। আপনি componentRestrictions ব্যবহার করে সর্বোচ্চ ৫টি দেশ দ্বারা ফিল্টার করতে পারেন। দেশগুলোকে অবশ্যই দুই-অক্ষরের, ISO 3166-1 Alpha-2 সামঞ্জস্যপূর্ণ কান্ট্রি কোড হিসেবে প্রদান করতে হবে। একাধিক দেশকে কান্ট্রি কোডের একটি তালিকা হিসেবে প্রদান করতে হবে।

      দ্রষ্টব্য: যদি কোনো কান্ট্রি কোড দিয়ে অপ্রত্যাশিত ফলাফল পান, তবে যাচাই করে নিন যে আপনি এমন একটি কোড ব্যবহার করছেন যাতে আপনার কাঙ্ক্ষিত দেশ, অধীনস্থ অঞ্চল এবং ভৌগোলিকভাবে গুরুত্বপূর্ণ বিশেষ এলাকাগুলো অন্তর্ভুক্ত রয়েছে। আপনি উইকিপিডিয়ার 'List of ISO 3166 country codes' অথবা ISO অনলাইন ব্রাউজিং প্ল্যাটফর্মে কোড সম্পর্কিত তথ্য খুঁজে পেতে পারেন।

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

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

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

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

উইজেট তৈরির সময় সীমাবদ্ধতা নির্ধারণ করার জন্য Autocomplete কনস্ট্রাক্টর একটি AutocompleteOptions প্যারামিটার গ্রহণ করে। নিম্নলিখিত উদাহরণটি ' bounds , componentRestrictions ', এবং types অপশনগুলো সেট করে ' establishment ধরন' অনুযায়ী স্থান অনুরোধ করে, নির্দিষ্ট ভৌগোলিক এলাকার মধ্যে থাকা স্থানগুলোকে অগ্রাধিকার দেয় এবং পূর্বাভাসকে শুধুমাত্র মার্কিন যুক্তরাষ্ট্রের মধ্যে থাকা স্থানগুলোর মধ্যে সীমাবদ্ধ রাখে। 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);

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

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

ডেটা ক্ষেত্রগুলি নির্দিষ্ট করুন

আপনার অপ্রয়োজনীয় প্লেসেস ডেটা SKU-গুলির জন্য বিল হওয়া এড়াতে ডেটা ফিল্ডগুলি নির্দিষ্ট করুন। পূর্ববর্তী উদাহরণে দেখানো অনুযায়ী, উইজেট কনস্ট্রাক্টরে পাঠানো AutocompleteOptions এ fields প্রপার্টিটি অন্তর্ভুক্ত করুন, অথবা একটি বিদ্যমান Autocomplete অবজেক্টে setFields() কল করুন।

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

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

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

  • Autocomplete অবজেক্ট তৈরির সময় এর সীমানা নির্ধারণ করুন।
  • বিদ্যমান Autocomplete সীমানা পরিবর্তন করুন।
  • মানচিত্রের ভিউপোর্টে সীমানা নির্ধারণ করুন।
  • অনুসন্ধানটি সীমার মধ্যে সীমাবদ্ধ করুন।
  • অনুসন্ধানটি একটি নির্দিষ্ট দেশে সীমাবদ্ধ করুন।

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

বিদ্যমান অটোকমপ্লিটের সীমানা পরিবর্তন করুন

বিদ্যমান Autocomplete অনুসন্ধান এলাকাকে আয়তাকার সীমানায় পরিবর্তন করতে setBounds() কল করুন।

টাইপস্ক্রিপ্ট 

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() ব্যবহার করুন।

টাইপস্ক্রিপ্ট 

autocomplete.bindTo("bounds", map);

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

autocomplete.bindTo("bounds", map);

ম্যাপের ভিউপোর্ট থেকে অটোকমপ্লিট প্রেডিকশনগুলো আনবাইন্ড করতে unbind() ব্যবহার করুন।

টাইপস্ক্রিপ্ট 

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() কল করুন।

টাইপস্ক্রিপ্ট 

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

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

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

উদাহরণ দেখুন

স্থানের প্রকার সীমাবদ্ধ করুন

পূর্বাভাসকে নির্দিষ্ট স্থানের প্রকারের মধ্যে সীমাবদ্ধ করতে types অপশনটি ব্যবহার করুন অথবা setTypes() কল করুন। এই সীমাবদ্ধতাটি Place Types- এ তালিকাভুক্ত একটি প্রকার বা প্রকারের সংগ্রহকে নির্দিষ্ট করে। যদি কোনো সীমাবদ্ধতা নির্দিষ্ট না করা হয়, তবে সমস্ত প্রকার ফেরত দেওয়া হয়।

types অপশনের মান হিসেবে অথবা setTypes() ফাংশনে পাঠানো মানের জন্য, আপনি নিম্নলিখিত যেকোনো একটি নির্দিষ্ট করতে পারেন:

অনুরোধটি প্রত্যাখ্যান করা হবে যদি:

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

প্লেসেস অটোকমপ্লিট ডেমোটি বিভিন্ন ধরনের স্থানের পূর্বাভাসের মধ্যেকার পার্থক্য তুলে ধরে।

ডেমো দেখুন

স্থান সম্পর্কিত তথ্য পাওয়া

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

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

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

name প্রপার্টিতে `Places Autocomplete`-এর পূর্বাভাস থেকে প্রাপ্ত description থাকে। আপনি `Places Autocomplete`-এর ডকুমেন্টেশনে এই 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!">

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

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

SearchBox ব্যবহারকারীদের টেক্সট-ভিত্তিক ভৌগোলিক অনুসন্ধান করার সুযোগ দেয়, যেমন 'নিউ ইয়র্কে পিৎজা' বা 'রবসন স্ট্রিটের কাছে জুতার দোকান'। আপনি SearchBox একটি টেক্সট ফিল্ডের সাথে সংযুক্ত করতে পারেন এবং টেক্সট প্রবেশ করানোর সাথে সাথে, পরিষেবাটি একটি ড্রপ-ডাউন পিক লিস্টের আকারে সম্ভাব্য ফলাফলগুলো প্রদর্শন করবে।

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

SearchBox কনস্ট্রাক্টরটি দুটি আর্গুমেন্ট গ্রহণ করে:

  • text টাইপের একটি HTML input এলিমেন্ট। এটি সেই ইনপুট ফিল্ড, যা SearchBox সার্ভিসটি পর্যবেক্ষণ করবে এবং এর সাথে ফলাফল সংযুক্ত করবে।
  • একটি options আর্গুমেন্ট, যাতে bounds প্রপার্টি থাকতে পারে: bounds হলো একটি google.maps.LatLngBounds অবজেক্ট যা স্থান অনুসন্ধানের জন্য এলাকা নির্দিষ্ট করে। ফলাফলগুলো এই সীমার মধ্যে থাকা স্থানগুলোর দিকেই বেশি ঝুঁকে থাকে, কিন্তু সেগুলোর মধ্যেই সীমাবদ্ধ থাকে না।

নিম্নলিখিত কোডটি 'bounds' প্যারামিটার ব্যবহার করে অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক দ্বারা নির্দিষ্ট একটি ভৌগোলিক এলাকার অন্তর্গত স্থানগুলির দিকে ফলাফলকে পক্ষপাতদুষ্ট করে। 

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 অবজেক্টে setBounds() কল করুন এবং প্রাসঙ্গিক LatLngBounds অবজেক্টটি পাস করুন।

উদাহরণ দেখুন

স্থান সম্পর্কিত তথ্য পাওয়া

যখন ব্যবহারকারী সার্চ বক্সের সাথে সংযুক্ত প্রেডিকশনগুলো থেকে কোনো আইটেম নির্বাচন করেন, তখন সার্ভিসটি একটি places_changed ইভেন্ট ফায়ার করে। আপনি SearchBox অবজেক্টে getPlaces() কল করে একাধিক প্রেডিকশন সম্বলিত একটি অ্যারে পেতে পারেন, যার প্রতিটিই একটি PlaceResult অবজেক্ট।

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() স্থান সম্পর্কিত পূর্বাভাস ফেরত দেয়। দ্রষ্টব্য: Places API দ্বারা সংজ্ঞায়িত একটি 'স্থান' হলো একটি প্রতিষ্ঠান, ভৌগোলিক অবস্থান বা একটি গুরুত্বপূর্ণ দর্শনীয় স্থান।
  • getQueryPredictions() প্রেডিকশনের একটি বর্ধিত তালিকা রিটার্ন করে, যাতে প্লেসেস এপিআই (Places API) দ্বারা সংজ্ঞায়িত স্থান এবং প্রস্তাবিত সার্চ টার্ম অন্তর্ভুক্ত থাকতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী 'pizza in new' টাইপ করেন, তাহলে নির্বাচিত তালিকায় 'pizza in New York, NY' এই বাক্যাংশটির পাশাপাশি বিভিন্ন পিজ্জা আউটলেটের নামও অন্তর্ভুক্ত থাকতে পারে।

উপরোক্ত উভয় পদ্ধতিই নিম্নলিখিত ফর্ম্যাটের প্রেডিকশন অবজেক্টের একটি অ্যারে রিটার্ন করে:

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

নিচের উদাহরণটি 'pizza near' শব্দগুচ্ছটির জন্য একটি কোয়েরি প্রেডিকশন রিকোয়েস্ট সম্পাদন করে এবং ফলাফলটি একটি লিস্টে প্রদর্শন করে।

টাইপস্ক্রিপ্ট 

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

প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন প্রদান করতে ভুলবেন না। একাধিক অটোকমপ্লিট সেশনের জন্য একই টোকেন ব্যবহার করলে সেই সেশনগুলি অবৈধ হয়ে যাবে এবং অবৈধ সেশনগুলির সমস্ত অটোকমপ্লিট অনুরোধের জন্য 'অটোকমপ্লিট পার রিকোয়েস্ট এসকিউ' (Autocomplete Per Request 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 এলিমেন্টগুলো গুগল ম্যাপে অন্তর্ভুক্ত করার জন্য স্টাইল করা থাকে। আপনি আপনার নিজের সাইটের সাথে মানানসই করার জন্য স্টাইলিংটি পরিবর্তন করতে চাইতে পারেন। নিম্নলিখিত CSS ক্লাসগুলো উপলব্ধ আছে। নিচে তালিকাভুক্ত সমস্ত ক্লাস Autocomplete এবং SearchBox উভয় উইজেটের জন্যই প্রযোজ্য।

অটোকমপ্লিট এবং সার্চবক্স উইজেটগুলির CSS ক্লাসগুলির একটি গ্রাফিক্যাল চিত্র
অটোকমপ্লিট এবং সার্চবক্স উইজেটের জন্য CSS ক্লাস
CSS ক্লাস বর্ণনা
pac-container প্লেস অটোকমপ্লিট পরিষেবা দ্বারা প্রাপ্ত পূর্বাভাসের তালিকা ধারণকারী ভিজ্যুয়াল উপাদান। এই তালিকাটি 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 এর বাকি টেক্সটের মধ্যেও থাকতে পারে।

স্থান স্বয়ংসম্পূর্ণতা (লেগ্যাসি) অপ্টিমাইজেশন

এই বিভাগে প্লেস অটোকমপ্লিট (লেগ্যাসি) পরিষেবাটির সর্বোত্তম ব্যবহার নিশ্চিত করার জন্য সেরা অনুশীলনগুলো বর্ণনা করা হয়েছে।

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

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

ব্যয় অপ্টিমাইজেশনের সর্বোত্তম অনুশীলন

মৌলিক ব্যয় অপ্টিমাইজেশন

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

উন্নত ব্যয় অপ্টিমাইজেশন

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

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

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

হ্যাঁ, আরও বিস্তারিত তথ্যের প্রয়োজন।

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

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

প্রোগ্রাম্যাটিক বাস্তবায়ন
আপনার প্লেস অটোকমপ্লিট (লেগ্যাসি) অনুরোধের সাথে একটি সেশন টোকেন ব্যবহার করুন। নির্বাচিত প্রেডিকশন সম্পর্কে প্লেস ডিটেইলস (লেগ্যাসি) অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলো অন্তর্ভুক্ত করুন:

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

না, শুধু ঠিকানা ও অবস্থান প্রয়োজন।

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

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

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

হ্যাঁ

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

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

না

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

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

প্রোগ্রাম্যাটিক বাস্তবায়ন
আপনার প্লেস অটোকমপ্লিট (লেগ্যাসি) অনুরোধের সাথে একটি সেশন টোকেন ব্যবহার করুন। নির্বাচিত প্রেডিকশন সম্পর্কে প্লেস ডিটেইলস (লেগ্যাসি) অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলো অন্তর্ভুক্ত করুন:

  1. প্লেস অটোকমপ্লিট (লেগ্যাসি) প্রতিক্রিয়া থেকে প্রাপ্ত স্থানের আইডি
  2. প্লেস অটোকমপ্লিট (লেগ্যাসি) অনুরোধে ব্যবহৃত সেশন টোকেন
  3. fields প্যারামিটারটি ঠিকানা এবং জ্যামিতির মতো মৌলিক ডেটা ক্ষেত্রগুলি নির্দিষ্ট করে।

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

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

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

  1. খরচের জন্য, গুগল ম্যাপস প্ল্যাটফর্মের মূল্য তালিকা দেখুন।

কর্মক্ষমতার সর্বোত্তম অনুশীলন

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

  • আপনার প্লেস অটোকমপ্লিট (লেগ্যাসি) ইমপ্লিমেন্টেশনে দেশভিত্তিক সীমাবদ্ধতা, অবস্থানভিত্তিক পক্ষপাত এবং (প্রোগ্রামভিত্তিক বাস্তবায়নের জন্য) ভাষার পছন্দ যোগ করুন। উইজেটগুলোর ক্ষেত্রে ভাষার পছন্দের প্রয়োজন নেই, কারণ সেগুলো ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষার পছন্দ গ্রহণ করে।
  • If Place Autocomplete (Legacy) is accompanied by a map, you can bias location by map viewport.
  • In situations when a user does not choose one of the Place Autocomplete (Legacy) predictions, generally because none of those predictions are the result-address wanted, you can reuse the original user input to attempt to get more relevant results:
    • If you expect the user to enter only address information, reuse the original user input in a call to the Geocoding API .
    • If you expect the user to enter queries for a specific place by name or address, use a Place Details (Legacy) request . If results are only expected in a specific region, use location biasing .
    Other scenarios when it's best to fall back to the Geocoding API include:
    • Users inputting subpremise addresses, such as addresses for specific units or apartments within a building. For example, the Czech address "Stroupežnického 3191/17, Praha" yields a partial prediction in Place Autocomplete (Legacy).
    • Users inputting addresses with road-segment prefixes like "23-30 29th St, Queens" in New York City or "47-380 Kamehameha Hwy, Kaneohe" on the island of Kauai in Hawai'i.

Location biasing

Bias results to a specified area by passing a location parameter and a radius parameter. This instructs Place Autocomplete (Legacy) to prefer showing results within the defined area. Results outside of the defined area may still be displayed. You can use the includedRegionCodes parameter to filter results to show only those places within a specified country.

Location restricting

Restrict results to a specified area by passing a locationRestriction parameter.

You may also restrict results to the region defined by location and a radius parameter, by adding the strictbounds parameter. This instructs Place Autocomplete (Legacy) to return only results within that region.

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

কোটা

For quota and pricing information, see the Usage and Billing documentation for the Places API.