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

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

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

यह कॉम्पोनेंट, AutocompleteFilter स्ट्रक्ट के ज़रिए भौगोलिक सीमाएं और खोज के अन्य पैरामीटर लेता है.

जवाब में, सिर्फ़ placeID फ़ील्ड की वैल्यू के साथ Place स्ट्रक्चर दिया गया है.

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

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

बिलिंग

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

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

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

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

इसके बाद, एक ऐसा बटन बनाएं जो आपकी पसंद के मुताबिक बनाए गए बेसिक ऑटोकंप्लीट कंपोनेंट को लॉन्च करे.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

पूरा उदाहरण देखें.

बेसिक ऑटोकंप्लीट कॉम्पोनेंट को पसंद के मुताबिक बनाना

सूची का लेआउट

आपके पास दो लाइन वाली सूची या कई लाइन वाली सूची दिखाने का विकल्प होता है. AutocompleteUICustomization क्लास में, AutocompleteListDensity (.twoLine या .multiLine) में दिए गए विकल्पों का इस्तेमाल करें. अगर आपने सूची की डेंसिटी तय नहीं की है, तो कॉम्पोनेंट में दो लाइनों वाली सूची दिखेगी.

जगह की जानकारी का आइकॉन

आपके पास यह चुनने का विकल्प होता है कि नतीजों की सूची में, जगह का डिफ़ॉल्ट आइकॉन दिखाना है या नहीं. AutocompleteUICustomization क्लास में, AutocompleteUIIcon (.defaultIcon या .noIcon) में दिए गए विकल्पों का इस्तेमाल करें.

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

Basic Autocomplete कॉम्पोनेंट को पसंद के मुताबिक बनाने के लिए, AutocompleteUICustomization क्लास का इस्तेमाल करें.

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
)

उदाहरण

इस उदाहरण में, बटन के साथ कस्टम बेसिक ऑटोकंप्लीट कॉम्पोनेंट बनाया गया है. डिफ़ॉल्ट आइकॉन और दो लाइनों वाली सूची की डेंसिटी को चुना गया है. अपने-आप पूरा होने वाले फ़िल्टर को, लास वेगास और उसके आस-पास के इलाकों में, अकाउंटिंग से जुड़ी जगहें ढूंढने के लिए सेट किया गया है.

Swift

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon)
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }