Componente Places Details

Il componente Dettagli dei luoghi di Places UI Kit ti consente di aggiungere un singolo componente dell'interfaccia utente che mostra i dettagli dei luoghi nella tua app.

Il PlaceDetailsCompactFragment mostra i dettagli di un luogo selezionato utilizzando uno spazio minimo. Questa funzionalità 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. PlaceDetailsCompactFragment può mostrare nome, indirizzo, valutazione, tipo, prezzo, icona di accessibilità, stato di apertura e una singola foto.

Il componente Dettagli dei luoghi può essere utilizzato in modo indipendente o in combinazione con altre API e altri servizi di Google Maps Platform. Il componente accetta un ID luogo o le coordinate di latitudine/longitudine e restituisce le informazioni di Dettagli luogo visualizzate.

Fatturazione

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

Per evitare di essere addebitato più volte, non aggiungere direttamente .loadWithPlaceId() o .loadWithResourceName() ai 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 dettagli dei luoghi alla tua app aggiungendo un frammento a un layout. Quando esegui l'inizializzazione del frammento, puoi personalizzare l'aspetto delle informazioni sui dettagli del luogo in base alle tue esigenze e all'aspetto della tua app.

In Kotlin e Java sono disponibili due metodi: uno per caricare il frammento con un ID luogo (loadWithPlaceId()) e uno per caricare il frammento con un nome risorsa (loadWithResourceName()). Puoi scegliere uno dei due metodi o entrambi se utilizzi sia gli ID luogo che i nomi delle risorse.

Puoi specificare l'orientamento (orizzontale o verticale), le sostituzioni del tema e i contenuti. Le opzioni di contenuti sono media, indirizzo, valutazione, prezzo, tipo, ingresso accessibile e stato Aperto ora. Scopri di più sulla personalizzazione.

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

Visualizza il codice completo per caricare il widget Dettagli dei luoghi

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

Personalizzare i dettagli del luogo

Places UI Kit offre un approccio di sistema di progettazione alla personalizzazione visiva basato approssimativamente su Material Design (con alcune modifiche specifiche di Google Maps). Consulta la documentazione di riferimento di Material Design per Colore e Tipografia. Per impostazione predefinita, lo stile è conforme al linguaggio di design visivo di Google Maps.

Importante: quando apporti modifiche visive, devi rispettare i requisiti di attribuzione di Google Maps.

Quando esegui l'inizializzazione di un frammento, puoi specificare un tema che sostituisce qualsiasi attributo dello stile predefinito. Gli attributi 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="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>

Puoi personalizzare i seguenti stili:

Attributo tema	Utilizzo
Colore
placesColorSurface	Sfondo del contenitore e della finestra di dialogo
placesColorOnSurface	Intestazioni, contenuti della finestra di dialogo
placesColorOnSurfaceVariant	Informazioni sul luogo
placesColorPrimary	Link
placesColorOutlineDecorative	Bordo del contenitore
placesColorSecondaryContainer	Sfondo pulsante
placesColorOnSecondaryContainer	Testo e icona del pulsante
placesColorPositive	Posizionare l'etichetta "Aperto ora"
placesColorNegative	Ora è possibile etichettare i luoghi come "Chiuso"
placesColorInfo	Icona Ingresso accessibile
Caratteri
placesTextAppearanceHeadlineMedium	Intestazioni della finestra di dialogo
placesTextAppearanceTitleSmall	Nome del luogo
placesTextAppearanceBodyMedium	Contenuti della finestra di dialogo
placesTextAppearanceBodySmall	Informazioni sul luogo
placesTextAppearanceLabelLarge	Etichetta pulsante
Angoli
placesCornerRadius	Angoli del contenitore
Attribuzione del brand di Google Maps
placesColorAttributionLight	Pulsante di attribuzione e informativa di Google Maps con tema chiaro (enum per bianco, grigio e nero)
placesColorAttributionDark	Pulsante di attribuzione e informativa di Google Maps con tema scuro (enum per bianco, grigio e nero)

Larghezza e altezza

Per le visualizzazioni verticali, la larghezza consigliata è compresa tra 180 dp e 300 dp. Per le visualizzazioni orizzontali, la larghezza consigliata è compresa tra 180 dp e 500 dp. Le visualizzazioni di dimensioni inferiori a 160 dp potrebbero non essere visualizzate correttamente.

La best practice è non impostare un'altezza. In questo modo, i contenuti nella finestra imposteranno l'altezza, consentendo la visualizzazione di tutte le informazioni.

Nota: l'immagine della miniatura del luogo non viene visualizzata per le visualizzazioni di larghezza inferiore a 350 dp.

Colori di 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 di personalizzazione.

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

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

Esempi di personalizzazione

Nota: se non specifichi una personalizzazione visiva, verrà mantenuto il valore predefinito.

Questo esempio personalizza i contenuti standard.

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

Questo esempio personalizza le opzioni dei contenuti.

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

Questo esempio personalizza tutte le opzioni Content.

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