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

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

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

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

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

बिलिंग

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

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

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

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

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

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

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

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>