Seleziona la piattaforma: Android iOS JavaScript

Componente Place Details

Il componente Place Details di Places UI Kit ti consente di aggiungere un singolo componente UI che mostra i dettagli del luogo nella tua app. Questo componente è personalizzabile.

Componente compatto Dettagli del luogo

Il componente Dettagli luogo può essere utilizzato in modo indipendente o in combinazione con altri servizi e API di Google Maps Platform. Il componente accetta un ID luogo, un nome della risorsa o coordinate di latitudine/longitudine e restituisce le informazioni di Place Details visualizzate.

Il componente Dettagli luogo è completamente personalizzabile, il che ti consente di modificare caratteri, colori e raggi angolari in base al tuo caso d'uso e alle linee guida per il brand visivo. Puoi personalizzare l'aspetto dei dettagli del luogo creando un tema che estenda PlacesMaterialTheme e fornisca override per gli attributi del tema. Puoi anche personalizzare i campi dei dettagli dei luoghi inclusi specificando un elenco di voci di contenuti, ognuna delle quali corrisponde a un'informazione mostrata sul luogo.

Varianti di layout

Il componente Place Details supporta due varianti di layout principali:

  • Compatto:un layout per visualizzare in anteprima le informazioni chiave.
  • Completo:un layout completo che mostra tutti i dettagli disponibili del luogo.

Il layout compatto può essere visualizzato in orientamento verticale o orizzontale. In questo modo puoi integrare il componente in vari layout di design e dimensioni dello schermo. Il layout completo può essere visualizzato solo verticalmente.

layout orizzontali e verticali
Layout orizzontali e verticali

Il componente Dettagli del luogo ti offre un controllo granulare sui contenuti visualizzati nel componente. Ogni elemento (come foto, recensioni e dati di contatto) può essere mostrato o nascosto singolarmente, consentendo una personalizzazione precisa dell'aspetto dei componenti e della densità delle informazioni.

Opzioni contenuti dei dettagli del luogo
Opzioni di visualizzazione dei contenuti

Visualizzazione compatta dei dettagli del luogo

Il frammento compatto Place Details (PlaceDetailsCompactFragment) esegue il rendering dei dettagli di un luogo selezionato utilizzando uno spazio minimo. Questo può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza sui social media come la condivisione di una posizione in una chat, come suggerimento per selezionare la tua posizione attuale o all'interno di un articolo multimediale per fare riferimento al luogo su Google Maps.

Visualizzazione completa dei dettagli del luogo

La visualizzazione completa dei dettagli del luogo (PlaceDetailsFragment) offre una superficie più ampia per visualizzare le informazioni dettagliate sul luogo e consente di mostrare più tipi di informazioni.

Opzioni di visualizzazione dei contenuti

Puoi specificare i contenuti da visualizzare utilizzando le enumerazioni in PlaceDetailsCompactFragment.Content o PlaceDetailsFragment.Content.

Visualizzazione compatta Visualizzazione completa
  • Foto del luogo
  • Indirizzo del luogo
  • Valutazione e conteggio valutazioni
  • Tipo di luogo
  • Prezzo
  • Informazioni sull'ingresso accessibile
  • Stato Aperto adesso
  • Collage di foto del luogo
  • Indirizzo del luogo
  • Valutazione e conteggio valutazioni
  • Tipo di luogo
  • Prezzo
  • Informazioni sull'accessibilità
  • Stato Aperto adesso
  • Orario di apertura
  • Riassunto editoriale
  • Sito web
  • Numero di telefono
  • Recensioni visualizzate in una scheda dedicata
  • Plus Code
  • Elenco delle funzionalità, visualizzato in una scheda dedicata
  • Elementi in evidenza specifici per tipo, ad esempio i prezzi del carburante per le stazioni di servizio

Fatturazione

Quando utilizzi Place Details UI Kit, ti viene addebitato un costo ogni volta che viene chiamato il metodo .loadWithPlaceId(), .loadWithResourceName() o loadWithCoordinates(). Se carichi lo stesso luogo più volte, ti viene addebitato un importo per ogni richiesta.

Per evitare addebiti multipli, non aggiungere direttamente .loadWithPlaceId() o .loadWithResourceName() nei metodi del ciclo di vita di Android. Ad esempio, non chiamare direttamente .loadWithPlaceId() o .loadWithResourceName() nel metodo onResume().

