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

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

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

ভূমিকা

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

শুরু করা

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

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

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

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

প্লেসেস পরিষেবাটি একটি স্বয়ংসম্পূর্ণ লাইব্রেরি, যা মূল 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 ক্লাস ব্যবহার করতে পারেন (ম্যাপস জাভাস্ক্রিপ্ট API রেফারেন্স: অটোকম্পলিট সার্ভিস ক্লাস দেখুন)।

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

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

      দ্রষ্টব্য: যদি আপনি কোনও দেশের কোডের সাথে অপ্রত্যাশিত ফলাফল পান, তাহলে যাচাই করুন যে আপনি এমন একটি কোড ব্যবহার করছেন যাতে আপনার পছন্দের দেশ, নির্ভরশীল অঞ্চল এবং ভৌগোলিক আগ্রহের বিশেষ ক্ষেত্রগুলি অন্তর্ভুক্ত রয়েছে। আপনি কোডের তথ্য Wikipedia: List of ISO 3166 country codes অথবা ISO Online Browsing Platform -এ পেতে পারেন।

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

স্বয়ংক্রিয়ভাবে সম্পূর্ণ ভবিষ্যদ্বাণী সীমাবদ্ধ করুন

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

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

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

একটি বিদ্যমান উইজেটের জন্য একটি বিকল্পের মান পরিবর্তন করতে setOptions() কল করুন।

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

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};

const autocomplete = new google.maps.places.Autocomplete(input, options);
index.ts

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

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

index.js

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

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

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

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

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

  • 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);
index.ts

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

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

index.js
মানচিত্রের ভিউপোর্টের সীমানা নির্ধারণ করুন

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

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

autocomplete.bindTo("bounds", map);
index.ts

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

autocomplete.bindTo("bounds", map);

index.js

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

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

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

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

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

উদাহরণ দেখুন

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

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

autocomplete.setOptions({ strictBounds: true });
একটি নির্দিষ্ট দেশে ভবিষ্যদ্বাণী সীমাবদ্ধ করুন

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

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

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

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

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

index.js

উদাহরণ দেখুন

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

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

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

  • একটি অ্যারে যেখানে টেবিল ১ থেকে পাঁচটি পর্যন্ত মান বা প্লেস টাইপ থেকে টেবিল ২ পর্যন্ত মান রয়েছে। উদাহরণস্বরূপ: 

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

    অথবা: 

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

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

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

স্থান স্বয়ংসম্পূর্ণ ডেমো বিভিন্ন স্থানের ধরণের মধ্যে পূর্বাভাসের পার্থক্য প্রদর্শন করে।

ডেমো দেখুন

স্থানের তথ্য পাওয়া

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

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

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

name প্রপার্টিতে Places Autocomplete predictions থেকে 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();
}
index.ts

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

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;

index.js

উদাহরণ দেখুন

প্লেসহোল্ডার টেক্সট কাস্টমাইজ করুন

ডিফল্টরূপে, অটোকম্পলিট সার্ভিস দ্বারা তৈরি টেক্সট ফিল্ডে স্ট্যান্ডার্ড প্লেসহোল্ডার টেক্সট থাকে। টেক্সট পরিবর্তন করতে, input এলিমেন্টে placeholder অ্যাট্রিবিউট সেট করুন: 

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

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

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

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 অবজেক্ট সম্পর্কে আরও তথ্যের জন্য, place detail results এর ডকুমেন্টেশনটি দেখুন।

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

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

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

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

উদাহরণ দেখুন

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

প্রোগ্রাম্যাটিকভাবে প্লেস অটোকম্পলিট পরিষেবা পূর্বাভাস পুনরুদ্ধার করা হচ্ছে

প্রোগ্রাম্যাটিকভাবে ভবিষ্যদ্বাণী পুনরুদ্ধার করতে, 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 হল মিলিত শব্দ।

নিচের উদাহরণটি '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;
index.ts

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

// 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;
index.js

সিএসএস 

style.css

এইচটিএমএল 

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

খরচ অপ্টিমাইজেশনের সেরা অনুশীলন

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

হাঁ

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

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

না

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

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

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

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

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

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

Consider employing performance best practices to help your users get the prediction they're looking for in fewer characters.

  1. For costs, see Google Maps Platform pricing lists .

Performance best practices

The following guidelines describe ways to optimize Place Autocomplete (Legacy) performance:

  • Add country restrictions, location biasing , and (for programmatic implementations) language preference to your Place Autocomplete (Legacy) implementation. Language preference is not needed with widgets since they pick language preferences from the user's browser or mobile device.
  • 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 components 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.

Usage limits

Quotas

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