Advanced Place Details कॉम्पोनेंट

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

Place Details का ऐडवांस कॉन्फ़िगरेशन

ऐडवांस सुविधाओं को ऐक्सेस करने के लिए, AdvancedPlaceDetailsView या AdvancedPlaceDetailsCompactView का इस्तेमाल करें.

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

AdvancedPlaceDetailsContent में मौजूद enum का इस्तेमाल करके, यह तय किया जा सकता है कि कौनसा कॉन्टेंट दिखाना है. जगह की जानकारी के ज़रूरी डेटा की तरह ही, सभी कॉन्टेंट को कॉन्फ़िगर किया जा सकता है. साथ ही, यह भी चुना जा सकता है कि जगह का नाम दिखाया जाए या नहीं.

ऐक्शन बटन कॉन्फ़िगर करना

ऐक्शन बटन हटाने या उन्हें पसंद के मुताबिक बनाने के लिए, AdvancedPlaceDetailsView या AdvancedPlaceDetailsCompactView के .cornerActions और .mainActions तरीकों का इस्तेमाल करें.

विज़ुअल एट्रिब्यूशन से जुड़ी ज़रूरी शर्तें

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

अहम जानकारी: आपको असली उपयोगकर्ताओं को साफ़ तौर पर बताना होगा कि कस्टम ऐक्शन बटन, Google के अलावा किसी तीसरे पक्ष के साथ उपयोगकर्ता की जानकारी कब शेयर करेगा. विज़ुअल एट्रिब्यूशन से जुड़ी ज़रूरी शर्तें देखें.

दाईं ओर दिए गए उदाहरण में एक कस्टम इमेज दिखाई गई है. इससे साफ़ तौर पर पता चलता है कि उपयोगकर्ता की जानकारी "Altostrat" को भेजी जाएगी.

खोजने और फ़िल्टर करने के विकल्प लागू करना

मीडिया या समीक्षाओं को खोजने और फ़िल्टर करने की सुविधा चालू करने के लिए, AdvancedPlaceDetailsView या AdvancedPlaceDetailsCompactView के .searchMediaOptions और .searchReviewOptions तरीकों का इस्तेमाल करें.

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

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

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

पसंद के मुताबिक कॉन्टेंट जोड़ने के लिए, AdvancedPlaceDetailsCompactView के .placeDetailsCompactContentSlot तरीके का इस्तेमाल करें. .basicSectionTop और .basicSectionBottom पोज़िशन उपलब्ध हैं.

कॉन्टेंट स्लॉट के लिए, एट्रिब्यूशन से जुड़ी ज़रूरी शर्तें और कॉन्टेंट के सुझाव

जब कस्टम कॉन्टेंट स्लॉट को माउंट किया जाता है, तो जानकारी अपने-आप अपडेट हो जाती है. इससे यह साफ़ तौर पर पता चलता है कि कौनसा कॉन्टेंट Google ने उपलब्ध कराया है और कौनसा कॉन्टेंट तीसरे पक्षों ने उपलब्ध कराया है.

क्या करें

Google Place की जानकारी और कस्टम कॉन्टेंट के बीच साफ़ तौर पर विज़ुअल हैरारकी बनाए रखें. इससे जानकारी के सोर्स को लेकर कोई भ्रम नहीं रहेगा.

जानकारी के सोर्स के बारे में साफ़ तौर पर बताना

क्या करें

अपने उपयोगकर्ताओं के मौजूदा लक्ष्यों के हिसाब से, स्थानीय और अहम जानकारी दें. रीयल-टाइम बुकिंग विंडो या मौजूदा उपलब्धता जैसी जानकारी देने से, उपयोगकर्ताओं को तेज़ी से और सोच-समझकर फ़ैसले लेने में मदद मिलती है.

अहम जानकारी देना

क्या न करें

Google Place की मौजूदा जानकारी का डुप्लीकेट न बनाएं. जैसे, रेटिंग, समीक्षाएं या कारोबार के खुले होने का समय. भले ही, आपने Google से मिले कॉन्टेंट को छिपाया हो. ऐसा करने से, उपयोगकर्ताओं को कॉन्टेंट के सोर्स के बारे में भ्रम हो सकता है. साथ ही, उन्हें यह समझने में परेशानी हो सकती है कि कॉन्टेंट Google से मिला है या किसी तीसरे पक्ष से.

