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

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

ভূমিকা

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

শুরু হচ্ছে

Before using the Places library in the Maps JavaScript API, first ensure that the Places API is enabled in the Google Cloud Console, in the same project you set up for the Maps JavaScript 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 উইজেটকে নির্দেশ দিতে ব্যবহার করা যেতে পারে। On calling getPlace() on the Autocomplete object, the PlaceResult made available will only have the place id , types and name properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services.

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

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

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

The Autocomplete constructor accepts an AutocompleteOptions parameter to set constraints at widget creation. নিম্নলিখিত উদাহরণটি 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);

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

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 ডেটা SKU-এর জন্য বিল করা এড়াতে ডেটা ক্ষেত্রগুলি নির্দিষ্ট করুন৷ AutocompleteOptions fields বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন যা উইজেট কনস্ট্রাক্টরের কাছে পাস করা হয়, যেমনটি পূর্ববর্তী উদাহরণে প্রদর্শিত হয়েছে, বা একটি বিদ্যমান Autocomplete বস্তুতে setFields() কল করুন।

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

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

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

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

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

একটি বিদ্যমান স্বয়ংসম্পূর্ণের সীমানা পরিবর্তন করুন

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

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

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

autocomplete.setBounds(newBounds);

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

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

autocomplete.setBounds(newBounds);
মানচিত্রের ভিউপোর্টে সীমানা সেট করুন

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

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

autocomplete.bindTo("bounds", map);

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

autocomplete.bindTo("bounds", map);

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

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

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

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

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

উদাহরণ দেখুন

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

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

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

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

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

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

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

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

উদাহরণ দেখুন

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

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

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

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

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 ভবিষ্যদ্বাণীগুলির একটি বর্ধিত তালিকা সরবরাহ করে, যেখানে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানীয় 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-এর জন্য অনুসন্ধান এলাকা পরিবর্তন করা হচ্ছে

To change the search area for an existing SearchBox , call setBounds() on the SearchBox object and pass the relevant LatLngBounds object.

উদাহরণ দেখুন

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

When the user selects an item from the predictions attached to the search box, the service fires a places_changed event. আপনি SearchBox অবজেক্টে getPlaces() কল করতে পারেন, বেশ কয়েকটি ভবিষ্যদ্বাণী সম্বলিত একটি অ্যারে পুনরুদ্ধার করতে, যার প্রতিটি একটি PlaceResult অবজেক্ট।

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

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

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

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

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      }),
    );
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

উদাহরণ দেখুন

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

প্রোগ্রামগতভাবে স্থান স্বয়ংসম্পূর্ণ পরিষেবার পূর্বাভাস পুনরুদ্ধার করা হচ্ছে

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

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

  • getPlacePredictions() স্থানের পূর্বাভাস প্রদান করে। দ্রষ্টব্য: একটি 'স্থান' হতে পারে একটি স্থাপনা, ভৌগলিক অবস্থান, বা আগ্রহের বিশিষ্ট স্থান, যেমন স্থান 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;

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

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

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

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

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

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

window.initService = initService;

সিএসএস

এইচটিএমএল

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

নমুনা চেষ্টা করুন

উদাহরণ দেখুন

সেশন টোকেন

AutocompleteService.getPlacePredictions() সেশন টোকেন ব্যবহার করতে পারে (যদি বাস্তবায়িত হয়) বিলিং উদ্দেশ্যে স্বয়ংসম্পূর্ণ অনুরোধগুলিকে একত্রিত করতে। সেশন টোকেনগুলি একটি ব্যবহারকারীর স্বয়ংসম্পূর্ণ অনুসন্ধানের প্রশ্ন এবং নির্বাচনের পর্যায়গুলিকে বিলিং উদ্দেশ্যে একটি পৃথক সেশনে গোষ্ঠীভুক্ত করে। সেশন শুরু হয় যখন ব্যবহারকারী একটি ক্যোয়ারী টাইপ করা শুরু করে এবং যখন তারা একটি স্থান নির্বাচন করে তখন শেষ হয়। প্রতিটি সেশনে একাধিক প্রশ্ন থাকতে পারে, তারপরে একটি স্থান নির্বাচন। একবার একটি অধিবেশন শেষ হয়ে গেলে, টোকেনটি আর বৈধ থাকে না। আপনার অ্যাপ অবশ্যই প্রতিটি সেশনের জন্য একটি নতুন টোকেন তৈরি করবে। আমরা সমস্ত স্বয়ংসম্পূর্ণ সেশনের জন্য সেশন টোকেন ব্যবহার করার পরামর্শ দিই। যদি sessionToken প্যারামিটারটি বাদ দেওয়া হয়, বা আপনি যদি একটি সেশন টোকেন পুনরায় ব্যবহার করেন, তাহলে সেশনটি চার্জ করা হবে যেন কোনো সেশন টোকেন প্রদান করা হয়নি (প্রতিটি অনুরোধ আলাদাভাবে বিল করা হয়)।

