Komponen Place Details

Komponen Place Details dari Places UI Kit memungkinkan Anda menambahkan setiap komponen UI yang menampilkan detail tempat di aplikasi.

PlaceDetailsCompactFragment merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini mungkin berguna di jendela info yang menyoroti tempat di peta, dalam pengalaman media sosial seperti membagikan lokasi dalam chat, sebagai saran untuk memilih lokasi Anda saat ini, atau dalam artikel media untuk mereferensikan tempat di Google Maps. PlaceDetailsCompactFragment dapat menampilkan nama, alamat, rating, jenis, harga, ikon aksesibilitas, status buka, dan satu foto.

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

Penagihan

Saat menggunakan Place Details UI Kit, Anda akan ditagih setiap kali metode .loadWithPlaceId() atau .loadWithResourceName() dipanggil. Jika memuat tempat yang sama beberapa kali, Anda akan ditagih untuk setiap permintaan.

Untuk menghindari tagihan beberapa kali, jangan tambahkan .loadWithPlaceId() atau .loadWithResourceName() secara langsung dalam metode siklus proses Android. Misalnya, jangan langsung memanggil .loadWithPlaceId() atau .loadWithResourceName() dalam metode onResume().

Menambahkan detail tempat ke aplikasi

Anda dapat menambahkan detail tempat ke aplikasi dengan menambahkan fragmen ke tata letak. Saat membuat instance fragmen, Anda dapat menyesuaikan tampilan dan nuansa informasi detail tempat agar sesuai dengan kebutuhan dan cocok dengan tampilan aplikasi Anda.

Anda memiliki dua metode yang tersedia di Kotlin dan Java: satu untuk memuat fragmen dengan ID Tempat (loadWithPlaceId()) dan satu untuk memuat fragmen dengan nama resource (loadWithResourceName()). Anda dapat memilih salah satu metode, atau keduanya jika menggunakan ID tempat dan nama resource.

Anda dapat menentukan orientasi (horizontal atau vertikal), penggantian tema, dan konten. Opsi kontennya adalah media, alamat, rating, harga, jenis, pintu masuk yang dapat diakses, dan status buka sekarang. Pelajari penyesuaian lebih lanjut.

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
  R.style.CustomizedPlaceDetailsTheme
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
  override fun onSuccess(place: Place) { ... }
      
  override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId)
// Load the fragment with a resource name.
//fragment.loadWithResourceName(resourceName)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override public void onSuccess(Place place) { ... }
    
        @Override public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId);
      
// Load the fragment with a resource name.
// fragment.loadWithResourceName(resourceName);

Lihat kode lengkap untuk memuat widget Place Details

Kotlin

        import android.os.Bundle
        import android.util.Log
        import android.view.View
        import android.widget.FrameLayout
        import androidx.appcompat.app.AppCompatActivity
        import com.google.android.gms.maps.CameraUpdateFactory
        import com.google.android.gms.maps.GoogleMap
        import com.google.android.gms.maps.OnMapReadyCallback
        import com.google.android.gms.maps.SupportMapFragment
        import com.google.android.gms.maps.model.LatLng
        import com.google.android.gms.maps.model.PointOfInterest
        import com.google.android.libraries.places.api.Places
        import com.google.android.libraries.places.api.net.PlacesClient
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment.Companion.ALL_CONTENT
        import com.google.android.libraries.places.widget.model.Orientation
        
        class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
            private var googleMap: GoogleMap? = null
            private val orientation: Orientation = Orientation.HORIZONTAL
            private lateinit var placesClient: PlacesClient
            private var placeDetailsFragment: PlaceDetailsCompactFragment? = null
        
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContentView(R.layout.activity_main)
        
                // --- Initialize Places SDK ---
                val apiKey = BuildConfig.PLACES_API_KEY
                if (apiKey.isEmpty()) {
                    Log.e("Places test", "No api key")
                    finish()
                    return
                }
                Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)
                placesClient = Places.createClient(this)
                // -----------------------------
        
                val mapFragment = supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
                mapFragment?.getMapAsync(this)
            }
        
            override fun onMapReady(map: GoogleMap) {
                googleMap = map
                val sydney = LatLng(-33.8688, 151.2093)
                val zoomLevel = 13f
                googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, zoomLevel))
                googleMap?.setOnPoiClickListener(this)
            }
        
            override fun onPoiClick(poi: PointOfInterest) {
                val placeId = poi.placeId
                Log.d("POI Click", "Place ID: $placeId")
                showPlaceDetailsFragment(placeId)
            }
        
            private fun showPlaceDetailsFragment(placeId: String) {
                placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }               
        
        

