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

প্ল্যাটফর্ম নির্বাচন করুন: Android iOS জাভাস্ক্রিপ্ট ওয়েব পরিষেবা

ভূমিকা

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

শুরু হচ্ছে

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

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

  1. গুগল ক্লাউড কনসোলে যান।
  2. একটি প্রকল্প নির্বাচন করুন বোতামে ক্লিক করুন, তারপরে আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য সেট আপ করা একই প্রকল্প নির্বাচন করুন এবং খুলুন ক্লিক করুন।
  3. ড্যাশবোর্ডে API-এর তালিকা থেকে, স্থান API সন্ধান করুন।
  4. আপনি যদি তালিকায় API দেখতে পান, আপনি সম্পূর্ণ প্রস্তুত। API তালিকাভুক্ত না হলে, এটি সক্ষম করুন:
    1. পৃষ্ঠার শীর্ষে, লাইব্রেরি ট্যাব প্রদর্শন করতে API ENABLE নির্বাচন করুন। বিকল্পভাবে, বাম পাশের মেনু থেকে, লাইব্রেরি নির্বাচন করুন।
    2. স্থান API অনুসন্ধান করুন, তারপর ফলাফল তালিকা থেকে এটি নির্বাচন করুন।
    3. ENABLE নির্বাচন করুন। প্রক্রিয়াটি শেষ হলে, স্থান API ড্যাশবোর্ডে API-এর তালিকায় উপস্থিত হয়।

লাইব্রেরি লোড হচ্ছে

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

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

  • Autocomplete আপনার ওয়েব পৃষ্ঠায় একটি পাঠ্য ইনপুট ক্ষেত্র যোগ করে, এবং অক্ষর এন্ট্রিগুলির জন্য সেই ক্ষেত্রটি নিরীক্ষণ করে। ব্যবহারকারী পাঠ্য প্রবেশ করার সাথে সাথে, স্বয়ংসম্পূর্ণতা একটি ড্রপডাউন বাছাই তালিকার আকারে পূর্বাভাস প্রদান করে। যখন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করে, সেই স্থান সম্পর্কে তথ্য স্বয়ংসম্পূর্ণ বস্তুতে ফেরত দেওয়া হয় এবং আপনার অ্যাপ্লিকেশন দ্বারা পুনরুদ্ধার করা যেতে পারে। নিচে বিস্তারিত দেখুন.
    একটি স্বয়ংসম্পূর্ণ পাঠ্য ক্ষেত্র এবং স্থান নির্বাচনের তালিকা ব্যবহারকারী অনুসন্ধান ক্যোয়ারীতে প্রবেশ করার সাথে সাথে পূর্বাভাস সরবরাহ করা হয়।
    চিত্র 1: স্বয়ংসম্পূর্ণ পাঠ্য ক্ষেত্র এবং বাছাই তালিকা
    একটি সম্পূর্ণ ঠিকানা ফর্ম।
    ছবি 2: ঠিকানা ফর্ম পূরণ করা হয়েছে
  • SearchBox আপনার ওয়েব পৃষ্ঠায় একটি পাঠ্য ইনপুট ক্ষেত্র যোগ করে, অনেকটা Autocomplete মতোই। পার্থক্যগুলি নিম্নরূপ:
    • প্রধান পার্থক্য বাছাই তালিকায় প্রদর্শিত ফলাফলের মধ্যে রয়েছে। SearchBox ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা সরবরাহ করে, যেখানে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে।
    • অনুসন্ধান সীমাবদ্ধ করার জন্য SearchBox Autocomplete চেয়ে কম বিকল্প অফার করে। পূর্বে, আপনি একটি প্রদত্ত LatLngBounds এর দিকে অনুসন্ধানটিকে পক্ষপাতিত্ব করতে পারেন। পরবর্তীতে, আপনি অনুসন্ধানটিকে একটি নির্দিষ্ট দেশ এবং নির্দিষ্ট স্থানের ধরনগুলিতে সীমাবদ্ধ করতে পারেন, সেইসাথে সীমা নির্ধারণ করতে পারেন৷ আরও তথ্যের জন্য, নীচে দেখুন।
    একটি সম্পূর্ণ ঠিকানা ফর্ম।
    চিত্র 3: একটি অনুসন্ধানবাক্স অনুসন্ধানের পদ এবং স্থানের পূর্বাভাস উপস্থাপন করে।
    নিচে বিস্তারিত দেখুন.
  • প্রোগ্রামগতভাবে পূর্বাভাস পুনরুদ্ধার করতে আপনি একটি AutocompleteService অবজেক্ট তৈরি করতে পারেন। মিলিত স্থানগুলি পুনরুদ্ধার করতে getPlacePredictions() কল করুন, অথবা মিলিত স্থানগুলি এবং প্রস্তাবিত অনুসন্ধান পদগুলি পুনরুদ্ধার করতে getQueryPredictions() কল করুন৷ দ্রষ্টব্য: AutocompleteService কোনো UI নিয়ন্ত্রণ যোগ করে না। পরিবর্তে, উপরের পদ্ধতিগুলি ভবিষ্যদ্বাণী বস্তুর একটি অ্যারে প্রদান করে। প্রতিটি ভবিষ্যদ্বাণী অবজেক্টে ভবিষ্যদ্বাণীর পাঠ্য, সেইসাথে রেফারেন্স তথ্য এবং ফলাফল কীভাবে ব্যবহারকারীর ইনপুটের সাথে মেলে তার বিশদ রয়েছে। নিচে বিস্তারিত দেখুন.