AutocompleteService.getPlacePredictions() এ কল করার ফলে যে স্থানে একটি স্থানের বিশদ অনুরোধ করতে আপনি একই সেশন টোকেন ব্যবহার করতে পারেন। এই ক্ষেত্রে, স্বয়ংসম্পূর্ণ অনুরোধটি স্থানের বিবরণের অনুরোধের সাথে মিলিত হয় এবং কলটি একটি নিয়মিত স্থানের বিবরণ অনুরোধ হিসাবে চার্জ করা হয়। স্বয়ংসম্পূর্ণ অনুরোধের জন্য কোন চার্জ নেই।

প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করতে ভুলবেন না। একাধিক স্বয়ংসম্পূর্ণ সেশনের জন্য একই টোকেন ব্যবহার করা সেই স্বয়ংসম্পূর্ণ সেশনগুলিকে বাতিল করে দেবে এবং অবৈধ সেশনের সমস্ত স্বয়ংসম্পূর্ণ অনুরোধের জন্য স্বয়ংসম্পূর্ণ প্রতি অনুরোধ 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 মানচিত্রে অন্তর্ভুক্ত করার জন্য স্টাইল করা হয়৷ You may want to adjust the styling to suit your own site. নিম্নলিখিত 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 কিং স্ট্রিট'৷ For text-based searches such as 'pizza in New York', it contains the full text of the query. ডিফল্টরূপে, pac-item-query কালো রঙের হয়। If there is any additional text in the pac-item , it is outside pac-item-query and inherits its styling from 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 প্যারামিটারটি নির্দিষ্ট করতে ভুলবেন না।

প্রোগ্রাম্যাটিক বাস্তবায়ন
আপনার স্থান স্বয়ংসম্পূর্ণ অনুরোধের সাথে একটি সেশন টোকেন ব্যবহার করুন। When requesting Place Details about the selected prediction, include the following parameters:

  1. The place ID from the Place Autocomplete response
  2. The session token used in the Place Autocomplete request
  3. The fields parameter specifying the place data fields you need

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

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

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

Do your users select a Place Autocomplete prediction in four or fewer requests, on average?

হ্যাঁ

Implement Place Autocomplete programmatically without session tokens and call Geocoding API on the selected place prediction.
Geocoding API delivers addresses and latitude/longitude coordinates for $0.005 per request. চারটি স্থান স্বয়ংসম্পূর্ণ করতে - প্রতি অনুরোধের জন্য $0.01132 খরচ হয় তাই চারটি অনুরোধের মোট খরচ এবং নির্বাচিত স্থানের পূর্বাভাস সম্পর্কে একটি জিওকোডিং API কল হবে $0.01632 যা প্রতি সেশন প্রতি সেশনের স্বয়ংসম্পূর্ণ মূল্য $0.017 থেকে কম৷ 1

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

না

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

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

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

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

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

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

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


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

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

The following guidelines describe ways to optimize Place Autocomplete performance:

  • আপনার স্থান স্বয়ংসম্পূর্ণ বাস্তবায়নে দেশের সীমাবদ্ধতা, অবস্থানের পক্ষপাতিত্ব এবং (প্রোগ্রামাটিক বাস্তবায়নের জন্য) ভাষা পছন্দ যোগ করুন। Language preference is not needed with widgets since they pick language preferences from the user's browser or mobile device.
  • যদি স্থান স্বয়ংসম্পূর্ণ একটি মানচিত্র দ্বারা অনুষঙ্গী হয়, আপনি মানচিত্র ভিউপোর্ট দ্বারা অবস্থান পক্ষপাতিত্ব করতে পারেন.
  • এমন পরিস্থিতিতে যখন একজন ব্যবহারকারী স্বয়ংসম্পূর্ণ ভবিষ্যদ্বাণীগুলির মধ্যে একটিকে বেছে নেয় না, সাধারণত যেহেতু এই ভবিষ্যদ্বাণীগুলির কোনওটিই পছন্দসই ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করতে মূল ব্যবহারকারীর ইনপুটটি পুনরায় ব্যবহার করতে পারেন:
    • আপনি যদি আশা করেন যে ব্যবহারকারী শুধুমাত্র ঠিকানার তথ্য লিখবেন, তাহলে জিওকোডিং API- এ একটি কলে আসল ব্যবহারকারীর ইনপুট পুনরায় ব্যবহার করুন।
    • আপনি যদি আশা করেন যে ব্যবহারকারী একটি নির্দিষ্ট স্থানের জন্য নাম বা ঠিকানা দ্বারা প্রশ্ন লিখবেন, তাহলে একটি সন্ধান করুন স্থান অনুরোধ ব্যবহার করুন। ফলাফল শুধুমাত্র একটি নির্দিষ্ট অঞ্চলে প্রত্যাশিত হলে, অবস্থানের পক্ষপাতিত্ব ব্যবহার করুন৷
    অন্যান্য পরিস্থিতিতে যখন জিওকোডিং এপিআই-তে ফিরে আসা সবচেয়ে ভালো হয় সেগুলির মধ্যে রয়েছে:
    • ব্যবহারকারীরা সাবপ্রিমাইজ অ্যাড্রেস ইনপুট করছেন, যেমন একটি বিল্ডিংয়ের মধ্যে নির্দিষ্ট ইউনিট বা অ্যাপার্টমেন্টের ঠিকানা। উদাহরণস্বরূপ, চেক ঠিকানা "Stroupežnického 3191/17, Praha" Place Autocomplete-এ একটি আংশিক ভবিষ্যদ্বাণী দেয়।
    • ব্যবহারকারীরা নিউইয়র্ক সিটির "23-30 29 তম এসটি, কুইন্স" বা হাওয়াইয়ের কাউই দ্বীপে "47-380 কামহামেহা হুই, কেনোহে" এর মতো রোড-সেগমেন্টের উপসর্গগুলির সাথে ঠিকানাগুলি ইনপুট করছেন।

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

