„Place Details“-Komponente

Mit der Komponente „Place Details“ des Places UI Kits können Sie eine einzelne UI-Komponente hinzufügen, die Ortsdetails in Ihrer App anzeigt.

Die PlaceDetailsCompactFragment rendert Details für einen ausgewählten Ort mit minimalem Platzbedarf. Das kann in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in sozialen Medien, wenn Sie beispielsweise einen Ort in einem Chat teilen, als Vorschlag für die Auswahl Ihres aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen. In der PlaceDetailsCompactFragment können Name, Adresse, Bewertung, Typ, Preis, Symbol für Barrierefreiheit, Öffnungsstatus und ein einzelnes Foto angezeigt werden.

Die Komponente „Ortsdetails“ kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Die Komponente nimmt entweder eine Orts-ID oder Breiten- und Längengradkoordinaten entgegen und gibt gerenderte Place Details-Informationen zurück.

Abrechnung

Wenn Sie das UI Kit für Ortsdetails verwenden, werden Ihnen alle Aufrufe der Methode .loadWithPlaceId() oder .loadWithResourceName() in Rechnung gestellt. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Damit Sie nicht mehrmals in Rechnung gestellt werden, sollten Sie .loadWithPlaceId() oder .loadWithResourceName() nicht direkt in Android-Lebenszyklusmethoden einfügen. Rufen Sie beispielsweise .loadWithPlaceId() oder .loadWithResourceName() nicht direkt in der Methode onResume() auf.

Ihrer App Ortsdetails hinzufügen

Sie können Ihrer App Details zu Orten hinzufügen, indem Sie einem Layout ein Fragment hinzufügen. Wenn Sie das Fragment instanziieren, können Sie das Erscheinungsbild der Informationen zu „Place Details“ an Ihre Anforderungen und das Erscheinungsbild Ihrer App anpassen.

Sowohl in Kotlin als auch in Java stehen zwei Methoden zur Verfügung: eine zum Laden des Fragments mit einer Orts-ID (loadWithPlaceId()) und eine zum Laden des Fragments mit einem Ressourcennamen (loadWithResourceName()). Sie können eine oder beide Methoden auswählen, wenn Sie sowohl Orts-IDs als auch Ressourcennamen verwenden.

Sie können die Ausrichtung (horizontal oder vertikal), Themaüberschreibungen und Inhalte angeben. Die Inhaltsoptionen sind „Medien“, „Adresse“, „Bewertung“, „Preis“, „Art“, „Barrierefreier Eingang“ und „Aktuell geöffnet“. Weitere Informationen zur Anpassung von Berichten

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

Vollständiger Code zum Laden des Widgets „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(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }               
        
        

Ortsdetails anpassen

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der grob auf Material Design basiert (mit einigen Google Maps-spezifischen Modifikationen). Weitere Informationen finden Sie in der Material Design-Referenz zu Farbe und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Wichtig : Bei visuellen Änderungen müssen Sie die Angabenanforderungen für Google Maps einhalten.

Wenn Sie ein Fragment instanziieren, können Sie ein Design angeben, das alle Standardstilattribute überschreibt. Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet. Wenn Sie einen dunklen Modus unterstützen möchten, können Sie in values-night/colors.xml einen Eintrag für die Farbe hinzufügen.

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

Sie können die folgenden Stile anpassen:

Designattribut	Nutzung
Farbe
placesColorSurface	Container- und Dialogfeldhintergrund
placesColorOnSurface	Überschriften, Dialoginhalt
placesColorOnSurfaceVariant	Informationen zum Ort
placesColorPrimary	Links
placesColorOutlineDecorative	Containerrand
placesColorSecondaryContainer	Schaltflächenhintergrund
placesColorOnSecondaryContainer	Schaltflächentext und -symbol
placesColorPositive	Label „Jetzt geöffnet“ platzieren
placesColorNegative	Label „Geschlossen“ jetzt angeben
placesColorInfo	Symbol für barrierefreien Zugang
Typografie
placesTextAppearanceHeadlineMedium	Dialogüberschriften
placesTextAppearanceTitleSmall	Name
placesTextAppearanceBodyMedium	Dialoginhalt
placesTextAppearanceBodySmall	Informationen zum Ort
placesTextAppearanceLabelLarge	Schaltflächenlabel
Ecken
placesCornerRadius	Containerecken
Markenbenennung in Google Maps
placesColorAttributionLight	Schaltfläche für die Google Maps-Attribution und -Offenlegung im hellen Design (Enum-Werte für Weiß, Grau und Schwarz)
placesColorAttributionDark	Schaltfläche für die Google Maps-Attribution und -Offenlegung im dunklen Design (Enum-Werte für Weiß, Grau und Schwarz)

Breite und Höhe

Für vertikale Ansichten wird eine Breite von 180 dp bis 300 dp empfohlen. Für horizontale Ansichten wird eine Breite von 180 dp bis 500 dp empfohlen. Bei einer Darstellung mit weniger als 160 dp werden möglicherweise nicht alle Inhalte angezeigt.

Es empfiehlt sich, keine Höhe festzulegen. So wird die Höhe anhand des Inhalts im Fenster festgelegt, sodass alle Informationen angezeigt werden können.

Hinweis:Das Thumbnail des Orts wird bei Aufrufen mit einer Breite von weniger als 350 Pixeln nicht angezeigt.

Attributionsfarben

Gemäß den Google Maps-Nutzungsbedingungen müssen Sie für die Google Maps-Attribution eine der drei Markenfarben verwenden. Diese Attribution muss sichtbar und zugänglich sein, wenn Anpassungsänderungen vorgenommen wurden.

Sie haben die Wahl zwischen drei Markenfarben, die unabhängig für helle und dunkle Themen festgelegt werden können:

• Helles Design: placesColorAttributionLight mit Enumerationen für Weiß, Grau und Schwarz.
• Dunkles Design: placesColorAttributionDark mit Enumerationen für Weiß, Grau und Schwarz.

Beispiele für Anpassungen

Hinweis:Wenn Sie keine visuelle Anpassung angeben, bleibt der Standardwert erhalten.

In diesem Beispiel werden die Standardinhalte angepasst.

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

In diesem Beispiel werden Inhaltsoptionen angepasst.

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

In diesem Beispiel werden alle Content-Optionen angepasst.

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