Aggiungere i dettagli dei luoghi all'app

Puoi aggiungere i dettagli del luogo alla tua app aggiungendo un frammento a un layout. Quando crei un'istanza del fragment, puoi personalizzare l'aspetto delle informazioni sui dettagli del luogo in base alle tue esigenze e all'aspetto della tua app. Scopri di più sulla personalizzazione.

Sono disponibili tre metodi sia in Kotlin che in Java: uno per caricare il fragment con un ID luogo (loadWithPlaceId()), uno per caricare il fragment con un nome risorsa (loadWithResourceName()) e uno per caricare il fragment con le coordinate di latitudine/longitudine (loadWithCoordinates()). Puoi scegliere uno o più metodi.

La posizione predefinita per la visualizzazione compatta è verticale. Se vuoi un layout orizzontale, specifica Orientation.HORIZONTAL. Se vuoi, puoi anche specificare Orientation.VERTICAL per maggiore chiarezza. La visualizzazione completa può essere visualizzata solo in verticale.

Vedi gli esempi nella sezione Esempi di componenti Dettagli luogo.

Personalizzare l'aspetto visivo

Personalizzazione visiva dei dettagli del luogo
Esempi di personalizzazione visiva

Il kit UI Places offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta il riferimento di Material Design per Colori e Tipografia. Per impostazione predefinita, lo stile rispetta il linguaggio di progettazione visiva di Google Maps.

Opzioni di personalizzazione dei dettagli del luogo

Quando istanzi un frammento, puoi specificare un tema che esegue l'override di uno qualsiasi degli attributi di stile predefiniti. Gli attributi del tema non sostituiti utilizzano gli stili predefiniti. Se vuoi supportare un tema scuro, puoi aggiungere una voce per il colore in values-night/colors.xml.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <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>

Puoi personalizzare i seguenti stili:

Personalizzazione del colore e della tipografia delle finestre di dialogo
Personalizzazione del colore e della tipografia della finestra di dialogo
Attributo tema Utilizzo
Colore
placesColorSurface Sfondo del contenitore e della finestra di dialogo
placesColorOutlineDecorative Bordo del contenitore
placesColorPrimary Link, indicatore di caricamento, icone di panoramica
placesColorOnSurface Intestazioni, contenuti della finestra di dialogo
placesColorOnSurfaceVariant Informazioni sul luogo
placesColorSecondaryContainer Sfondo pulsante
placesColorOnSecondaryContainer Testo e icona del pulsante
placesColorNeutralContainer Esamina il badge della data e le forme segnaposto di caricamento
placesColorOnNeutralContainer Data della revisione, errore di caricamento
placesColorPositiveContainer Badge Stazione di ricarica EV disponibile
placesColorOnPositiveContainer Contenuti del badge per caricabatterie EV disponibili
placesColorPositive Posiziona l'etichetta "Aperto ora"
placesColorNegative Etichetta "Chiuso" ora
placesColorInfo Icona Ingresso accessibile
placesColorButtonBorder Pulsanti Apri in Maps e OK
   
Tipografia
placesTextAppearanceBodySmall Informazioni sul luogo
placesTextAppearanceBodyMedium Informazioni sul luogo, contenuti della finestra di dialogo
placesTextAppearanceLabelMedium Contenuti del badge
placesTextAppearanceLabelLarge Contenuto del pulsante
placesTextAppearanceHeadlineMedium Intestazioni delle finestre di dialogo
placesTextAppearanceDisplaySmall Nome del luogo
placesTextAppearanceTitleSmall Nome del luogo
   
Spaziatura
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
   
Misurazione
placesBorderWidth Container
placesBorderWidthButton
   
Forma
placesCornerRadius Container
placesCornerRadiusButton Pulsanti Apri in Maps e OK (escluso il pulsante icona rotondo)
placesCornerRadiusThumbnail Immagine in miniatura del luogo
placesCornerRadiusCollageOuter Collage multimediale
placesCornerRadiusCard Scheda luogo, scheda recensione utente
placesCornerRadiusDialog Finestra di dialogo di divulgazione di Google Maps
   
Attribuzione del brand Google Maps
placesColorAttributionLightTheme Pulsante di attribuzione e informativa di Google Maps con tema chiaro (enumerazioni per bianco, grigio e nero)
placesColorAttributionDarkTheme Pulsante di attribuzione e informativa del tema scuro di Google Maps (enumerazioni per bianco, grigio e nero)