একটি স্বয়ংসম্পূর্ণ উইজেট যোগ করা হচ্ছে

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

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

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

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

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

স্বয়ংসম্পূর্ণ পূর্বাভাস সীমাবদ্ধ করা

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

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

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

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

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

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

const autocomplete = new google.maps.places.Autocomplete(input, options);
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 ডেটা 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);
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() কল করুন। এই সীমাবদ্ধতা একটি প্রকার বা টাইপ সংগ্রহকে নির্দিষ্ট করে, যেমনটি স্থানের প্রকারগুলিতে তালিকাভুক্ত। কোন সীমাবদ্ধতা নির্দিষ্ট করা না থাকলে, সব ধরনের ফেরত দেওয়া হয়।

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

  • প্লেস টাইপস থেকে টেবিল 1 বা টেবিল 2 থেকে পাঁচটি পর্যন্ত মান ধারণকারী একটি অ্যারে। যেমন: 

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

    বা: 

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

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

  • আপনি পাঁচটির বেশি প্রকার উল্লেখ করেন।
  • আপনি কোনো অচেনা প্রকার উল্লেখ করুন.
  • আপনি সারণি 1 বা টেবিল 2 থেকে যেকোন প্রকারের সাথে সারণি 3 থেকে যেকোনো ফিল্টার মিশ্রিত করুন।

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

ডেমো দেখুন

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

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

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

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

name সম্পত্তি স্থান স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণী থেকে description রয়েছে. আপনি স্থান স্বয়ংসম্পূর্ণ ডকুমেন্টেশনে description সম্পর্কে আরও পড়তে পারেন।

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

নিম্নলিখিত উদাহরণটি একটি ঠিকানা ফর্মের ক্ষেত্রগুলি পূরণ করতে স্বয়ংসম্পূর্ণ ব্যবহার করে।

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

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}
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 ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা সরবরাহ করে, যেখানে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে। যখন একজন ব্যবহারকারী তালিকা থেকে একটি স্থান নির্বাচন করেন, সেই স্থান সম্পর্কে তথ্য অনুসন্ধানবক্স অবজেক্টে ফেরত দেওয়া হয় এবং আপনার অ্যাপ্লিকেশন দ্বারা পুনরুদ্ধার করা যেতে পারে।

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

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

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

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

SearchBox-এর জন্য অনুসন্ধান এলাকা পরিবর্তন করুন

একটি বিদ্যমান SearchBox জন্য অনুসন্ধান এলাকা পরিবর্তন করতে, SearchBox অবজেক্টে setBounds() কল করুন এবং প্রাসঙ্গিক LatLngBounds অবজেক্টটি পাস করুন।

উদাহরণ দেখুন

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

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

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);
});
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() স্থানের পূর্বাভাস প্রদান করে। দ্রষ্টব্য: একটি 'স্থান' হতে পারে একটি স্থাপনা, ভৌগলিক অবস্থান, বা আগ্রহের বিশিষ্ট স্থান, যেমন স্থান API দ্বারা সংজ্ঞায়িত করা হয়েছে।
  • getQueryPredictions() ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা প্রদান করে, যা স্থানগুলিকে অন্তর্ভুক্ত করতে পারে (স্থানীয় API দ্বারা সংজ্ঞায়িত) এবং প্রস্তাবিত অনুসন্ধান শব্দগুলি। উদাহরণ স্বরূপ, যদি ব্যবহারকারী 'নতুন পিজা'তে প্রবেশ করেন, তাহলে বাছাই তালিকায় 'নিউ ইয়র্ক, এনওয়াই'-এ পিজা এবং বিভিন্ন পিজা আউটলেটের নাম অন্তর্ভুক্ত থাকতে পারে।

