Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Erweiterte „Place Details“-Komponente

Die Advanced-Version der Komponente „Place Details“ bietet dieselben Funktionen wie Places Details Essentials. Außerdem können Sie die Aktionsschaltflächen der Komponente konfigurieren und Such- und Filteroptionen auf die angezeigten Rezensionen und Medien anwenden.

Integrierte Jetpack Compose-Unterstützung

Das Places UI Kit bietet Jetpack Compose-@Composable-Funktionen für AdvancedPlaceDetailsCompact. Diese Composables verwenden gehosteten Status, integrierte Modifier-Unterstützung und Compose-native Slot-DSLs.

Das folgende Codebeispiel zeigt, wie die zusammensetzbare Funktion für ein vertikales Layout verwendet wird.

Kotlin

import android.util.Log
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp
import com.google.android.libraries.places.api.model.Place
import com.google.android.libraries.places.compose.AdvancedPlaceDetailsCompact
import com.google.android.libraries.places.compose.PlaceReference
import com.google.android.libraries.places.compose.action.CornerAction
import com.google.android.libraries.places.compose.action.MainAction
import com.google.android.libraries.places.compose.Orientation

@Composable
fun SampleAdvancedPlaceDetailsCompactCard(
    placeId: String,
    bookmarkIcon: Painter,
    onSavePlaceClicked: (Place) -> Unit
) {
    AdvancedPlaceDetailsCompact(
        // defines the place to be displayed
        reference = PlaceReference.PlaceId(placeId),
        // defines the orientation
        orientation = Orientation.VERTICAL,
        // defines custom styling
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        preferTruncation = true,
        enableLightbox = true,
        mainActions = { place ->
            listOf(
                MainAction.OpenDirections(),
                MainAction.OpenWebsite(),
                MainAction.Call()
            )
        },
        // action button configuration
        cornerActions = { place ->
            listOf(
                CornerAction.Custom(
                    icon = bookmarkIcon,
                    text = "Save Place",
                    onClick = { onSavePlaceClicked(place) }
                )
            )
        },
        onPlaceLoaded = { place ->
            Log.d("Places", "Successfully loaded place: ${place.id}")
        },
        onPlaceLoadFailed = { exception ->
            Log.e("Places", "Failed to load place", exception)
        }
    ) {
        // --- Slot: Injected directly above the place name ---
        basicSectionTop {
            Text(
                text = "Featured in 'Top 10 Coffee Shops in SF'",
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.secondary,
                modifier = Modifier.padding(top = 4.dp, bottom = 2.dp)
            )
        }

        // --- Slot: Injected directly below the action buttons ---
        basicSectionBottom {
            Text(
                text = "Notes: Great quiet atmosphere for meetings.",
                style = MaterialTheme.typography.bodySmall,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

Erweiterte Konfiguration von Place Details

Verwenden Sie AdvancedPlaceDetailsFragment oder AdvancedPlaceDetailsCompactFragment, um auf erweiterte Funktionen zuzugreifen.

Aktionsschaltflächen konfigurieren

Verwenden Sie die PlaceActionProvider-Schnittstelle des AdvancedPlaceDetailsFragment oder des AdvancedPlaceDetailsCompactFragment, um Aktionsschaltflächen zu definieren und anzupassen.

Wenn Sie @composable-Funktionen verwenden, konfigurieren Sie Aktionsschaltflächen mit den Lambdas mainActions und cornerActions.

Anforderungen an die visuelle Quellenangabe

Kompakte Ansicht von Ortsdetails mit benutzerdefinierten Schaltflächen — Kompaktansicht von „Erweiterte Place Details“ mit benutzerdefinierter Schaltfläche

Wichtig:Sie müssen Endnutzern deutlich machen, wenn über eine benutzerdefinierte Aktionsschaltfläche Nutzerinformationen an einen Drittanbieter weitergegeben werden, der nicht Google ist. Weitere Informationen finden Sie unter Anforderungen an die visuelle Quellenangabe.

Im Beispiel rechts ist ein benutzerdefiniertes Bild zu sehen, das verdeutlicht, dass Nutzerinformationen an „Altostrat“ gesendet werden.

Such- und Filteroptionen anwenden

Verwenden Sie die Klassen SearchMediaOptions und SearchReviewsOptions von AdvancedPlaceDetailsFragment oder AdvancedPlaceDetailsCompactFragment, um die Suche und Filterung von Medien oder Rezensionen zu ermöglichen.

Wenn Sie @composable-Funktionen verwenden, können Sie mit com.google.android.libraries.places.compose.search.SearchMediaOptions die Suche und Filterung von Media oder Rezensionen aktivieren.

Benutzerdefinierte Content-Slots erstellen

Optionen für die Platzierung benutzerdefinierter Inhaltsslots

Mit benutzerdefinierten Inhaltsbereichen können Sie eigene Inhalte wie KI-generierte Zusammenfassungen, Zeitstempel für Routen oder benutzerdefinierte Badges direkt in vordefinierte Layoutbereiche einfügen.

Hinweis:Benutzerdefinierte Inhalts-Slots werden nur in der zusammensetzbaren Funktion AdvancedPlaceDetailsCompact unterstützt.

Anforderungen an die Quellenangabe und Inhaltsempfehlungen für Content-Slots

Wenn ein benutzerdefinierter Inhalts-Slot eingebunden wird, wird der Offenlegungstext automatisch aktualisiert, um zu verdeutlichen, welche Inhalte von Google und welche von Drittanbietern bereitgestellt werden.

Unklarheiten bezüglich der Informationsquelle vermeiden — Dos

Achten Sie auf eine klare visuelle Hierarchie zwischen den Google-Ortsdetails und benutzerdefinierten Inhalten, damit die Quelle der Informationen eindeutig erkennbar ist.

Wertvolle Statistiken liefern — Dos

Bieten Sie lokalisierte, hochwertige Informationen, die auf die unmittelbaren Ziele Ihrer Nutzer zugeschnitten sind. Mit maßgeschneiderten Inhalten wie Echtzeit-Buchungszeiträumen oder der aktuellen Verfügbarkeit können Nutzer schneller fundiertere Entscheidungen treffen.

Vorhandene Google-Ortsdetails nicht duplizieren — Nicht erlaubt

Du darfst keine vorhandenen Google-Ortsdetails wie Bewertungen, Rezensionen oder Öffnungszeiten duplizieren, auch wenn du die von Google bereitgestellten Inhalte ausgeblendet hast. Das kann Nutzer verwirren, da sie nicht wissen, ob die Inhalte von Google oder einem Drittanbieter stammen.

Keine Behauptungen oder Logos ohne Quellenangabe anzeigen — Nicht erlaubt

Sie dürfen keine nicht zugeordneten Behauptungen oder Logos (z. B. „Top-Empfehlung!“) anzeigen, die mit offiziellen Empfehlungen von Google verwechselt werden könnten. Bei benutzerdefinierten Inhalten muss die Quelle explizit angegeben werden.

Keine Anzeigen, Marketingtexte, Werberabatte oder Aufforderungen zum Abonnieren — Nicht erlaubt

Benutzerdefinierte Ortscontainer dürfen keine Anzeigen, Marketingtexte, Werberabatte oder Aufforderungen zum Abonnieren enthalten.

Verwenden Sie die zusammensetzbare Funktion AdvancedPlaceDetailsCompact, um benutzerdefinierte Inhalte hinzuzufügen. Verwenden Sie basicSectionTop oder basicSectionBottom, um die Position des Inhalts anzugeben.

Erweiterte Beispiele für „Place Details“

Aktionsschaltflächen anpassen

Über die PlaceActionProvider-Schnittstelle können Sie festlegen, welche Aktionen für die einzelnen Orte verfügbar sind.

Kotlin

class PlaceDetailsWidgetTestActivity : BaseActivity() {

// simplified example of starting the fragment
fun setupPPDFragment() {
   fullWidgetSelectedContent = AdvancedPlaceDetailsFragment.ALL_CONTENT.toMutableList()
   AdvancedPlaceDetailsFragment.newInstance(fullWidgetSelectedContent, Orientation.VERTICAL)
   supportFragmentManager
      .beginTransaction()
      .replace(R.id.fragment_container, fragment!!)
      .commitNow()
}

// you can set the callback elsewhere, but this is the ideal callback spot
override fun onAttachFragment(fragment: Fragment) {
    super.onAttachFragment(fragment)
    when (fragment) {
      is PlaceActionController -> setPlaceActionProvider(fragment)
    }
}

// have this callback return an empty list to hide all buttons
// if this callback isn't set, default buttons appear
 private fun setPlaceActionProvider(fragment: PlaceActionController) {
    fragment.setPlaceActionProvider(
        object : PlaceActionProvider {
        override fun getMainPlaceActions(place: Place): List<PlaceAction> = buildList {
            // predefined actions can be mixed in with custom ones
            add(PlaceAction.OPEN_IN_MAPS)

            // example of button with both text label and icon
            add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.custom_action)
                .setIconResId(R.drawable.gs_custom_action_icon)
                .setContentDescriptionResId(R.string.custom_action_description)
                .setOnClickListener { /* todo perform action */ }
                .build()
            )

            // icon only button
            add(
              PlaceAction.builder()
                .setIconResId(R.drawable.custom_action_icon_2)
                .setContentDescriptionResId(R.string.custom_action_description_2)
                .setOnClickListener { /* todo perform action */}
                .build()
            )

            // text label only button
            add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.custom_action_3)
                .setContentDescriptionResId(R.string.custom_action_description_2)
                .setOnClickListener {/* todo perform action */ }
                .build()
            )
          }

         /**
         You can also specify whether corner buttons should appear.  
         For either callback, returning an empty list results in no buttons appearing
         */
         override fun getCornerPlaceActions(place: Place): List<PlaceAction> {
           return emptyList()
         }

        override fun addPlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // in this example, just one listener and widget
          this@HostAppActivity.listener = listener
        }

        override fun removePlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // if there are multiple listeners, remove only the provided listener
          this@HostAppActivity.listener = null
        }
      })
  }
}

