प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाला बुनियादी कॉम्पोनेंट

Places UI Kit का Basic Place Autocomplete कॉम्पोनेंट, आपको एक ऐसा यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट जोड़ने की सुविधा देता है जो किसी उपयोगकर्ता के जगह चुनने पर, जगह का आईडी दिखाता है. यह कॉम्पोनेंट, पूरी स्क्रीन को कवर करता है. इसमें उपयोगकर्ताओं के लिए एक खोज बार होता है, ताकि वे कोई क्वेरी डाल सकें. जब उपयोगकर्ता टाइप करेगा, तब खोज बार के नीचे, अपने-आप पूरी होने वाली सूची दिखेगी. जब कोई उपयोगकर्ता किसी जगह पर टैप करता है, तो डेवलपर को सिर्फ़ जगह के आईडी वाला प्लेस ऑब्जेक्ट मिलता है. इस कॉम्पोनेंट को पसंद के मुताबिक बनाया जा सकता है.

किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा वाले बुनियादी कॉम्पोनेंट में, अपनी पसंद के मुताबिक बदलाव करने के ये विकल्प मिलते हैं: लिस्ट डेंसिटी और जगह के आइकॉन शामिल करने का विकल्प. कॉम्पोनेंट को अपनी पसंद के मुताबिक बनाने के लिए, AutocompleteUICustomization का इस्तेमाल करें.

जगह के नाम अपने-आप भरने की सुविधा देने वाले बेसिक कॉम्पोनेंट को, Google Maps Platform के अन्य एपीआई और सेवाओं के साथ या उनके बिना इस्तेमाल किया जा सकता है.

बिलिंग

जब भी कॉम्पोनेंट खोला जाता है और कोई क्वेरी की जाती है, तब आपसे शुल्क लिया जाता है. जब तक सेशन खत्म नहीं हो जाता या सूची से कोई जगह नहीं चुनी जाती, तब तक आपसे उस सेशन के लिए दोबारा शुल्क नहीं लिया जाएगा.

अपने ऐप्लिकेशन में बुनियादी ऑटोकंप्लीट कॉम्पोनेंट जोड़ना

ऑटोकंप्लीट फ़िल्टर के पैरामीटर सेट करें. जैसे, नतीजे के तौर पर किस तरह की जानकारी दिखानी है, किस देश के नतीजे दिखाने हैं, नतीजों के लिए इलाके के कोऑर्डिनेट, दूरी की जानकारी दिखाने के लिए अनुरोध का ऑरिजिन (अगर उपलब्ध हो). ये पैरामीटर उसी तरह सेट करें जैसे Places UI Kit के बिना, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा (नई) का इस्तेमाल करते समय सेट किए जाते हैं. पूरे निर्देशों और ऑटोकंप्लीट फ़िल्टर बनाने के कोड का उदाहरण देखने के लिए, Place Autocomplete (New) का दस्तावेज़ देखें.

ऑटोकंप्लीट फ़िल्टर बनाने के बाद, यूज़र इंटरफ़ेस (यूआई) में अपनी पसंद के मुताबिक बदलाव करें. पसंद के मुताबिक बनाने के विकल्प और निर्देश देखें.

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 यूआई किट में, गहरे रंग वाली थीम डिफ़ॉल्ट रूप से उपलब्ध होती है. इसलिए, आपको गहरे और हल्के, दोनों तरह के रंग वाली थीम को पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को पसंद के मुताबिक बनाने के लिए, values-night/colors.xml में रंग के लिए एक एंट्री जोड़ें.

थीमिंग के बारे में ज़्यादा जानकारी के लिए, कस्टम स्टाइलिंग सेक्शन देखें.

बुनियादी ऑटोकंप्लीट कॉम्पोनेंट में कॉन्टेंट और थीम को पसंद के मुताबिक बनाने की सुविधाएं जोड़ना

बुनियादी ऑटोकंप्लीट कॉम्पोनेंट को पसंद के मुताबिक बनाने के लिए, 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);

थीम को पसंद के मुताबिक बनाना

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