উপরের উভয় পদ্ধতি নিম্নলিখিত ফর্মের ভবিষ্যদ্বাণী বস্তুর একটি অ্যারে প্রদান করে:

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

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

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

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;
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() এ কল করার ফলে যে স্থানে একটি স্থানের বিশদ অনুরোধ করতে আপনি একই সেশন টোকেন ব্যবহার করতে পারেন। এই ক্ষেত্রে, স্বয়ংসম্পূর্ণ অনুরোধটি স্থানের বিবরণের অনুরোধের সাথে মিলিত হয় এবং কলটি একটি নিয়মিত স্থানের বিবরণ অনুরোধ হিসাবে চার্জ করা হয়। স্বয়ংসম্পূর্ণ অনুরোধের জন্য কোন চার্জ নেই।

প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক স্বয়ংসম্পূর্ণ সেশনের জন্য একই টোকেন ব্যবহার করা সেই স্বয়ংসম্পূর্ণ সেশনগুলিকে বাতিল করে দেবে এবং অবৈধ সেশনের সমস্ত স্বয়ংসম্পূর্ণ অনুরোধের জন্য স্বয়ংসম্পূর্ণ প্রতি অনুরোধ SKU ব্যবহার করে পৃথকভাবে চার্জ করা হবে। সেশন টোকেন সম্পর্কে আরও পড়ুন ।

নিচের উদাহরণে দেখানো হয়েছে একটি সেশন টোকেন তৈরি করা, তারপর এটিকে একটি AutocompleteService এ পাস করা ( displaySuggestions() ফাংশনটি সংক্ষিপ্ততার জন্য বাদ দেওয়া হয়েছে): 

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

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

সেশন টোকেন সম্পর্কে আরও পড়ুন ।

স্বয়ংসম্পূর্ণ এবং অনুসন্ধানবক্স উইজেট স্টাইল করা

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

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

স্বয়ংসম্পূর্ণ অপ্টিমাইজেশান রাখুন

এই বিভাগটি আপনাকে প্লেস স্বয়ংসম্পূর্ণ পরিষেবার সর্বাধিক ব্যবহার করতে সাহায্য করার জন্য সর্বোত্তম অনুশীলনগুলি বর্ণনা করে৷

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. স্থান স্বয়ংসম্পূর্ণ প্রতিক্রিয়া থেকে স্থান আইডি
  2. স্থান স্বয়ংসম্পূর্ণ অনুরোধে ব্যবহৃত সেশন টোকেন
  3. fields প্যারামিটার আপনার প্রয়োজনীয় স্থান ডেটা ক্ষেত্র নির্দিষ্ট করে

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

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

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

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

হ্যাঁ

সেশন টোকেন ছাড়াই প্রোগ্রাম্যাটিকভাবে প্লেস স্বয়ংসম্পূর্ণ বাস্তবায়ন করুন এবং নির্বাচিত স্থানের পূর্বাভাসে জিওকোডিং API কল করুন।
জিওকোডিং API অনুরোধ প্রতি $0.005 এর জন্য ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্ক সরবরাহ করে। চারটি স্থান স্বয়ংসম্পূর্ণ করতে - প্রতি অনুরোধের জন্য $0.01132 খরচ হয় তাই চারটি অনুরোধের মোট খরচ এবং নির্বাচিত স্থানের পূর্বাভাস সম্পর্কে একটি জিওকোডিং API কল হবে $0.01632 যা প্রতি সেশন প্রতি সেশনের স্বয়ংসম্পূর্ণ মূল্য $0.017 থেকে কম৷ 1

আপনার ব্যবহারকারীদের আরও কম অক্ষরের মধ্যে তারা যে ভবিষ্যদ্বাণী খুঁজছেন তা পেতে সহায়তা করার জন্য কর্মক্ষমতার সর্বোত্তম অনুশীলনগুলিকে কাজে লাগানোর কথা বিবেচনা করুন৷

না

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

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

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

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

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

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

আপনার ব্যবহারকারীদের তারা কম অক্ষরের মধ্যে যে ভবিষ্যদ্বাণী খুঁজছেন তা পেতে সহায়তা করার জন্য কর্মক্ষমতার সর্বোত্তম অনুশীলনগুলিকে কাজে লাগান।

  1. এখানে তালিকাভুক্ত খরচ USD-এ। সম্পূর্ণ মূল্যের তথ্যের জন্য অনুগ্রহ করে Google মানচিত্র প্ল্যাটফর্ম বিলিং পৃষ্ঠাটি দেখুন।

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

নিম্নলিখিত নির্দেশিকাগুলি স্থান স্বয়ংসম্পূর্ণ কর্মক্ষমতা অপ্টিমাইজ করার উপায় বর্ণনা করে:

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

ব্যবহারের সীমা এবং নীতি

কোটা

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

নীতিমালা

প্লেস লাইব্রেরির ব্যবহার, মানচিত্র জাভাস্ক্রিপ্ট API অবশ্যই Places API-এর জন্য বর্ণিত নীতি অনুসারে হতে হবে।