Benutzerdefinierte und vordefinierte Aktionen hinzufügen

In diesem Beispiel wird ein Ein/Aus-Button hinzugefügt, mit dem ein Nutzer einen Ort als Favorit markieren oder die Markierung entfernen kann.

Kotlin

private var listener: PlaceActionProvider.OnChangedListener? = null

private fun setPlaceActionProvider(fragment: PlaceActionController) {
    fragment.setPlaceActionProvider(
      object : PlaceActionProvider {
        private var placeFavorited = false

        override fun getMainPlaceActions(place: Place): List<PlaceAction> {
          val buttonList = mutableListOf<PlaceAction>()

          if (placeFavorited) {
            buttonList.add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.place_details_button_config_favorite)
                .setIconResId(R.drawable.gs_web_vd_theme_24)
                .setOnClickListener {
                  placeFavorited = !placeFavorited
                  refreshButtonConfigs()
                }
                .build()
            )
          } else {
            buttonList.add(
              PlaceAction.builder()
                .setLabelTextResId(R.string.place_details_button_config_unfavorite)
                .setIconResId(R.drawable.gs_web_vd_theme_24)
                .setOnClickListener {
                  placeFavorited = !placeFavorited
                  refreshButtonConfigs()
                }
                .build()
            )
          }

          return buttonList
        }

        override fun addPlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          this@PlaceDetailsWidgetTestActivity.listener = listener
        }

        override fun removePlaceActionsChangedListener(
          listener: PlaceActionProvider.OnChangedListener
        ) {
          // if there are multiple listeners, remove only the provided listener
          this@PlaceDetailsWidgetTestActivity.listener = null
        }
      }
    )
  }