Menyesuaikan detail tempat

Kit UI Places 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.

Penting: Saat melakukan perubahan visual, Anda harus mematuhi persyaratan atribusi Google Maps.

Saat membuat instance fragmen, Anda dapat menentukan tema yang mengganti atribut gaya default. Atribut tema yang tidak diganti akan menggunakan gaya default. Jika ingin mendukung tema gelap, Anda dapat menambahkan entri untuk warna di values-night/colors.xml.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialsTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

Anda dapat menyesuaikan gaya berikut:

Atribut tema	Penggunaan
Warna
placesColorSurface	Latar belakang penampung dan dialog
placesColorOnSurface	Judul, konten dialog
placesColorOnSurfaceVariant	Informasi tempat
placesColorPrimary	Link
placesColorOutlineDecorative	Batas penampung
placesColorSecondaryContainer	Latar tombol
placesColorOnSecondaryContainer	Teks dan ikon tombol
placesColorPositive	Menempatkan label "Buka" sekarang
placesColorNegative	Menempatkan label "Tutup" sekarang
placesColorInfo	Ikon pintu masuk khusus difabel
Tipografi
placesTextAppearanceHeadlineMedium	Judul dialog
placesTextAppearanceTitleSmall	Nama tempat
placesTextAppearanceBodyMedium	Konten dialog
placesTextAppearanceBodySmall	Informasi tempat
placesTextAppearanceLabelLarge	Label tombol
Sudut
placesCornerRadius	Sudut penampung
Atribusi Brand Google Maps
placesColorAttributionLight	Tombol pengungkapan dan atribusi Google Maps tema terang (enum untuk putih, abu-abu, dan hitam)
placesColorAttributionDark	Tombol pengungkapan dan atribusi Google Maps tema gelap (enum untuk putih, abu-abu, dan hitam)

Lebar dan tinggi

Untuk tampilan vertikal, lebar yang direkomendasikan adalah antara 180dp dan 300dp. Untuk tampilan horizontal, lebar yang direkomendasikan adalah antara 180dp dan 500dp. Tampilan yang lebih kecil dari 160 dp mungkin tidak ditampilkan dengan benar.

Praktik terbaiknya adalah tidak menetapkan tinggi. Tindakan ini akan memungkinkan konten di jendela menyetel tinggi, sehingga semua informasi dapat ditampilkan.

Catatan: Gambar thumbnail Tempat tidak akan muncul untuk tampilan dengan lebar kurang dari 350 dp.

Warna atribusi

Persyaratan layanan Google Maps mewajibkan Anda menggunakan salah satu dari tiga warna merek untuk atribusi Google Maps. Atribusi ini harus terlihat dan dapat diakses saat perubahan penyesuaian telah dilakukan.

Kami menawarkan 3 warna merek yang dapat dipilih dan dapat ditetapkan secara terpisah untuk tema terang dan gelap:

• Tema terang: placesColorAttributionLight dengan enum untuk putih, abu-abu, dan hitam.
• Tema gelap: placesColorAttributionDark dengan enum untuk putih, abu-abu, dan hitam.

Contoh penyesuaian

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

Contoh ini menyesuaikan konten standar.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
    orientation,
    PlaceDetailsCompactFragment.STANDARD_CONTENT,
    R.style.CustomizedPlaceDetailsTheme
  )

Contoh ini menyesuaikan opsi konten.

  val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
    orientation,
    listOf(
        Content.ADDRESS,
        Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
    ),
    R.style.CustomizedPlaceDetailsTheme
)
  

Contoh ini menyesuaikan semua opsi Content.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
    orientation,
    PlaceDetailsCompactFragment.ALL_CONTENT,
    R.style.CustomizedPlaceDetailsTheme
  )