Google पर मौजूद जगह की जानकारी का डुप्लीकेट न बनाएं

क्या न करें

ऐसे दावे या बैज न दिखाएं जिनके लिए क्रेडिट न दिया गया हो. उदाहरण के लिए, "सबसे ज़्यादा सुझाया गया!". इन्हें Google के आधिकारिक समर्थन के तौर पर समझा जा सकता है. कस्टम कॉन्टेंट में उसके सोर्स की जानकारी साफ़ तौर पर दी जानी चाहिए.

बिना एट्रिब्यूशन वाले दावे या बैज न दिखाएं

क्या न करें

कस्टम प्लेस कंटेनर में विज्ञापन, मार्केटिंग कॉपी, प्रमोशन वाली छूट या सदस्यता के प्रॉम्प्ट शामिल न करें.

विज्ञापन, मार्केटिंग कॉपी, प्रमोशन वाली छूट या सदस्यता के प्रॉम्प्ट शामिल न करें

Place Details के ऐडवांस उदाहरण

जगह का नाम न डालें

जगह का नाम न दिखाने के लिए, AdvancedPlaceDetailsConfiguration के content पैरामीटर में .name को शामिल न करें.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  // Query for loading the place details component.
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  @State private var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content:[.address()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
  }
}

ऐक्शन बटन हटाना

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ _ in
      return []
    }
  }
}

कस्टम और पहले से तय कार्रवाइयां जोड़ना

इस सैंपल में, उपयोगकर्ता को किसी जगह को पसंदीदा या पसंदीदा से हटाने का विकल्प मिलता है. साथ ही, पहले से तय की गई Maps में खोलें कार्रवाई भी मिलती है.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  
  @State var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ place in
      var actions: [MainPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart.fill"),
              label: "Unfavorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart"),
              label: "Favorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
    .cornerActions { place in
      var actions: [CornerPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart.fill"),
              accessibilityLabel: "Unfavorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart"),
              accessibilityLabel: "Favorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
  }

  func toggleFavorite(_ placeID: String) {
    if favoritePlaces.contains(placeID) {
      favoritePlaces.remove(placeID)
    } else {
      favoritePlaces.insert(placeID)
    }
  }
}

समीक्षाओं और मीडिया को फ़िल्टर करना

इस कोड सैंपल में सिर्फ़ वह मीडिया और समीक्षाएं दिखती हैं जिनमें "कॉफ़ी" का ज़िक्र किया गया है.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  let searchMediaOptions = SearchMediaOptions(query: "coffee")
  let searchReviewsOptions = SearchReviewsOptions(query: "coffee")

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: [.media(), .reviews()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { _ in }
    )
    .searchMediaOptions(searchMediaOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
    .searchReviewsOptions(searchReviewsOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
  }
}

कॉन्टेंट स्लॉट बनाना

इस सैंपल में, basicSectionTop और basicSectionBottom स्लॉट में कॉन्टेंट जोड़ा गया है.

Swift

import SwiftUI
import PlacesSwift

struct ItineraryCard: View {
    static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID(peetsCoffeePlaceID)
    )

    var body: some View {
      AdvancedPlaceDetailsCompactView(
        orientation: .vertical,
        query: $query,
        configuration: AdvancedPlaceDetailsCompactConfiguration(
          content: AdvancedPlaceDetailsCompactView.allContent,
          theme: PlacesMaterialTheme()
        ),
        placeDetailsCallback: { _ in }
      )
      .placeDetailsCompactContentSlot(position: .basicSectionTop) { place in
        Text("Day 2 • 2:30 PM")
          .font(.caption)
          .fontWeight(.bold)
          .foregroundColor(.accentColor)
      }
      .placeDetailsCompactContentSlot(position: .basicSectionBottom) { place in
        VStack(alignment: .leading, spacing: 4) {
          Text("AI Notes")
            .font(.caption)
            .bold()
          Text("Great quiet atmosphere for morning meetings. Famous for house-roasted pour-overs.")
            .font(.footnote)
            .foregroundColor(.secondary)
        }
        .padding(8)
        .background(Color(.systemGray6))
        .cornerRadius(8)
      }
    }
}