private fun refreshButtonConfigs() {
    listener?.onPlaceActionsChanged()
}

Vordefinierte Standardschaltflächen verwenden

Erstellen Sie Aktionsschaltflächen, die standardmäßige von Google definierte Aktionen ausführen.

Kotlin

  override fun getMainPlaceActions(place: Place): List<PlaceAction> {
    val buttonList = mutableListOf<PlaceAction>()
// these buttons will have different background and text color than user-created buttons.  
    // Text and icon button
    buttonList.add(PlaceAction.OPEN_IN_MAPS)
    // Icon-only buttons not enabled for main action buttons
    // Use of kotlin extension to do the same.  see
    PlaceAction.OPEN_IN_MAPS {
       setIconResId(0)
     }

    return buttonList
  }

Rezensionen und Medien filtern

In diesem Codebeispiel werden nur Medien und Rezensionen angezeigt, in denen „Spaghetti“ und „lecker“ erwähnt werden.

Kotlin

    import com.google.android.libraries.places.widget.AdvancedPlaceDetailsFragment
    import com.google.android.libraries.places.widget.model.SearchMediaOptions
    import com.google.android.libraries.places.widget.model.SearchReviewsOptions
    import com.google.android.libraries.places.widget.model.Orientation
    import com.google.android.libraries.places.R
  
     // 1. Create options using the Java builders (called from Kotlin)
    val mediaOptions = SearchMediaOptions.builder()
        .setQuery("spaghetti")
        .setRankPreference(SearchMediaOptions.RankPreference.MOST_RELEVANT)
        .build()

    val reviewOptions = SearchReviewsOptions.builder()
        .setQuery("tasty")
        .setRankPreference(SearchReviewsOptions.RankPreference.NEWEST)
        .build()

    // 2. Create the fragment
    val fragment = AdvancedPlaceDetailsFragment.newInstance(
        AdvancedPlaceDetailsFragment.STANDARD_CONTENT,
        Orientation.VERTICAL,
        R.style.PlacesMaterialTheme
    )

    // 3. Apply options to the fragment
    fragment.applySearchMediaOptions(mediaOptions)
    fragment.applySearchReviewsOptions(reviewOptions)

Content-Slots erstellen

Kotlin

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import com.google.android.libraries.places.compose.AdvancedPlaceDetailsCompact
import com.google.android.libraries.places.compose.PlaceReference

@Composable
fun ItineraryPlaceCard(placeId: String) {
    AdvancedPlaceDetailsCompact(
        reference = PlaceReference.PlaceId(placeId)
    ) {
        // Slot: Injected directly above the place name
        basicSectionTop {
            Text(
                text = "Day 2 • 2:30 PM",
                style = MaterialTheme.typography.labelSmall,
                color = MaterialTheme.colorScheme.primary
            )
        }
        
        // Slot: Injected directly below the main action buttons
        basicSectionBottom {
            NotesCard(
                notes = "Great quiet atmosphere for morning meetings. Famous for house-roasted pour-overs."
            )
        }
    }
}