Place Autocomplete

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

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

ভূমিকা

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

শুরু করা

Maps JavaScript API-তে Places লাইব্রেরি ব্যবহার করার আগে, প্রথমে যাচাই করে নিন যে Maps JavaScript API-এর জন্য আপনি যে প্রোজেক্ট সেট-আপ করেছেন, সেই একই প্রোজেক্টে Google Cloud Console-এ Places 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-এর মাধ্যমে সংজ্ঞায়িত) এবং সাজেস্ট করা সার্চ কোয়েরি অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী যদি 'নতুন পিৎজা' লেখেন, তাহলে বাছাই করা তালিকায় 'নিউ ইয়র্ক, নিউ ইয়র্কের পিৎজা' এবং বিভিন্ন পিৎজা আউটলেটের নামও থাকতে পারে।
    • 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 মানানসই দেশের কোড হিসেবে পাস করতে হবে। একাধিক দেশ থাকলে, সেগুলিকে দেশের কোডের তালিকা হিসেবে পাস করতে হবে।

      মনে রাখবেন: দেশ কোড সহ অপ্রত্যাশিত ফলাফল পেলে, আপনি যে কোড ব্যবহার করছেন তাতে সেইসব দেশ, অধীনস্থ অঞ্চল এবং বিশেষ ভৌগোলিক আগ্রহের ক্ষেত্র অন্তর্ভুক্ত আছে কিনা তা যাচাই করে নিন যেগুলি আপনি চান। আপনি কোড সংক্রান্ত তথ্য এখানে পেতে পারেন: উইকিপিডিয়া: 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 SKUs-এর জন্য বিল যাতে না করা হয়, সেই জন্য ডেটা ফিল্ড নির্দিষ্ট করুন। উইজেট কনস্ট্রাক্টরে পাস করা fields প্রপার্টিকে AutocompleteOptions অন্তর্ভুক্ত করুন, যেমন আগের উদাহরণে দেখানো হয়েছে অথবা আগে থেকে থাকা 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']);
  • সারণী ৩-এর যেকোনও একটি ফিল্টার জায়গার ধরন থেকে। আপনি শুধুমাত্র টেবিল ৩ থেকে একটি মান নির্দিষ্ট করতে পারবেন।

এইসব কারণে অনুরোধ বাতিল করা হবে:

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

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

ডেমো দেখুন

জায়গা সংক্রান্ত তথ্য পাওয়া

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

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

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

name প্রপার্টিতে Places Autocomplete-এর পূর্বানুমান থেকে 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-এর সংজ্ঞা অনুযায়ী) এবং সাজেস্ট করা সার্চ কোয়েরি অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী যদি 'নতুন পিৎজা' লেখেন, তাহলে বাছাই করা তালিকায় 'নিউ ইয়র্ক, নিউ ইয়র্কের পিৎজা' বাক্যাংশ এবং বিভিন্ন পিৎজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে। কোনও ব্যবহারকারী তালিকা থেকে কোনও জায়গা বেছে নিলে, সেই জায়গা সম্পর্কিত তথ্য SearchBox অবজেক্টে রিটার্ন করা হয় এবং আপনার অ্যাপ্লিকেশন সেটি ফিরিয়ে আনতে পারে।

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()-এ SearchBox অবজেক্টে কল করুন এবং প্রাসঙ্গিক 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-এর সংজ্ঞা অনুযায়ী) ও সাজেস্ট করা সার্চ কোয়েরি অন্তর্ভুক্ত থাকতে পারে। যেমন, ব্যবহারকারী 'নতুন পিৎজা' লিখলে, বাছাই করা তালিকায় 'নিউ ইয়র্ক, নিউ ইয়র্কের পিৎজা' এবং বিভিন্ন পিৎজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে।

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

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

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

অটোকমপ্লিট ও SearchBox উইজেটের CSS ক্লাসের গ্রাফিক্যাল ইলাস্ট্রেশন
অটোমেটিক সম্পূর্ণ হওয়া ও SearchBox উইজেটের জন্য 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-এর বাকি টেক্সটে থাকতে পারে।

প্লেস অটোকমপ্লিট (Legacy) অপ্টিমাইজেশন

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

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

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

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

খরচ কমানোর প্রাথমিক পদ্ধতি

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

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

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

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

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

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

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

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

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

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

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

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

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

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

হ্যাঁ

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

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

না

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

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

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

  1. প্লেস অটোকমপ্লিট (লেগ্যাসি) উত্তর থেকে পাওয়া জায়গার আইডি
  2. Place Autocomplete (Legacy) অনুরোধে ব্যবহৃত সেশন টোকেন
  3. fields প্যারামিটার যা উল্লেখ করে প্রাথমিক ডেটা ফিল্ড যেমন ঠিকানা ও জ্যামিতি

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

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

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

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

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

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

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

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

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

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

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

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

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

কোটা

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