जगह के बारे में ज़्यादा जानकारी देने वाला कॉम्पोनेंट

Places यूआई किट का 'जगह की जानकारी' कॉम्पोनेंट, आपको एक यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट जोड़ने की सुविधा देता है. यह कॉम्पोनेंट, आपके ऐप्लिकेशन में जगह की जानकारी दिखाता है. इस कॉम्पोनेंट को पसंद के मुताबिक बनाया जा सकता है.

Place Details कॉम्पोनेंट को अकेले या Google Maps Platform के अन्य एपीआई और सेवाओं के साथ इस्तेमाल किया जा सकता है. यह कॉम्पोनेंट, जगह का आईडी, संसाधन का नाम या अक्षांश/देशांतर के निर्देशांक लेता है और रेंडर की गई जगह की जानकारी दिखाता है.

Place Details कॉम्पोनेंट को पूरी तरह से थीम के हिसाब से बनाया जा सकता है. इससे आपको फ़ॉन्ट, रंग, और कॉर्नर के रेडियस को अपनी ज़रूरत और विज़ुअल ब्रैंड के दिशा-निर्देशों के हिसाब से बनाने की सुविधा मिलती है. कस्टम PlacesMaterialTheme वैल्यू देकर, जगह की जानकारी को पसंद के मुताबिक बनाया जा सकता है. आपके पास यह तय करने का विकल्प भी होता है कि जगह की जानकारी के किन फ़ील्ड को शामिल किया जाए. इसके लिए, PlaceDetailsCompactView एंट्री की सूची तय करें. इनमें से हर एंट्री, जगह के बारे में दिखाई गई जानकारी के किसी हिस्से से जुड़ी होती है.

लेआउट के वैरिएंट

Place Details कॉम्पोनेंट, लेआउट के दो मुख्य वैरिएंट के साथ काम करता है:

• कंपैक्ट: यह लेआउट, मुख्य जानकारी की झलक देखने के लिए होता है.
• पूरी जानकारी: इसमें जगह की पूरी जानकारी दिखाने वाला लेआउट होता है.

कॉम्पैक्ट लेआउट को वर्टिकल या हॉरिज़ॉन्टल ओरिएंटेशन में दिखाया जा सकता है. इससे कॉम्पोनेंट को अलग-अलग डिज़ाइन लेआउट और स्क्रीन साइज़ में इंटिग्रेट किया जा सकता है. पूरे लेआउट को सिर्फ़ वर्टिकल तरीके से दिखाया जा सकता है.

जगह के बारे में ज़्यादा जानकारी देने वाले कॉम्पोनेंट की मदद से, कॉम्पोनेंट में दिखाए जाने वाले कॉन्टेंट पर ज़्यादा कंट्रोल पाया जा सकता है. हर एलिमेंट (जैसे, फ़ोटो, समीक्षाएं, और संपर्क जानकारी) को अलग-अलग दिखाया या छिपाया जा सकता है. इससे कॉम्पोनेंट के दिखने के तरीके और जानकारी की डेंसिटी को सटीक तरीके से पसंद के मुताबिक बनाया जा सकता है.

Place Details का कंपैक्ट व्यू

जगह के बारे में ज़्यादा जानकारी देने वाले कॉम्पैक्ट व्यू (PlaceDetailsCompactView) में, चुनी गई जगह की जानकारी कम जगह में दिखती है. यह जानकारी, मैप पर किसी जगह को हाइलाइट करने वाली जानकारी विंडो में काम आ सकती है. इसके अलावा, सोशल मीडिया पर चैट में जगह की जानकारी शेयर करने जैसे काम के लिए भी इसका इस्तेमाल किया जा सकता है. साथ ही, इसका इस्तेमाल आपकी मौजूदा जगह की जानकारी चुनने के सुझाव के तौर पर या मीडिया लेख में Google Maps पर जगह का रेफ़रंस देने के लिए किया जा सकता है.

जगह की जानकारी का फ़ुल व्यू

जगह की ज़्यादा जानकारी वाला पूरा व्यू (PlaceDetailsView) जगह की ज़्यादा जानकारी दिखाने के लिए बड़ा प्लैटफ़ॉर्म देता है. इससे आपको ज़्यादा तरह की जानकारी दिखाने का विकल्प मिलता है.

कॉन्टेंट दिखाने के विकल्प

PlaceDetailsCompactContent या PlaceDetailsContent में मौजूद enum का इस्तेमाल करके, यह तय किया जा सकता है कि कौनसी सामग्री दिखानी है.

