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

Places Details UI Kit（試験運用版）

Place Details の Place Details UI Kit を使用すると、アプリに場所の詳細を表示する個々の UI コンポーネントを追加できます。この UI Kit は、単独で使用することも、他の Google Maps Platform API やサービスと組み合わせて使用することもできます。UI キットは、プレイス ID または緯度と経度の座標を受け取り、レンダリングされた Place Details 情報を返します。

UI キットには、横向きまたは縦向きに表示できるコンパクトビューが用意されています。デフォルトテーマの属性をオーバーライドすることで、場所の詳細の外観をカスタマイズできます。Content エントリのリストを指定することで、含まれる場所の詳細フィールドをカスタマイズすることもできます。各エントリは、場所について表示される情報に対応しています。

課金

Place Details の Place Details UI Kit を使用する場合、.loadPlaceDetails() メソッドが呼び出されるたびに課金されます。同じ場所を複数回読み込むと、リクエストごとに課金されます。複数回請求されないように、Android ライフサイクルメソッドに .loadPlaceDetails() を直接追加しないでください。たとえば、onResume() メソッドで .loadPlaceDetails() を直接呼び出さないでください。

プレイス UI キットを有効にする

Places UI Kit を使用するには、次の準備が必要です。

Place Details UI キットの例

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

向き（横向きまたは縦向き）、テーマのオーバーライド、コンテンツを指定できます。コンテンツオプションには、メディア、住所、評価、料金、タイプ、車いす対応の入り口、地図リンク、経路リンクがあります。カスタマイズの例をご覧ください。

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

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(
                    orientation,
                    ALL_CONTENT
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadPlaceDetails(placeId)
            }
        }

カスタマイズの例

フラグメントをインスタンス化するときに、デフォルトのスタイル属性をオーバーライドするテーマを指定できます。オーバーライドされていないテーマ属性は、デフォルトスタイルを使用します。ダークモードをサポートする場合は、values-night/colors.xml に色のエントリを追加できます。

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <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>

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

placesColorSurfaceContainerLowest
placesColorOutlineDecorative
placesColorPrimary
placesColorOnSurface
placesColorOnSurfaceVariant
placesColorSecondaryContainer
placesColorOnSecondaryContainer
placesCornerRadius
placesTextAppearanceBodySmall
placesTextAppearanceBodyMedium
placesTextAppearanceBodyLarge
placesTextAppearanceLabelLarge
placesTextAppearanceHeadlineMedium
placesColorAttributionLight（白、グレー、黒の列挙型）
placesColorAttributionDark（白、グレー、黒の列挙型）

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

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

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

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

Places Details UI Kit（試験運用版）

課金

プレイス UI キットを有効にする

Place Details UI キットの例

Kotlin

Java

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

Kotlin

カスタマイズの例