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 を使用する場合、ウィジェットを使用して読み込まれる場所ごとに課金されます。同じ場所を複数回読み込む場合は、リクエストごとに課金されます。

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

プレイス UI キットを使用するには、次の作業が必要です。

• 請求先アカウント付きの Cloud プロジェクトを作成します。
• プロジェクトで Places API を有効にします。
• API キーを取得します。

Place Details UI キットの例

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

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

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)

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

カスタマイズの例

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