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

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

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

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

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

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

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

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

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

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

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

जगह के बारे में ज़्यादा जानकारी देने वाला फ़ुल व्यू

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

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

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

बिलिंग

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

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

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

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

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

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

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

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

कॉम्पोनेंट के लुक और फ़ील को placesMaterialColor, placesMaterialFont, placesMaterialShape, और placesMaterialTheme स्ट्रक्ट की मदद से पसंद के मुताबिक बनाया जाता है.

इन स्टाइल को पसंद के मुताबिक बनाया जा सकता है:

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

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

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

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

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

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

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

पूरे व्यू

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

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

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

एट्रिब्यूशन के रंग

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

हम आपको ब्रैंड के तीन रंग चुनने का विकल्प देते हैं. इन्हें लाइट और डार्क थीम के लिए अलग-अलग सेट किया जा सकता है:

• हल्के रंग वाली थीम: attributionColorLight में सफ़ेद, स्लेटी, और काले रंग के लिए एनम.
• गहरे रंग वाली थीम: attributionColorDark में सफ़ेद, स्लेटी, और काले रंग के लिए एनम.

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

वर्टिकल लेआउट में फ़ुल व्यू बनाना

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

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

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

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

  // 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)
  }