Vedi gli esempi nella sezione Esempi di componenti Dettagli luogo.

Personalizzazione di larghezza e altezza

Visualizzazioni compatte

Larghezze consigliate:

  • Orientamento verticale: tra 180 dp e 300 dp.
  • Orientamento orizzontale: tra 180 dp e 500 dp.

Le larghezze inferiori a 160 dp potrebbero non essere visualizzate correttamente.

La best practice prevede di non impostare un'altezza per le visualizzazioni compatte. In questo modo, l'altezza della finestra verrà impostata in base ai contenuti, consentendo la visualizzazione di tutte le informazioni.

Visualizzazioni complete

Per le visualizzazioni complete, la larghezza consigliata è compresa tra 250 dp e 450 dp. Una larghezza inferiore a 250 dp potrebbe non essere visualizzata correttamente.

Puoi impostare l'altezza del componente: la visualizzazione verticale Dettagli del luogo scorrerà verticalmente nello spazio assegnato.

La best practice prevede di impostare un'altezza per le visualizzazioni complete. In questo modo, i contenuti nella finestra scorreranno correttamente.

Colori di attribuzione

attribuzione
Attribuzione

I Termini di servizio di Google Maps richiedono di utilizzare uno dei tre colori del brand per l'attribuzione di Google Maps. Questa attribuzione deve essere visibile e accessibile quando sono state apportate modifiche alla personalizzazione.

Offriamo tre colori del brand tra cui scegliere, che possono essere impostati in modo indipendente per i temi chiaro e scuro:

  • Tema chiaro: placesColorAttributionLight con valori enum per bianco, grigio e nero.
  • Tema scuro: placesColorAttributionDark con valori enum per bianco, grigio e nero.

Esempi di componenti Place Details

Creare una visualizzazione compatta o completa

Kotlin

              
        // We create a new instance of the fragment using its factory method.
        // We can specify which content to show, the orientation, and a custom theme.
        val fragment = PlaceDetailsCompactFragment.newInstance(
            PlaceDetailsCompactFragment.ALL_CONTENT, // Show all available content.
            orientation,
            R.style.CustomizedPlaceDetailsTheme,
        ).apply {
            // The PlaceLoadListener provides callbacks for when the place data is successfully
            // loaded or when an error occurs. This is where we update our UI state.
            setPlaceLoadListener(object : PlaceLoadListener {
                override fun onSuccess(place: Place) {
                    Log.d(TAG, &quot;Place loaded: ${place.id}&quot;)
                    // Once the data is loaded, we hide the loading indicator and show the fragment.
                    binding.loadingIndicatorMain.visibility = View.GONE
                    binding.placeDetailsContainer.visibility = View.VISIBLE
                    binding.dismissButton.visibility = View.VISIBLE
                }

                override fun onFailure(e: Exception) {
                    Log.e(TAG, &quot;Place failed to load&quot;, e)
                    // On failure, we hide the UI and notify the user.
                    dismissPlaceDetails()
                    Toast.makeText(this@MainActivity, &quot;Failed to load place details.&quot;, Toast.LENGTH_SHORT).show()
                }
            })
        }

        // We add the fragment to our layout&#39;s container view.
        // `commitNow()` is used to ensure the fragment is immediately added and available,
        // which is important because we need to call a method on it right after.
        supportFragmentManager
            .beginTransaction()
            .replace(binding.placeDetailsContainer.id, fragment)
            .commitNow()

        // **This is the key step**: After adding the fragment, we call `loadWithPlaceId`
        // to trigger the data loading process for the selected place.
        // We use `post` to ensure this runs after the layout has been measured,
        // which can prevent potential timing issues.
        binding.root.post {
            fragment.loadWithPlaceId(placeId)
        }
    }

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

Questo esempio di codice completo determina l'orientamento della visualizzazione compatta in modo programmatico in base alla configurazione del dispositivo dell'utente.

Kotlin

        
package com.example.placedetailsuikit

