Kit de interface do Places Details (experimental)

Este produto ou recurso é experimental (pré-GA). Os produtos e recursos pré-GA têm suporte limitado, e é possível que as mudanças neles não sejam compatíveis com versões anteriores. As Soluções pré-GA são cobertas pelos Termos de Serviço da Plataforma Google Maps. Para mais detalhes, consulte as descrições da fase de lançamento.

Com o kit de interface para detalhes do lugar, você pode adicionar um componente de interface individual que mostra detalhes do lugar no seu app. O kit de interface pode ser usado de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps. O kit de interface usa um ID de lugar ou coordenadas de latitude/longitude e retorna informações renderizadas de Detalhes do lugar.

O kit de interface oferece uma visualização compacta, que pode ser exibida horizontal ou verticalmente. É possível personalizar a aparência dos detalhes do lugar substituindo qualquer um dos atributos do tema padrão. Também é possível personalizar quais campos de detalhes do lugar são incluídos especificando uma lista de entradas Content, cada uma correspondendo a uma informação mostrada sobre o lugar.

Faturamento

Ao usar o kit de interface do Place Details, você vai receber cobranças sempre que o método .loadPlaceDetails() for chamado. Se você carregar o mesmo lugar várias vezes, haverá cobrança por cada solicitação. Para evitar cobranças repetidas, não adicione .loadPlaceDetails() diretamente nos métodos de ciclo de vida do Android. Por exemplo, não chame .loadPlaceDetails() diretamente no método onResume().

Ativar o kit de interface do Places

Antes de usar o kit de interface do Places, você precisa:

• Crie um projeto do Cloud com uma conta de faturamento.
• Ative a API Places UI Kit no seu projeto.
• Gere uma chave de API.

Exemplos de kit de interface do Place Details

Para adicionar detalhes de lugar ao app, adicione um fragmento a um layout. Ao instanciar o fragmento, você pode personalizar a aparência das informações dos detalhes do lugar de acordo com suas necessidades e com a aparência do app.

É possível especificar a orientação (horizontal ou vertical), as substituições de tema e o conteúdo. As opções de conteúdo são mídia, endereço, classificação, preço, tipo, entrada acessível, link do Maps e link de direções. Confira um exemplo de personalização.

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

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

Exemplo de personalização

Ao instanciar um fragmento, é possível especificar um tema que substitui qualquer um dos atributos de estilo padrão. Todos os atributos de tema que não forem substituídos usam os estilos padrão. Se você quiser oferecer suporte a um tema escuro, adicione uma entrada para a cor em 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>

Você pode personalizar os seguintes estilos:

• placesColorSurfaceContainerLowest
• placesColorOutlineDecorative
• placesColorPrimary
• placesColorOnSurface
• placesColorOnSurfaceVariant
• placesColorSecondaryContainer
• placesColorOnSecondaryContainer
• placesCornerRadius
• placesTextAppearanceBodySmall
• placesTextAppearanceBodyMedium
• placesTextAppearanceBodyLarge
• placesTextAppearanceLabelLarge
• placesTextAppearanceHeadlineMedium
• placesColorAttributionLight (enums para branco, cinza e preto)
• placesColorAttributionDark (enums para branco, cinza e preto)

Este exemplo personaliza o conteúdo padrão.

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

Este exemplo personaliza todo o conteúdo.

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