このページは Cloud Translation API によって翻訳されました。

Place Details コンポーネント

Places UI Kit の Place Details コンポーネントを使用すると、アプリに場所の詳細を表示する個別の UI コンポーネントを追加できます。

PlaceDetailsCompactFragment は、最小限のスペースを使用して、選択した場所の詳細をレンダリングします。これは、地図上の場所をハイライト表示する情報ウィンドウ、チャットでの場所の共有などのソーシャルメディアエクスペリエンス、現在地の選択候補として、またはメディア記事内で Google マップ上の場所を参照する場合に役立ちます。PlaceDetailsCompactFragment には、名前、住所、評価、タイプ、料金、バリアフリーアイコン、営業状況、1 枚の写真が表示されます。

プレイス詳細コンポーネントは、単独で使用することも、他の Google Maps Platform API やサービスと組み合わせて使用することもできます。このコンポーネントは、プレイス ID または緯度/経度の座標を受け取り、レンダリングされたプレイス情報を返します。

課金

Place Details UI キットを使用する場合、.loadWithPlaceId() メソッドまたは .loadWithResourceName() メソッドが呼び出されるたびに課金されます。同じ場所を複数回読み込む場合は、リクエストごとに課金されます。

複数回請求されないように、Android ライフサイクルメソッドに .loadWithPlaceId() または .loadWithResourceName() を直接追加しないでください。たとえば、onResume() メソッドで .loadWithPlaceId() や .loadWithResourceName() を直接呼び出さないでください。

アプリに場所の詳細を追加する

場所の詳細をアプリに追加するには、レイアウトにフラグメントを追加します。フラグメントをインスタンス化すると、プレイスの詳細情報の外観をカスタマイズして、ニーズに合わせてアプリの外観に合わせることができます。

Kotlin と Java の両方で使用できるメソッドは 2 つあります。1 つはプレイス ID を使用してフラグメントを読み込むメソッド（loadWithPlaceId()）、もう 1 つはリソース名を使用してフラグメントを読み込むメソッド（loadWithResourceName()）です。どちらか一方を選択できます。プレイス ID とリソース名の両方を使用する場合は、両方を選択できます。

向き（横向きまたは縦向き）、テーマのオーバーライド、コンテンツを指定できます。コンテンツオプションは、メディア、住所、評価、料金、タイプ、車いす対応の入り口、現在営業中ステータスです。カスタマイズの詳細をご覧ください。

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

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

場所の詳細をカスタマイズする

プレイス UI キットは、マテリアルデザインをベースにした視覚的なカスタマイズにデザインシステムアプローチを提供します（Google マップ固有の変更がいくつかあります）。色とタイポグラフィについては、マテリアルデザインのリファレンスをご覧ください。デフォルトでは、このスタイルは Google マップのビジュアルデザイン言語に準拠しています。

フラグメントをインスタンス化するときに、デフォルトのスタイル属性をオーバーライドするテーマを指定できます。オーバーライドされていないテーマ属性は、デフォルトスタイルを使用します。ダークモードをサポートする場合は、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>

カスタマイズできるスタイルは次のとおりです。

テーマ属性	用途
色
`placesColorSurface`	コンテナとダイアログの背景
`placesColorOnSurface`	見出し、ダイアログのコンテンツ
`placesColorOnSurfaceVariant`	お店/スポット情報
`placesColorPrimary`	リンク
`placesColorOutlineDecorative`	コンテナの境界線
`placesColorSecondaryContainer`	ボタンの背景
`placesColorOnSecondaryContainer`	ボタンのテキストとアイコン
`placesColorPositive`	「営業中」ラベルを配置
`placesColorNegative`	場所に「閉鎖済み」のラベルを追加
`placesColorInfo`	入口がバリアフリーのアイコン

タイポグラフィ
`placesTextAppearanceHeadlineMedium`	ダイアログの見出し
`placesTextAppearanceTitleSmall`	場所の名前
`placesTextAppearanceBodyMedium`	ダイアログのコンテンツ
`placesTextAppearanceBodySmall`	お店/スポット情報
`placesTextAppearanceLabelLarge`	ボタンのラベル

角
`placesCornerRadius`	コンテナの角

Google マップのブランドアトリビューション
`placesColorAttributionLight`	明るいテーマの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）
`placesColorAttributionDark`	ダークモードの Google マップのアトリビューションと開示ボタン（白、グレー、黒の列挙型）

幅と高さ

縦向きの場合は、幅を 180 dp ～ 300 dp にすることをおすすめします。横向きの場合、推奨される幅は 180 dp ～ 500 dp です。160 dp 未満のビューは正しく表示されない場合があります。

高さを設定しないことをおすすめします。これにより、ウィンドウ内のコンテンツの高さを設定して、すべての情報を表示できるようになります。

アトリビューションの色

Google マップの利用規約では、Google マップの帰属表示に 3 つのブランドカラーのいずれかを使用することが義務付けられています。この帰属情報は、カスタマイズが変更されたときに表示され、アクセス可能である必要があります。

明るいテーマと暗いテーマで個別に設定できる 3 つのブランドカラーから選択できます。

ライトモード: placesColorAttributionLight（白、グレー、黒の列挙型を使用）。
ダークモード: placesColorAttributionDark（白、グレー、黒の列挙型）。

カスタマイズの例

このサンプルでは、標準コンテンツをカスタマイズします。

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

このサンプルでは、コンテンツオプションをカスタマイズします。

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

このサンプルでは、すべての Content オプションをカスタマイズします。

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

Place Details コンポーネント

課金

アプリに場所の詳細を追加する

Kotlin

Java

Place Details ウィジェットを読み込む完全なコード

Kotlin

場所の詳細をカスタマイズする

幅と高さ

アトリビューションの色

カスタマイズの例