প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

বেসিক প্লেস অটো-কমপ্লিট কম্পোনেন্ট

Places UI Kit-এর Basic Place Autocomplete কম্পোনেন্ট আপনাকে একটি স্বতন্ত্র UI কম্পোনেন্ট যোগ করতে দেয় যা কোনও ব্যবহারকারী কোনও জায়গা বেছে নিলে প্লেস আইডি রিটার্ন করে। এই কম্পোনেন্ট হল একটি ফুল-স্ক্রিন কভার যা ব্যবহারকারীদের কোয়েরি লেখার জন্য একটি সার্চ বার প্রদান করে। ব্যবহারকারী টাইপ করার সাথে সাথে সার্চ বারের নিচে অটোকমপ্লিট ফলাফলের একটি তালিকা দেখানো হবে। ব্যবহারকারী কোনও জায়গায় ট্যাপ করলে, ডেভেলপারকে শুধুমাত্র প্লেস আইডি সহ একটি প্লেস অবজেক্ট রিটার্ন করা হয়। এই কম্পোনেন্ট কাস্টমাইজ করা যায়।

প্রাথমিক স্থান অটোকমপ্লিট কম্পোনেন্টে নিম্নলিখিত কাস্টমাইজেশন বিকল্প আছে: তালিকার ঘনত্ব এবং লোকেশন আইকন যোগ করা হবে কিনা। কম্পোনেন্ট কাস্টমাইজ করতে AutocompleteUICustomization ব্যবহার করুন।

আপনি Basic Place Autocomplete কম্পোনেন্টটি আলাদাভাবে বা অন্যান্য Google Maps Platform API ও পরিষেবার সাথে একসাথে ব্যবহার করতে পারেন।

বিলিং

কম্পোনেন্টটি খোলা হলে এবং কোয়েরি করা হলে, প্রতিবার আপনাকে বিল করা হয়। সেই সেশন শেষ না হওয়া পর্যন্ত বা তালিকা থেকে কোনও জায়গা বেছে না নেওয়া পর্যন্ত আপনাকে আর বিল করা হবে না।

আপনার অ্যাপে Basic Autocomplete কম্পোনেন্ট যোগ করুন

প্লেস অটোকমপ্লিট (নতুন) ফিচারকে Places UI Kit ছাড়া ব্যবহার করার সময় আপনি যেভাবে অটোকমপ্লিট ফিল্টার প্যারামিটার সেট করতেন, ঠিক সেইভাবেই সেট করুন (যেমন, রিটার্ন করার ধরন, ফলাফল সীমাবদ্ধ করার দেশ, ফলাফলের জন্য অঞ্চলের কোঅর্ডিনেট, উপলভ্য থাকলে দূরত্ব সংক্রান্ত তথ্য দেখানোর জন্য অনুরোধের উৎস)। সম্পূর্ণ নির্দেশাবলী ও অটোমেটিক সম্পূর্ণ করার ফিল্টার তৈরি করার কোডের উদাহরণ পেতে প্লেস অটোকমপ্লিট (নতুন) ডকুমেন্টেশন দেখুন।

আপনার অটোমেটিক সম্পূর্ণ করার ফিল্টার তৈরি করা হয়ে গেলে, আপনার UI কাস্টমাইজেশন যোগ করুন। কাস্টমাইজ করার বিকল্প ও নির্দেশাবলী দেখুন।

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

সম্পূর্ণ উদাহরণ দেখুন।

'বেসিক অটোকমপ্লিট' কম্পোনেন্ট কাস্টমাইজ করা

কন্টেন্ট কাস্টমাইজ করা

তালিকার ঘনত্ব

আপনি দুই-লাইনের তালিকা বা মাল্টিলাইন তালিকা দেখানোর বিকল্প বেছে নিতে পারেন। AutocompleteUICustomization ক্লাসে AutocompleteListDensity (TWO_LINE বা MULTI_LINE) বিকল্প ব্যবহার করুন। আপনি তালিকার ঘনত্ব নির্দিষ্ট না করলে, কম্পোনেন্টটি দুই-লাইনের তালিকা দেখাবে।

লোকেশন আইকন

ফলাফলের তালিকায় ডিফল্ট জায়গার আইকন দেখাবেন কিনা তা বেছে নিতে পারবেন। AutocompleteUICustomization ক্লাসে AutocompleteUIIcon (listItemDefaultIcon বা noIcon) বিকল্প ব্যবহার করুন।

থিম কাস্টমাইজ করুন

আপনি এমন একটি থিম নির্দিষ্ট করতে পারেন যা ডিফল্ট স্টাইল অ্যাট্রিবিউটের যেকোনও একটিকে ওভাররাইড করে। আপনি নিজের স্থান সম্পর্কিত বিবরণের কম্পোনেন্টের রঙ, টাইপোগ্রাফি, স্পেসিং, বর্ডার ও কোণ কাস্টমাইজ করতে পারবেন। ডিফল্ট হল PlacesMaterialTheme।

ওভাররাইড করা হয়নি এমন যেকোনও থিম অ্যাট্রিবিউট ডিফল্ট স্টাইল ব্যবহার করে।

Places UI কিটে ডিফল্ট হিসেবে ডার্ক থিম দেওয়া থাকে, তাই আপনাকে ডার্ক ও লাইট থিম, দুটিই কাস্টমাইজ করতে হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, values-night/colors.xml-এ রঙের জন্য একটি এন্ট্রি যোগ করুন।

থিম সম্পর্কে আরও তথ্য পেতে কাস্টম স্টাইলিং বিভাগ দেখুন।

Basic Autocomplete কম্পোনেন্টে কন্টেন্ট ও থিম কাস্টমাইজেশন যোগ করা

Basic Autocomplete কম্পোনেন্ট কাস্টমাইজ করতে AutocompleteUICustomization ক্লাস ব্যবহার করুন।

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

উদাহরণ

একটি কাস্টম বেসিক অটোকমপ্লিট কম্পোনেন্ট যোগ করুন।

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

থিম কাস্টমাইজ করুন

Places UI Kit ডিফল্ট হিসেবে ডার্ক থিম প্রদান করে, তাই আপনাকে ডার্ক ও লাইট থিম, দুটিই কাস্টমাইজ করতে হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, values-night/colors.xml-এ রঙের জন্য একটি এন্ট্রি যোগ করুন।

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
    <item name="placesCornerRadius">20dp</item>
  </style>