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

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

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

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

लेआउट के अलग-अलग वर्शन

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

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

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

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

जगह की जानकारी का कॉम्पैक्ट व्यू

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

जगह की जानकारी का पूरा व्यू

जगह की जानकारी का पूरा व्यू (PlaceDetailsView), जगह की जानकारी दिखाने के लिए ज़्यादा जगह उपलब्ध कराता है. साथ ही, इससे ज़्यादा तरह की जानकारी दिखाई जा सकती है.

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

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

बिलिंग

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

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

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

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

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

जगह की जानकारी देने वाले कॉम्पोनेंट के उदाहरण सेक्शन में, उदाहरण देखें.

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

कस्टम स्टाइलिंग

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

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

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

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

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

कॉम्पैक्ट व्यू

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

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

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

160 पिक्सल से कम चौड़ाई वाले कॉम्पैक्ट व्यू सही तरीके से नहीं दिख सकते.

पूरे व्यू

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

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

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

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

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

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    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

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    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
  )

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

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

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