কোটা

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

নীতিমালা

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

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

ভূমিকা

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

শুরু হচ্ছে

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

আপনার সক্ষম এপিআইগুলির তালিকা দেখতে:

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

গ্রন্থাগার লোড হচ্ছে

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

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

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

একটি স্বত

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

Autocomplete কনস্ট্রাক্টর দুটি যুক্তি নেয়:

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

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

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

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

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

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

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

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

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

আপনি নিম্নলিখিত উপায়ে আনুমানিক অবস্থান বা অঞ্চলকে সমর্থন করার জন্য স্বতঃপূরী ফলাফলগুলিকে পক্ষপাত করতে পারেন:

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

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

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

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

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

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

autocomplete.setBounds(newBounds);

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

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

autocomplete.setBounds(newBounds);
মানচিত্রের ভিউপোর্টে সীমা নির্ধারণ করুন

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

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

autocomplete.bindTo("bounds", map);

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

autocomplete.bindTo("bounds", map);

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

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

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

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

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

উদাহরণ দেখুন

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

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

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

পাঁচটি দেশ পর্যন্ত নির্দিষ্ট সেটে স্বতঃপূর্ব অনুসন্ধানকে সীমাবদ্ধ করতে componentRestrictions বিকল্পগুলি ব্যবহার করুন বা setComponentRestrictions() কল করুন।

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

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

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

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

উদাহরণ দেখুন

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

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

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

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

  • আপনি পাঁচ ধরণের বেশি নির্দিষ্ট করুন।
  • আপনি কোনও অচেনা প্রকার নির্দিষ্ট করুন।
  • আপনি সারণি 1 বা টেবিল 2 থেকে কোনও প্রকারের সাথে সারণী 3 থেকে কোনও ফিল্টার মিশ্রিত করুন।

স্থানগুলি স্বতঃপ্রকাশিত ডেমো বিভিন্ন স্থানের ধরণের মধ্যে পূর্বাভাসের পার্থক্যগুলি প্রদর্শন করে।

ডেমো দেখুন

জায়গা তথ্য পাওয়া

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

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

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

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

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

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

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

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

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

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

উদাহরণ দেখুন

স্থানধারক পাঠ্য কাস্টমাইজিং

ডিফল্টরূপে, স্বতঃপূর্বক পরিষেবা দ্বারা নির্মিত পাঠ্য ক্ষেত্রটিতে স্ট্যান্ডার্ড প্লেসহোল্ডার পাঠ্য রয়েছে। পাঠ্যটি সংশোধন করতে, input উপাদানটিতে placeholder বৈশিষ্ট্যটি সেট করুন:

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

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

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

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

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

SearchBox কনস্ট্রাক্টর দুটি যুক্তি নেয়:

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

উদাহরণ দেখুন

জায়গা তথ্য পাওয়া

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

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

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

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

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

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      }),
    );
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

উদাহরণ দেখুন

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