बिलिंग

जगह की जानकारी देने वाली यूआई किट का इस्तेमाल करने पर, PlaceDetailsQuery तरीके को कॉल करने पर आपसे शुल्क लिया जाता है. एक ही जगह की जानकारी को कई बार लोड करने पर, आपसे हर अनुरोध के लिए शुल्क लिया जाता है.

अपने ऐप्लिकेशन में जगह की जानकारी जोड़ना

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

जगह की जानकारी वाले कॉम्पोनेंट को, जगह के आईडी, संसाधन के नाम या अक्षांश/देशांतर के निर्देशांकों के साथ लोड किया जा सकता है. आपके पास कोई भी तरीका या एक से ज़्यादा तरीके चुनने का विकल्प होता है. PlaceDetailsQuery स्ट्रक्चर में मौजूद identifier को .placeID, .resourceName या .coordinate पर सेट करें.

कॉम्पैक्ट व्यू की डिफ़ॉल्ट पोज़िशन वर्टिकल होती है. अगर आपको हॉरिज़ॉन्टल लेआउट चाहिए, तो orientation: .horizontal में PlaceDetailsCompactView डालें. ज़्यादा जानकारी देने के लिए, orientation: .vertical भी तय किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. पूरा व्यू सिर्फ़ वर्टिकल तरीके से दिखाया जा सकता है.

Place Details कॉम्पोनेंट के उदाहरण सेक्शन में उदाहरण देखें.

विज़ुअल के दिखने के तरीके को पसंद के मुताबिक बनाना

पसंद के मुताबिक स्टाइल बनाना

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

Places यूआई किट, विज़ुअल को पसंद के मुताबिक बनाने के लिए डिज़ाइन सिस्टम का इस्तेमाल करती है. यह सिस्टम, मटीरियल डिज़ाइन पर आधारित है. हालांकि, इसमें Google Maps के हिसाब से कुछ बदलाव किए गए हैं. Color और Typography के लिए, Material Design का रेफ़रंस देखें. डिफ़ॉल्ट रूप से, स्टाइल Google Maps की विज़ुअल डिज़ाइन लैंग्वेज के मुताबिक होती है.

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

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

चौड़ाई और ऊंचाई को पसंद के मुताबिक बनाना

कंपैक्ट व्यू

सुझाई गई चौड़ाई:

• वर्टिकल ओरिएंटेशन: 180 पिक्सल से 300 पिक्सल के बीच.
• हॉरिज़ॉन्टल स्क्रीन की दिशा: 180 पिक्सल से 500 पिक्सल के बीच.

सबसे सही तरीका यह है कि कॉम्पैक्ट व्यू के लिए ऊंचाई सेट न की जाए. इससे विंडो में मौजूद कॉन्टेंट की ऊंचाई सेट हो जाएगी. इससे पूरी जानकारी दिखाई जा सकेगी.

ऐसा हो सकता है कि 160 पिक्सल से कम चौड़ाई वाले विज्ञापन सही तरीके से न दिखें.

पूरे व्यू

पूरी तरह से दिखने वाले विज्ञापनों के लिए, सुझाई गई चौड़ाई 250 पिक्सल से 450 पिक्सल के बीच है. चौड़ाई 250 पिक्सल से कम होने पर, हो सकता है कि इमेज ठीक से न दिखे.

आपके पास कॉम्पोनेंट की ऊंचाई सेट करने का विकल्प होता है: Place Details दिखाने वाला वर्टिकल व्यू, तय की गई जगह में वर्टिकल तौर पर स्क्रोल करेगा.

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

जगह के बारे में ज़्यादा जानकारी देने वाले कॉम्पोनेंट के उदाहरण

वर्टिकल लेआउट वाला पूरा व्यू बनाना

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

हॉरिज़ॉन्टल लेआउट वाला कॉम्पैक्ट व्यू बनाना

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

वर्टिकल लेआउट वाला पूरा व्यू बनाना

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

स्टाइल एट्रिब्यूट को पसंद के मुताबिक बनाना

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

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

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

किसी खास कॉन्टेंट को दिखाना

इस सैंपल में, कॉम्पैक्ट व्यू बनाया गया है. इसमें सिर्फ़ मीडिया, पता, रेटिंग, और टाइप दिखता है. इसके लिए, पिछले उदाहरण में बनाई गई थीम का इस्तेमाल किया गया है.

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }