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

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

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

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

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

बिलिंग

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

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

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

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

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 है.

जिन थीम एट्रिब्यूट की वैल्यू नहीं बदली जाती है उनके लिए डिफ़ॉल्ट स्टाइल का इस्तेमाल किया जाता है.

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

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

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