Kit UI per i dettagli dei luoghi (sperimentale)

Questo prodotto o questa funzionalità è sperimentale (pre-release). I prodotti e le funzionalità pre-GA potrebbero avere supporto limitato e le modifiche ai prodotti e alle funzionalità pre-GA potrebbero non essere compatibili con altre versioni pre-GA. Le offerte pre-GA sono coperte dai Termini specifici di servizio di Google Maps Platform. Per ulteriori informazioni, consulta le descrizioni della fase di lancio.

L'UI Kit per i dettagli dei luoghi ti consente di aggiungere un singolo componente dell'interfaccia utente che mostra i dettagli dei luoghi nella tua app. L'UI Kit può essere utilizzato indipendentemente o in combinazione con altre API e altri servizi di Google Maps Platform. L'UI kit accetta un ID luogo o le coordinate di latitudine/longitudine e restituisce le informazioni di Dettagli luogo visualizzate.

L'UI kit offre una visualizzazione compatta, che può essere visualizzata orizzontalmente o verticalmente. Puoi personalizzare l'aspetto dei dettagli del luogo ignorando uno degli attributi del tema predefinito. Puoi anche personalizzare i campi dei dettagli dei luoghi inclusi specificando un elenco di voci Content, ciascuna delle quali corrisponde a un'informazione mostrata sul luogo.

Fatturazione

Quando utilizzi l'UI Kit di Place Details per Place Details, ti viene addebitato un importo ogni volta che viene chiamato il metodo .loadPlaceDetails(). Se carichi lo stesso luogo più volte, ti viene addebitato un importo per ogni richiesta. Per evitare di essere addebitati più volte, non aggiungere direttamente .loadPlaceDetails() nei metodi del ciclo di vita di Android. Ad esempio, non chiamare direttamente .loadPlaceDetails() nel metodo onResume().

Attivare il kit UI di Places

Prima di utilizzare l'UI Kit di Places, devi:

• Crea un progetto Cloud con un account di fatturazione.
• Abilita l'API Places UI Kit per il tuo progetto.
• Ottieni una chiave API.

Esempi di kit UI di Place Details

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.

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, link a Maps e link alle indicazioni stradali. Guarda un esempio di personalizzazione.

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

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(
                    orientation,
                    ALL_CONTENT
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadPlaceDetails(placeId)
            }
        }               
        
        

Esempio di personalizzazione

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="PlacesTheme">
    <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:

• placesColorSurfaceContainerLowest
• placesColorOutlineDecorative
• placesColorPrimary
• placesColorOnSurface
• placesColorOnSurfaceVariant
• placesColorSecondaryContainer
• placesColorOnSecondaryContainer
• placesCornerRadius
• placesTextAppearanceBodySmall
• placesTextAppearanceBodyMedium
• placesTextAppearanceBodyLarge
• placesTextAppearanceLabelLarge
• placesTextAppearanceHeadlineMedium
• placesColorAttributionLight (enum per bianco, grigio e nero)
• placesColorAttributionDark (enum per bianco, grigio e nero)

Questo esempio personalizza i contenuti standard.

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

Questo esempio personalizza tutti i contenuti.

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