import android.Manifest
import android.annotation.SuppressLint
import android.content.pm.PackageManager
import android.content.res.Configuration
import android.location.Location
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Toast
import androidx.activity.enableEdgeToEdge
import androidx.activity.result.ActivityResultLauncher
import androidx.activity.result.contract.ActivityResultContracts
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import androidx.lifecycle.ViewModel
import com.example.placedetailsuikit.databinding.ActivityMainBinding
import com.google.android.gms.location.FusedLocationProviderClient
import com.google.android.gms.location.LocationServices
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.model.Place
import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
import com.google.android.libraries.places.widget.PlaceLoadListener
import com.google.android.libraries.places.widget.model.Orientation

private const val TAG = &quot;PlacesUiKit&quot;

/**
 * A simple ViewModel to store UI state that needs to survive configuration changes.
 * In this case, it holds the ID of the selected place. Using a ViewModel is good practice
 * as it prevents data loss during events like screen rotation, ensuring a
 * seamless user experience.
 */
class MainViewModel : ViewModel() {
    var selectedPlaceId: String? = null
}

/**
 * This activity serves as a basic example of integrating the Place Details UI Kit.
 * It demonstrates the fundamental steps required:
 * 1. Setting up a Google Map.
 * 2. Requesting location permissions to center the map.
 * 3. Handling clicks on Points of Interest (POIs) to get a Place ID.
 * 4. Using the Place ID to load and display place details in a [PlaceDetailsCompactFragment].
 */
