प्लैटफ़ॉर्म चुनें: 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) में मौजूद विकल्पों का इस्तेमाल करें.

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

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