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

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

ऐसी थीम तय की जा सकती है जो स्टाइल एट्रिब्यूट के किसी भी डिफ़ॉल्ट वर्शन को बदल दे. जगह की जानकारी वाले कॉम्पोनेंट के रंग, टाइपोग्राफ़ी, स्पेसिंग, बॉर्डर, और कोनों को पसंद के मुताबिक बनाया जा सकता है. डिफ़ॉल्ट वैल्यू PlacesMaterialTheme है.

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

Places UI Kit में, डिफ़ॉल्ट रूप से गहरे रंग वाली थीम उपलब्ध होती है. इसलिए, आपको गहरे और हल्के, दोनों रंग वाली थीम को पसंद के मुताबिक बनाना पड़ सकता है. गहरे रंग वाली थीम को पसंद के मुताबिक बनाने के लिए, अपनी कस्टम थीम में .dark और attribution.darkModeColor की वैल्यू जोड़ें.

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

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

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

Swift

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

उदाहरण

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

अहम जानकारी: showWidget की शुरुआती वैल्यू को फ़ॉल्स पर सेट करें, ताकि उपयोगकर्ता के बटन पर क्लिक करने पर आपका पसंद के मुताबिक बनाया गया कॉम्पोनेंट दिखे.

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

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,
        theme: PlacesMaterialTheme()
      )
      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)
        }
      }
    }
  }

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

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}