class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
    // ViewBinding provides type-safe access to views defined in the XML layout,
    // eliminating the need for `findViewById` and preventing null pointer exceptions.
    private lateinit var binding: ActivityMainBinding
    private var googleMap: GoogleMap? = null

    // The FusedLocationProviderClient is the main entry point for interacting with the
    // fused location provider, which intelligently manages the underlying location technologies.
    private lateinit var fusedLocationClient: FusedLocationProviderClient

    // Using registerForActivityResult is the modern, recommended approach for handling
    // permission requests. It decouples the request from the handling logic, making the
    // code cleaner and easier to manage compared to the older `onRequestPermissionsResult` callback.
    private lateinit var requestPermissionLauncher: ActivityResultLauncher&lt;Array&lt;String&gt;&gt;

    // The `by viewModels()` delegate provides a lazy-initialized ViewModel scoped to this Activity.
    // This ensures that we get the same ViewModel instance across configuration changes.
    private val viewModel: MainViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // The ActivityResultLauncher is initialized here. The lambda defines the callback
        // that will be executed once the user responds to the permission dialog.
        requestPermissionLauncher =
            registerForActivityResult(ActivityResultContracts.RequestMultiplePermissions()) { permissions -&gt;
                // We check if either fine or coarse location permission was granted.
                if (permissions[Manifest.permission.ACCESS_FINE_LOCATION] == true || permissions[Manifest.permission.ACCESS_COARSE_LOCATION] == true) {
                    Log.d(TAG, &quot;Location permission granted by user.&quot;)
                    fetchLastLocation()
                } else {
                    // If permission is denied, we inform the user and default to a known location.
                    // This ensures the app remains functional even without location access.
                    Log.d(TAG, &quot;Location permission denied by user.&quot;)
                    Toast.makeText(
                        this,
                        &quot;Location permission denied. Showing default location.&quot;,
                        Toast.LENGTH_LONG
                    ).show()
                    moveToSydney()
                }
            }

        // enableEdgeToEdge() allows the app to draw behind the system bars for a more immersive experience.
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.dismissButton.setOnClickListener {
            dismissPlaceDetails()
        }

        // --- Crucial: Initialize Places SDK ---
        // It&#39;s essential to initialize the Places SDK before making any other Places API calls.
        // This should ideally be done once, for example, in the Application&#39;s `onCreate`.
        val apiKey = BuildConfig.PLACES_API_KEY
        if (apiKey.isEmpty() || apiKey == &quot;YOUR_API_KEY&quot;) {
            // A valid API key is required for the Places SDK to function.
            Log.e(TAG, &quot;No api key&quot;)
            Toast.makeText(
                this,
                &quot;Add your own API_KEY in local.properties&quot;,
                Toast.LENGTH_LONG
            ).show()
            finish()
            return
        }

        // `initializeWithNewPlacesApiEnabled` is used to opt-in to the new SDK version.
        Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)

        fusedLocationClient = LocationServices.getFusedLocationProviderClient(this)
        // ------------------------------------

        // The SupportMapFragment is the container for the map. `getMapAsync` allows us to
        // work with the GoogleMap object via a callback once it&#39;s fully initialized.
        val mapFragment =
            supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
        mapFragment?.getMapAsync(this)

        // This block handles restoration after a configuration change (e.g., screen rotation).
        // If a place was selected before the rotation, its ID is stored in the ViewModel.
        // We use this ID to immediately show the details fragment again.
        if (viewModel.selectedPlaceId != null) {
            viewModel.selectedPlaceId?.let { placeId -&gt;
                Log.d(TAG, &quot;Restoring PlaceDetailsFragment for place ID: $placeId&quot;)
                showPlaceDetailsFragment(placeId)
            }
        }
    }

    /**
     * This callback is triggered when the GoogleMap object is ready to be used.
     * All map setup logic should be placed here.
     */
    override fun onMapReady(map: GoogleMap) {
        Log.d(TAG, &quot;Map is ready&quot;)
        googleMap = map
        // Setting the OnPoiClickListener allows us to capture user taps on points of interest.
        googleMap?.setOnPoiClickListener(this)

        // After the map is ready, we determine the initial camera position based on location permissions.
        if (isLocationPermissionGranted()) {
            fetchLastLocation()
        } else {
            requestLocationPermissions()
        }
    }

    /**
     * A helper function to centralize the check for location permissions.
     */
    private fun isLocationPermissionGranted(): Boolean {
        return ActivityCompat.checkSelfPermission(
            this,
            Manifest.permission.ACCESS_FINE_LOCATION
        ) == PackageManager.PERMISSION_GRANTED ||
                ActivityCompat.checkSelfPermission(
                    this,
                    Manifest.permission.ACCESS_COARSE_LOCATION
                ) == PackageManager.PERMISSION_GRANTED
    }

    /**
     * This function triggers the permission request flow. The result is handled by the
     * ActivityResultLauncher defined in `onCreate`.
     */
    private fun requestLocationPermissions() {
        Log.d(TAG, &quot;Requesting location permissions.&quot;)
        requestPermissionLauncher.launch(
            arrayOf(
                Manifest.permission.ACCESS_FINE_LOCATION,
                Manifest.permission.ACCESS_COARSE_LOCATION
            )
        )
    }

    /**
     * Fetches the device&#39;s last known location. This is a fast and battery-efficient way
     * to get a location fix. It should only be called after verifying permissions.
     */
    @SuppressLint(&quot;MissingPermission&quot;)
    private fun fetchLastLocation() {
        // Double-checking permissions here is a good practice, although the call sites are already guarded.
        if (isLocationPermissionGranted()) {
            fusedLocationClient.lastLocation
                .addOnSuccessListener { location: Location? -&gt;
                    if (location != null) {
                        val userLocation = LatLng(location.latitude, location.longitude)
                        googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(userLocation, 13f))
                        Log.d(TAG, &quot;Moved to user&#39;s last known location.&quot;)
                    } else {
                        // `lastLocation` can be null if the location has never been recorded.
                        // In this case, we fall back to a default location.
                        Log.d(TAG, &quot;Last known location is null. Falling back to Sydney.&quot;)
                        moveToSydney()
                    }
                }
                .addOnFailureListener {
                    // This listener handles errors in the location fetching process.
                    Log.e(TAG, &quot;Failed to get location.&quot;, it)
                    moveToSydney()
                }
        }
    }

    /**
     * Moves the map camera to a default, hardcoded location (Sydney).
     * This serves as a reliable fallback.
     */
    private fun moveToSydney() {
        val sydney = LatLng(-33.8688, 151.2093)
        googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 13f))
        Log.d(TAG, &quot;Moved to Sydney&quot;)
    }

    /**
     * This is the callback for the `OnPoiClickListener`. It&#39;s triggered when a user
     * taps a POI on the map.
     */
    override fun onPoiClick(poi: PointOfInterest) {
        val placeId = poi.placeId
        Log.d(TAG, &quot;Place ID: $placeId&quot;)

        // We save the selected place ID to the ViewModel. This is critical for surviving
        // configuration changes. If the user rotates the screen now, the `onCreate`
        // method will be able to restore the place details view.
        viewModel.selectedPlaceId = placeId
        showPlaceDetailsFragment(placeId)
    }

    /**
     * This function is the core of the integration. It creates, configures, and displays
     * the [PlaceDetailsCompactFragment].
     * @param placeId The unique identifier for the place to be displayed.
     */
    private fun showPlaceDetailsFragment(placeId: String) {
        Log.d(TAG, &quot;Showing PlaceDetailsFragment for place ID: $placeId&quot;)

        // We manage the visibility of UI elements to provide feedback to the user.
        // The wrapper is shown, and a loading indicator is displayed while the data is fetched.
        binding.placeDetailsWrapper.visibility = View.VISIBLE
        binding.dismissButton.visibility = View.GONE
        binding.placeDetailsContainer.visibility = View.GONE
        binding.loadingIndicatorMain.visibility = View.VISIBLE

        // The Place Details widget can be displayed vertically or horizontally.
        // We dynamically choose the orientation based on the device&#39;s current configuration.
        val orientation =
            if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
                Orientation.HORIZONTAL
            } else {
                Orientation.VERTICAL
            }

        
        // We create a new instance of the fragment using its factory method.
        // We can specify which content to show, the orientation, and a custom theme.
        val fragment = PlaceDetailsCompactFragment.newInstance(
            PlaceDetailsCompactFragment.ALL_CONTENT, // Show all available content.
            orientation,
            R.style.CustomizedPlaceDetailsTheme,
        ).apply {
            // The PlaceLoadListener provides callbacks for when the place data is successfully
            // loaded or when an error occurs. This is where we update our UI state.
            setPlaceLoadListener(object : PlaceLoadListener {
                override fun onSuccess(place: Place) {
                    Log.d(TAG, &quot;Place loaded: ${place.id}&quot;)
                    // Once the data is loaded, we hide the loading indicator and show the fragment.
                    binding.loadingIndicatorMain.visibility = View.GONE
                    binding.placeDetailsContainer.visibility = View.VISIBLE
                    binding.dismissButton.visibility = View.VISIBLE
                }

                override fun onFailure(e: Exception) {
                    Log.e(TAG, &quot;Place failed to load&quot;, e)
                    // On failure, we hide the UI and notify the user.
                    dismissPlaceDetails()
                    Toast.makeText(this@MainActivity, &quot;Failed to load place details.&quot;, Toast.LENGTH_SHORT).show()
                }
            })
        }

        // We add the fragment to our layout&#39;s container view.
        // `commitNow()` is used to ensure the fragment is immediately added and available,
        // which is important because we need to call a method on it right after.
        supportFragmentManager
            .beginTransaction()
            .replace(binding.placeDetailsContainer.id, fragment)
            .commitNow()

        // **This is the key step**: After adding the fragment, we call `loadWithPlaceId`
        // to trigger the data loading process for the selected place.
        // We use `post` to ensure this runs after the layout has been measured,
        // which can prevent potential timing issues.
        binding.root.post {
            fragment.loadWithPlaceId(placeId)
        }
    }


    /**
     * Hides the place details view and clears the selected place ID from the ViewModel.
     */
    private fun dismissPlaceDetails() {
        binding.placeDetailsWrapper.visibility = View.GONE
        // Clearing the ID in the ViewModel is important so that if the user rotates the
        // screen after dismissing, the details view doesn&#39;t reappear.
        viewModel.selectedPlaceId = null
    }

    override fun onDestroy() {
        super.onDestroy()
        // It&#39;s a good practice to nullify references to objects that have a lifecycle
        // tied to the activity, like the GoogleMap object, to prevent potential memory leaks.
        googleMap = null
    }
}
        
  
Suggerimento:accedi agli esempi di codice completi su GitHub.

Creare un tema

Quando istanzi un frammento, puoi specificare un tema che esegue l'override di uno qualsiasi degli attributi di stile predefiniti. Gli attributi del tema non sostituiti utilizzano gli stili predefiniti. Se vuoi supportare un tema scuro, puoi aggiungere una voce per il colore in values-night/colors.xml.

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <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>

Utilizzare contenuti standard

Questo esempio utilizza i contenuti standard.

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

Personalizzare contenuti specifici

Questo campione seleziona solo le opzioni indirizzo, ingresso accessibile e media Content per una visualizzazione compatta e le visualizza con CustomizedPlaceDetailsTheme.

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

Utilizzare tutti i contenuti

Questo esempio utilizza tutte le opzioni Content di una visualizzazione compatta.

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