প্রোগ্রামভাবে স্থানটি স্বতঃপূরী পরিষেবা পূর্বাভাস পুনরুদ্ধার করা

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

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

  • getPlacePredictions() স্থান পূর্বাভাস দেয়। দ্রষ্টব্য: একটি 'স্থান' এপিআই স্থান দ্বারা সংজ্ঞায়িত হিসাবে একটি স্থাপনা, ভৌগলিক অবস্থান বা আগ্রহের বিশিষ্ট পয়েন্ট হতে পারে।
  • getQueryPredictions() পূর্বাভাসের একটি বর্ধিত তালিকা প্রদান করে, যার মধ্যে স্থানগুলি অন্তর্ভুক্ত থাকতে পারে (স্থানগুলি এপিআই দ্বারা সংজ্ঞায়িত হিসাবে) এবং প্রস্তাবিত অনুসন্ধানের শর্তাদি অন্তর্ভুক্ত থাকতে পারে। উদাহরণস্বরূপ, যদি ব্যবহারকারী 'নিউ ইন' পিজ্জা প্রবেশ করে তবে বাছাই তালিকায় 'নিউইয়র্কের পিজ্জা, এনওয়াই' শব্দের পাশাপাশি বিভিন্ন পিজ্জা আউটলেটগুলির নাম অন্তর্ভুক্ত থাকতে পারে।

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

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

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

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

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

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

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

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

window.initService = initService;

সিএসএস

এইচটিএমএল

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

নমুনা চেষ্টা করুন

উদাহরণ দেখুন

সেশন টোকেন

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

আপনি একই সেশন টোকেনটি ব্যবহার করতে পারেন যাতে কোনও কল থেকে AutocompleteService.getPlacePredictions() এর ফলাফলের ফলাফলের জন্য একটি একক স্থানের বিশদ অনুরোধ করতে। এই ক্ষেত্রে, স্বতঃপূর্বক অনুরোধটি স্থানের বিশদ অনুরোধের সাথে একত্রিত করা হয়, এবং কলটি নিয়মিত স্থানের বিশদ অনুরোধ হিসাবে চার্জ করা হয়। স্বতঃপ্রকাশের অনুরোধের জন্য কোনও চার্জ নেই।

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

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

অটো কমপ্লিট এবং সার্চবক্স উইজেটগুলির জন্য সিএসএস ক্লাসের একটি গ্রাফিকাল চিত্রণ
অটো কমপ্লিট এবং সার্চবক্স উইজেটগুলির জন্য সিএসএস ক্লাস
সিএসএস ক্লাস বর্ণনা
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 বাকী পাঠ্যের মধ্যে থাকতে পারে।

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

এই বিভাগটি আপনাকে স্থানটির সর্বাধিক স্বতঃস্ফূর্ত পরিষেবা তৈরি করতে সহায়তা করার জন্য সেরা অনুশীলনগুলি বর্ণনা করে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

না, কেবল ঠিকানা এবং অবস্থান প্রয়োজন

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

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

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

হ্যাঁ

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

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

না

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

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

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

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

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

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

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


  1. এখানে তালিকাভুক্ত ব্যয় মার্কিন ডলারে রয়েছে। সম্পূর্ণ মূল্যের তথ্যের জন্য দয়া করে গুগল ম্যাপস প্ল্যাটফর্ম বিলিং পৃষ্ঠাটি দেখুন।

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

নিম্নলিখিত নির্দেশিকাগুলি স্থান স্বতঃপথে পারফরম্যান্সকে অনুকূল করার উপায়গুলি বর্ণনা করে:

  • দেশের সীমাবদ্ধতা, অবস্থানের পক্ষপাতিত্ব এবং (প্রোগ্রাম্যাটিক বাস্তবায়নের জন্য) আপনার জায়গায় স্বতঃপূর্বক বাস্তবায়নে ভাষা পছন্দ যুক্ত করুন। উইজেটগুলির সাথে ভাষার পছন্দগুলির প্রয়োজন নেই যেহেতু তারা ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষার পছন্দগুলি বেছে নেয়।
  • যদি প্লেস অটো কমপ্লিট কোনও মানচিত্রের সাথে থাকে তবে আপনি মানচিত্রের ভিউপোর্টের মাধ্যমে অবস্থানকে পক্ষপাত করতে পারেন।
  • এমন পরিস্থিতিতে যখন কোনও ব্যবহারকারী স্বতঃপূরী ভবিষ্যদ্বাণীগুলির মধ্যে একটি বেছে নেন না, সাধারণত কারণ এই ভবিষ্যদ্বাণীগুলির কোনওটিই কাঙ্ক্ষিত ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করার জন্য মূল ব্যবহারকারী ইনপুটটি পুনরায় ব্যবহার করতে পারেন:
    • 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 Find Place 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.
    • 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.

Usage limits and policies

কোটা

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

নীতিমালা

Use of the Places Library, Maps JavaScript API must be in accordance with the policies described for the Places API .