Composant Place Details

Le composant "Place Details" (Détails du lieu) du kit d'UI Places vous permet d'ajouter un composant d'UI individuel qui affiche les détails du lieu dans votre application.

La PlaceDetailsCompactFragment affiche les détails d'un lieu sélectionné en utilisant un espace minimal. Cela peut être utile dans une fenêtre d'informations mettant en avant un lieu sur une carte, dans une expérience sur les réseaux sociaux (par exemple, pour partager un lieu dans une discussion), comme suggestion pour sélectionner votre position actuelle ou dans un article multimédia pour faire référence au lieu dans Google Maps. PlaceDetailsCompactFragment peut afficher le nom, l'adresse, la note, le type, le prix, l'icône d'accessibilité, l'état d'ouverture et une seule photo.

Le composant "Détails du lieu" peut être utilisé indépendamment ou en conjonction avec d'autres API et services Google Maps Platform. Le composant accepte un ID de lieu ou des coordonnées de latitude/longitude, et renvoie des informations Place Details affichées.

Facturation

Lorsque vous utilisez l'UI Kit Place Details, vous êtes facturé à chaque appel de la méthode .loadWithPlaceId() ou .loadWithResourceName(). Si vous chargez le même lieu plusieurs fois, chaque requête vous est facturée.

Pour éviter d'être facturé plusieurs fois, n'ajoutez pas directement .loadWithPlaceId() ou .loadWithResourceName() dans les méthodes de cycle de vie Android. Par exemple, n'appelez pas directement .loadWithPlaceId() ou .loadWithResourceName() dans la méthode onResume().

Ajouter des informations sur un lieu à votre application

Vous pouvez ajouter des informations sur un lieu à votre application en ajoutant un fragment à une mise en page. Lorsque vous instanciez le fragment, vous pouvez personnaliser l'apparence des informations sur le lieu en fonction de vos besoins et de l'apparence de votre application.

Deux méthodes sont disponibles en Kotlin et en Java: l'une pour charger le fragment avec un ID de lieu (loadWithPlaceId()) et l'autre pour le charger avec un nom de ressource (loadWithResourceName()). Vous pouvez choisir l'une ou l'autre, ou les deux si vous utilisez à la fois des ID de lieu et des noms de ressources.

Vous pouvez spécifier l'orientation (horizontale ou verticale), les forçages de thème et le contenu. Les options de contenu sont les suivantes : contenu multimédia, adresse, note, prix, type, entrée accessible et état "Ouvert actuellement". En savoir plus sur la personnalisation

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)

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

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

Personnaliser les détails du lieu

Le kit d'UI Places propose une approche de système de conception pour la personnalisation visuelle, basée sur Material Design (avec quelques modifications spécifiques à Google Maps). Consultez la documentation de référence de Material Design sur la couleur et la typographie. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Lorsque vous instanciez un fragment, vous pouvez spécifier un thème qui remplace les attributs de style par défaut. Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut. Si vous souhaitez prendre en charge un thème sombre, vous pouvez ajouter une entrée pour la couleur dans 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>

Vous pouvez personnaliser les styles suivants:

Largeur et hauteur

Pour les vues verticales, la largeur recommandée est comprise entre 180 dp et 300 dp. Pour les vues horizontales, la largeur recommandée est comprise entre 180 dp et 500 dp. Il est possible que les vues de moins de 160 dp ne s'affichent pas correctement.

Il est recommandé de ne pas définir de hauteur. Le contenu de la fenêtre pourra ainsi définir la hauteur, ce qui permettra d'afficher toutes les informations.

Couleurs d'attribution

Les Conditions d'utilisation de Google Maps vous obligent à utiliser l'une des trois couleurs de la marque pour l'attribution Google Maps. Cette attribution doit être visible et accessible lorsque des modifications de personnalisation ont été apportées.

Nous proposons trois couleurs de marque au choix, qui peuvent être définies indépendamment pour les thèmes clair et sombre:

• Thème clair: placesColorAttributionLight avec énumérations pour le blanc, le gris et le noir.
• Thème sombre: placesColorAttributionDark avec énumérations pour le blanc, le gris et le noir.

Exemples de personnalisation

Cet exemple personnalise le contenu standard.

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

Cet exemple personnalise les options de contenu.

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

Cet exemple personnalise toutes les options Content.

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