Pilih platform: Android iOS JavaScript

Komponen Place Details

Komponen Place Details dari Places UI Kit memungkinkan Anda menambahkan komponen UI individual yang menampilkan detail tempat di aplikasi Anda. Komponen ini dapat disesuaikan.

Komponen Place Details versi Lanjutan menawarkan fitur yang sama dengan komponen Place Details dan juga memungkinkan developer mengonfigurasi tombol tindakan komponen dan menerapkan opsi penelusuran dan pemfilteran ke ulasan dan media yang ditampilkan.

Komponen Place Details dapat digunakan secara independen atau bersama dengan layanan dan Google Maps Platform API lainnya. Komponen ini menggunakan ID Tempat, nama resource, atau koordinat lintang/bujur dan menampilkan informasi Place Details yang dirender.

Komponen Place Details sepenuhnya dapat diubah temanya, sehingga Anda dapat menyesuaikan font, warna, dan radius sudut agar sesuai dengan kasus penggunaan dan panduan merek visual Anda. Anda dapat menyesuaikan tampilan detail tempat dengan memberikan nilai PlacesMaterialTheme kustom. Anda juga dapat menyesuaikan kolom detail tempat yang disertakan dengan menentukan daftar entri PlaceDetailsCompactView, yang masing-masing sesuai dengan informasi yang ditampilkan tentang tempat tersebut.

Tips: Gunakan alat Penyesuaian untuk memvisualisasikan pengaruh berbagai kumpulan properti terhadap tampilan elemen Places Details dan mengakses kode dalam HTML/CSS, Kotlin/XML, dan Swift.

Varian tata letak

Komponen Place Details mendukung dua varian tata letak utama:

• Ringkas: Tata letak untuk melihat pratinjau informasi utama.
• Lengkap: Tata letak komprehensif yang menampilkan semua detail tempat yang tersedia.

Tata letak ringkas dapat ditampilkan dalam orientasi vertikal atau horizontal. Hal ini memungkinkan Anda mengintegrasikan komponen ke dalam berbagai tata letak desain dan ukuran layar. Tata letak lengkap hanya dapat ditampilkan secara vertikal.

Tata letak horizontal dan vertikal

Komponen Place Details memberi Anda kontrol terperinci atas konten yang ditampilkan dalam komponen. Setiap elemen (seperti foto, ulasan, dan informasi kontak) dapat ditampilkan atau disembunyikan secara individual, sehingga memungkinkan penyesuaian yang tepat terhadap tampilan komponen dan kepadatan informasi.

Opsi tampilan konten

Tampilan ringkas Place Details

Tampilan ringkas Place Details (PlaceDetailsCompactView) merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini dapat berguna di jendela info yang menandai tempat di peta, dalam pengalaman media sosial seperti berbagi lokasi dalam chat, sebagai saran untuk memilih lokasi Anda saat ini, atau dalam artikel media untuk mereferensikan tempat di Google Maps.

Tampilan lengkap Place Details

Tampilan lengkap Place Details (PlaceDetailsView) menawarkan area yang lebih besar untuk menampilkan informasi detail tempat, dan memungkinkan Anda menampilkan lebih banyak jenis informasi.

Opsi tampilan konten

Anda dapat menentukan konten yang akan ditampilkan menggunakan enum di PlaceDetailsCompactContent atau PlaceDetailsContent.

Tampilan ringkas	Tampilan lengkap
Foto tempat Galeri media layar penuh diaktifkan jika lightbox media ada Alamat tempat Rating dan jumlah rating Jenis tempat Harga Informasi pintu masuk khusus difabel Status buka sekarang	Kolase foto tempat Alamat tempat Rating dan jumlah rating Jenis tempat Harga Info aksesibilitas Status buka sekarang Jam buka Ringkasan editorial Situs Nomor telepon Ulasan yang dirender di tab khusus Plus Codes Daftar fitur, dirender di tab khusus Sorotan khusus jenis, seperti harga BBM untuk SPBU Jam ramai

Penagihan

