Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Place Details の高度なコンポーネント

Place Details コンポーネントの高度なバージョンは、Places Details Essentials と同じ機能を提供します。また、コンポーネントの操作ボタンを構成し、表示されるレビューやメディアに検索オプションとフィルタオプションを適用することもできます。

Jetpack Compose の組み込みサポート

Places UI キットには、Jetpack Compose @Composable 関数がAdvancedPlaceDetailsCompact 用に用意されています。これらのコンポーザブルは、ホイストされた状態、組み込みの修飾子のサポート、Compose ネイティブのスロット DSL を使用します。

次のコードサンプルは、縦向きレイアウトにコンポーズ可能な関数を使用する方法を示しています。

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

Place Details の高度な構成

高度な機能にアクセスするには、AdvancedPlaceDetailsFragment または AdvancedPlaceDetailsCompactFragment を使用します。

操作ボタンを構成する

AdvancedPlaceDetailsFragment または AdvancedPlaceDetailsCompactFragment の PlaceActionProvider インターフェースを使用して、アクションボタンを定義してカスタマイズします。

@composable 関数を使用している場合は、mainActions ラムダと cornerActions ラムダを使用して操作ボタンを構成します。

ビジュアルの帰属表示の要件

カスタマイズされたボタンが表示された店舗情報のコンパクトビュー — ボタンをカスタマイズした Place Details のコンパクトビュー（高度）

重要: カスタムアクションボタンが Google 以外の第三者とユーザー情報を共有する場合は、エンドユーザーに明確に伝える必要があります。ビジュアルアトリビューションの要件をご覧ください。

右の例は、ユーザー情報が「Altostrat」に送信されることを明確に示すカスタム画像です。

検索オプションとフィルタオプションを適用する

AdvancedPlaceDetailsFragment または AdvancedPlaceDetailsCompactFragment の SearchMediaOptions クラスと SearchReviewsOptions クラスを使用して、メディアまたはレビューの検索とフィルタを有効にします。

@composable 関数を使用している場合は、com.google.android.libraries.places.compose.search.SearchMediaOptions を使用して、メディアまたはレビューの検索とフィルタを有効にします。

カスタムコンテンツスロットを作成する

カスタムコンテンツスロットを使用すると、独自のコンテンツ（AI 生成の要約、旅程のタイムスタンプ、カスタムバッジなど）を事前定義されたレイアウトゾーンに直接追加できます。

注: カスタムコンテンツスロットは、AdvancedPlaceDetailsCompact コンポーザブルでのみサポートされています。

コンテンツスロットの帰属表示の要件とコンテンツの提案

カスタムコンテンツスロットがマウントされると、開示情報が自動的に更新され、どのコンテンツが Google によって提供され、どのコンテンツが第三者によって提供されるかが明確になります。

情報源の曖昧さを解消する — 次のことを行います。

情報の出所が曖昧にならないように、Google Place Details とカスタムコンテンツの間に明確な視覚的階層を維持します。

価値の高い分析情報を提供する — 次のことを行います。

ユーザーの当面の目標に合わせて、ローカライズされた価値の高いインサイトを検討します。リアルタイムの予約ウィンドウや現在の空き状況など、カスタマイズされたコンテンツは、ユーザーがより迅速かつ十分な情報に基づいて意思決定を行うのに役立ちます。

既存の Google Place Details を重複させない — 次のことは行いません。

Google 提供のコンテンツを非表示にしている場合でも、評価、レビュー、営業時間など、既存の Google Place Details を複製しないでください。複製すると、コンテンツの出所や、Google または第三者のどちらから提供されたものかについて、ユーザーが混乱する可能性があります。

帰属先のない主張やバッジを表示しない — 次のことは行いません。

Google の公式な推奨と誤解される可能性のある、帰属表示のない主張やバッジ（「おすすめ！」など）を表示しないでください。カスタムコンテンツは、その出所を明示的に帰属表示する必要があります。

広告、マーケティングコピー、プロモーション割引、定期購入のプロンプトは含めないでください — 次のことは行いません。

カスタムの場所コンテナ内に、広告、マーケティングコピー、プロモーション割引、定期購入のプロンプトを含めないでください。

カスタムコンテンツを追加するには、AdvancedPlaceDetailsCompact コンポーザブルを使用します。basicSectionTop または basicSectionBottom を使用して、コンテンツの位置を指定します。

Place Details の高度な例

アクションボタンをカスタマイズする

PlaceActionProvider インターフェースを使用して、各場所で使用できるアクションを制御します。

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

カスタムアクションと事前定義されたアクションを追加する

このサンプルでは、ユーザーが場所をお気に入りに追加またはお気に入りから削除するための切り替えボタンを追加します。

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

事前定義された標準ボタンを使用する

Google が定義した標準アクションを実行する操作ボタンを作成します。

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
  }

レビューとメディアをフィルタする

このコードサンプルでは、「スパゲッティ」と「おいしい」という単語を含むメディアとレビューのみを表示します。

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)

コンテンツスロットを作成する

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

Place Details の高度なコンポーネント

Jetpack Compose の組み込みサポート

Kotlin

Place Details の高度な構成

操作ボタンを構成する

ビジュアルの帰属表示の要件

検索オプションとフィルタ オプションを適用する

カスタム コンテンツ スロットを作成する

コンテンツ スロットの帰属表示の要件とコンテンツの提案

Place Details の高度な例

アクション ボタンをカスタマイズする

Kotlin

カスタム アクションと事前定義されたアクションを追加する

Kotlin

事前定義された標準ボタンを使用する

Kotlin

レビューとメディアをフィルタする

Kotlin

コンテンツ スロットを作成する

Kotlin

検索オプションとフィルタオプションを適用する

カスタムコンテンツスロットを作成する

コンテンツスロットの帰属表示の要件とコンテンツの提案

アクションボタンをカスタマイズする

カスタムアクションと事前定義されたアクションを追加する

コンテンツスロットを作成する