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

Erweiterte Komponente „Place Details“

Die erweiterte Version der Komponente „Place Details“ bietet dieselben Funktionen wie „Place Details Essentials“. Außerdem können Sie die Aktionsbuttons 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 einen angehobenen Status, eine integrierte Modifikatorunterstü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
            )
        }
    }
}

Konfiguration der erweiterten Komponente „Place Details“

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

Aktionsbuttons konfigurieren

Verwenden Sie die PlaceActionProvider-Schnittstelle von AdvancedPlaceDetailsFragment oder AdvancedPlaceDetailsCompactFragment, um Aktionsbuttons zu definieren und anzupassen.

Wenn Sie @composable Funktionen verwenden, konfigurieren Sie Aktionsbuttons mit den Lambdas mainActions und cornerActions.

Anforderungen an die visuelle Quellenangabe

Kompakte Ansicht von Ortsdetails mit benutzerdefinierten Schaltflächen — Kompakte Ansicht der erweiterten Komponente „Place Details“ mit benutzerdefiniertem Button

Wichtig:Sie müssen Endnutzer darüber informieren, wenn ein benutzerdefinierter Aktionsbutton Nutzerinformationen an einen anderen Drittanbieter als Google weitergibt. Weitere Informationen finden Sie unter Anforderungen für Quellenangaben.

Das Beispiel rechts zeigt ein benutzerdefiniertes Bild, aus dem hervorgeht, 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 für Medien oder Rezensionen zu aktivieren.

Wenn Sie @composable Funktionen verwenden, verwenden Sie com.google.android.libraries.places.compose.search.SearchMediaOptions, um die Suche und Filterung für Medien oder Rezensionen zu aktivieren.

Benutzerdefinierte Content-Slots erstellen

Optionen für die Platzierung benutzerdefinierter Inhaltsslots

Mit benutzerdefinierten Content-Slots können Sie eigene Inhalte (z. B. KI-generierte Zusammenfassungen, Zeitstempel für Routen oder benutzerdefinierte Badges) direkt in vordefinierte Layoutbereiche einfügen.

Hinweis:Benutzerdefinierte Content-Slots werden nur im Composable AdvancedPlaceDetailsCompact unterstützt.

Anforderungen an die Quellenangabe und Content-Vorschläge für Content-Slots

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

Unklarheiten bezüglich der Informationsquelle vermeiden — Dos

Sorgen Sie für eine klare visuelle Hierarchie zwischen den Google Place Details und benutzerdefinierten Inhalten, um Unklarheiten über die Quelle der Informationen zu vermeiden.

Wertvolle Statistiken bereitstellen — Dos

Berücksichtigen Sie lokalisierte, hochwertige Informationen, die auf die unmittelbaren Ziele Ihrer Nutzer zugeschnitten sind. Personalisierte Inhalte wie Buchungsfenster in Echtzeit oder die aktuelle Verfügbarkeit helfen Nutzern, schnellere und fundiertere Entscheidungen zu treffen.

Vorhandene Google-Ortsdetails nicht duplizieren — Don'ts

Duplizieren Sie keine vorhandenen Google Place Details wie Bewertungen, Rezensionen oder Öffnungszeiten, auch wenn Sie die von Google bereitgestellten Inhalte ausgeblendet haben. Andernfalls können Nutzer verwirrt sein, woher die Inhalte stammen und ob sie von Google oder einem Drittanbieter stammen.

Keine Behauptungen oder Logos ohne Quellenangabe anzeigen — Don'ts

Zeigen Sie keine nicht zugeschriebenen Behauptungen oder Badges (z. B. „Top-Empfehlung“) an, die mit offiziellen Google-Empfehlungen verwechselt werden könnten. Die Quelle benutzerdefinierter Inhalte muss explizit angegeben werden.

Keine Anzeigen, Marketingtexte, Werberabatte oder Aufforderungen zum Abonnieren — Don'ts

Fügen Sie in benutzerdefinierten Ortscontainern keine Anzeigen, Marketingtexte, Werberabatte oder Aufforderungen zur Registrierung ein.

Verwenden Sie das Composable AdvancedPlaceDetailsCompact, um benutzerdefinierte Inhalte hinzuzufügen. Geben Sie die Position des Inhalts mit basicSectionTop oder basicSectionBottom an.

Beispiele für die erweiterte Komponente „Place Details“

Aktionsbuttons anpassen

Mit der PlaceActionProvider-Schnittstelle können Sie steuern, 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 Umschaltbutton 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 Standardbuttons verwenden

Erstellen Sie Aktionsbuttons, die von Google definierte Standardaktionen 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."
            )
        }
    }
}