Saat menggunakan Place Details UI Kit, Anda akan ditagih setiap kali metode PlaceDetailsQuery dipanggil. Jika memuat tempat yang sama beberapa kali, Anda akan ditagih untuk setiap permintaan.

Menambahkan detail tempat ke aplikasi Anda

Komponen Place Details adalah Swift UI View. Anda dapat menyesuaikan tampilan dan nuansa informasi detail tempat agar sesuai dengan kebutuhan dan tampilan aplikasi Anda. Pelajari penyesuaian lebih lanjut.

Anda dapat memilih untuk memuat komponen Place Details dengan ID Tempat, nama resource, atau koordinat lintang/bujur. Anda dapat memilih metode apa pun, atau beberapa metode. Tetapkan identifier di PlaceDetailsQuery struct ke .placeID, .resourceName, atau .coordinate.

Posisi default untuk tampilan ringkas adalah vertikal. Jika Anda menginginkan tata letak horizontal, tentukan orientation: .horizontal di PlaceDetailsCompactView. Anda juga dapat menentukan orientation: .vertical secara opsional untuk kejelasan. Tampilan lengkap hanya dapat ditampilkan secara vertikal.

Lihat contoh di bagian Contoh komponen Place Details.

Menyesuaikan tampilan visual

Gaya visual kustom

Anda dapat menyesuaikan warna, tipografi, spasi, batas, dan sudut komponen Place Details.

Places UI Kit menawarkan pendekatan sistem desain untuk penyesuaian visual yang secara kasar didasarkan pada Desain Material (dengan beberapa modifikasi khusus Google Maps). Lihat referensi Desain Material untuk Warna dan Tipografi. Secara default, gaya ini mematuhi bahasa desain visual Google Maps.

Places UI Kit menyediakan tema gelap secara default, sehingga Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

Lihat bagian Gaya visual kustom untuk mengetahui informasi selengkapnya tentang gaya.

Penyesuaian lebar dan tinggi

Tampilan ringkas

Lebar yang direkomendasikan:

• Orientasi vertikal: Antara 180 piksel dan 300 piksel.
• Orientasi horizontal: Antara 180 piksel dan 500 piksel.

Praktik terbaiknya adalah tidak menetapkan tinggi untuk tampilan ringkas. Hal ini akan memungkinkan konten di jendela menetapkan tinggi, sehingga semua informasi dapat ditampilkan.

Lebar yang lebih kecil dari 160 piksel mungkin tidak ditampilkan dengan benar.

Catatan: Gambar thumbnail Tempat tidak akan muncul untuk tampilan yang lebarnya kurang dari 350 piksel.

Tampilan lengkap

Untuk tampilan lengkap, lebar yang direkomendasikan adalah antara 250 piksel dan 450 piksel. Lebar yang lebih kecil dari 250 piksel mungkin tidak ditampilkan dengan benar.

Anda dapat menetapkan tinggi komponen: tampilan Place Details vertikal akan di-scroll secara vertikal dalam ruang yang dialokasikan.

Praktik terbaiknya adalah menetapkan tinggi untuk tampilan lengkap. Hal ini akan memungkinkan konten di jendela di-scroll dengan benar.

Contoh komponen Place Details

Catatan: Jika Anda tidak menentukan penyesuaian visual, nilai default akan dipertahankan.

Membuat tampilan lengkap dengan tata letak vertikal

Swift

  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
    )

Membuat tampilan ringkas dengan tata letak horizontal

Swift

  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
    )

Membuat tampilan lengkap dengan tata letak vertikal

Swift

  @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
  )

Menyesuaikan atribut gaya

Contoh ini menunjukkan cara menyesuaikan atribut gaya default tampilan lengkap atau ringkas.

Places UI Kit menyediakan tema gelap secara default, sehingga Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

Swift

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

Menampilkan konten tertentu

Contoh ini membuat tampilan ringkas yang hanya menampilkan media, alamat, rating, dan jenis, menggunakan tema yang dibuat dalam contoh sebelumnya.

Swift

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