プラットフォームを選択: Android iOS JavaScript

Place Details コンポーネント

Places UI キットの Place Details コンポーネントを使用すると、アプリに場所の詳細を表示する個々の UI コンポーネントを追加できます。このコンポーネントはカスタマイズ可能です。

Place Details コンパクト コンポーネント

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

Place Details コンポーネントは完全にテーマ設定可能で、フォント、色、角の丸みをユースケースやビジュアル ブランド ガイドラインに合わせてカスタマイズできます。カスタムの PlacesMaterialTheme 値を指定することで、プレイスの詳細の外観をカスタマイズできます。PlaceDetailsCompactView エントリのリストを指定して、場所の詳細フィールドに含める情報をカスタマイズすることもできます。各エントリは、場所について表示される情報に対応しています。

レイアウト バリエーション

Place Details コンポーネントは、次の 2 つの主要なレイアウト バリエーションをサポートしています。

  • コンパクト: 主要な情報をプレビューするためのレイアウト。
  • フル: 利用可能なすべての場所の詳細を表示する包括的なレイアウト。

コンパクト レイアウトは、縦向きまたは横向きで表示できます。これにより、コンポーネントをさまざまなデザイン レイアウトや画面サイズに統合できます。完全なレイアウトは縦向きでのみ表示できます。

横向きと縦向きのレイアウト
水平レイアウトと垂直レイアウト

プレイスの詳細コンポーネントを使用すると、コンポーネントに表示されるコンテンツを細かく制御できます。各要素(写真、レビュー、連絡先情報など)を個別に表示または非表示にできるため、コンポーネントの外観と情報密度を細かくカスタマイズできます。

場所の詳細のコンテンツ オプション
コンテンツの表示オプション

Place Details のコンパクト表示

Place Details のコンパクト ビュー(PlaceDetailsCompactView)は、選択した場所の詳細を最小限のスペースでレンダリングします。これは、地図上の場所をハイライト表示する情報ウィンドウ、チャットで位置情報を共有するなどのソーシャル メディア エクスペリエンス、現在地の選択候補、Google マップ上の場所を参照するメディア記事などで役立ちます。

Place Details の全画面表示

Place Details のフルビュー(PlaceDetailsView)では、プレイスの詳細情報を表示するサーフェスが広くなり、より多くの種類の情報を表示できます。

コンテンツの表示オプション

PlaceDetailsCompactContent または PlaceDetailsContent の列挙型を使用して、表示するコンテンツを指定できます。

コンパクト表示 全文表示
  • 場所の写真
  • 場所の住所
  • 評価と評価数
  • 場所のタイプ
  • 価格
  • バリアフリーの入り口に関する情報
  • 営業中のステータス
  • 場所の写真コラージュ
  • 場所の住所
  • 評価と評価数
  • 場所のタイプ
  • 価格
  • バリアフリーについての情報
  • 営業中のステータス
  • 営業時間
  • 編集者による概要
  • ウェブサイト
  • 電話番号
  • 専用タブに表示されるレビュー
  • Plus Code
  • 専用タブにレンダリングされた機能リスト
  • ガソリン スタンドのガソリン価格など、タイプ固有のハイライト

課金

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

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

Place Details コンポーネントは Swift UI View です。プレイスの詳細情報のデザインをニーズに合わせてカスタマイズし、アプリのデザインに合わせることができます。カスタマイズの詳細をご覧ください。

Place ID、リソース名、緯度/経度座標を使用して Place Details コンポーネントを読み込むことができます。1 つまたは複数の方法を選択できます。PlaceDetailsQuery 構造体の identifier.placeID.resourceName、または .coordinate に設定します。

コンパクト ビューのデフォルトの向きは縦向きです。横向きのレイアウトにする場合は、PlaceDetailsCompactVieworientation: .horizontal を指定します。必要に応じて、わかりやすくするために orientation: .vertical を指定することもできます。全画面表示は縦向きでのみ表示できます。

プレイスの詳細コンポーネントの例セクションの例をご覧ください。

外観をカスタマイズする

場所の詳細のビジュアル カスタマイズ
ビジュアルのカスタマイズの例

Places UI キットは、マテリアル デザイン(Google マップ固有の変更がいくつか加えられています)にほぼ基づいた、ビジュアル カスタマイズに対するデザイン システム アプローチを提供します。マテリアル デザインのタイポグラフィのリファレンスをご覧ください。デフォルトでは、スタイルは Google マップのビジュアル デザイン言語に準拠しています。

Place Details のカスタマイズ オプション

コンポーネントのルック アンド フィールは、placesMaterialColorplacesMaterialFontplacesMaterialShapeplacesMaterialTheme 構造体でカスタマイズされます。

次のスタイルをカスタマイズできます。

ダイアログの色とタイポグラフィのカスタマイズ
ダイアログの色とタイポグラフィのカスタマイズ
テーマ属性 用途
theme.color.surface コンテナとダイアログの背景
theme.color.outlineDecorative コンテナの境界線
theme.color.primary リンク、読み込みインジケーター、概要アイコン
theme.color.onSurface 見出し、ダイアログのコンテンツ
theme.color.onSurfaceVariant お店/スポット情報
theme.color.secondaryContainer ボタンの背景
theme.color.onSecondaryContainer ボタンのテキストとアイコン
theme.color.neutralContainer 日付バッジ、読み込みプレースホルダの形状を確認
theme.color.onNeutralContainer レビューの日付、読み込みエラー
theme.color.positiveContainer EV 充電器ありバッジ
theme.color.onPositiveContainer 利用可能な EV 充電器バッジのコンテンツ
theme.color.positive 「営業中」ラベルを配置
theme.color.negative 閉店した場所のラベル
theme.color.info 入口がバリアフリーのアイコン
theme.measurement.borderWidthButton [地図で開く] ボタンと [OK] ボタン
   
タイポグラフィ
theme.font.bodySmall お店/スポット情報
theme.font.bodyMedium 場所の情報、ダイアログのコンテンツ
theme.font.labelMedium バッジのコンテンツ
theme.font.labelLarge ボタンのコンテンツ
theme.font.headlineMedium ダイアログの見出し
theme.font.displaySmall 場所の名前
theme.font.titleSmall 場所の名前
   
スペーシング
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
   
測定
borderWidth コンテナ
theme.measurement.borderWidthButton
   
シェイプ
theme.shape.cornerRadius コンテナ
theme.shape.cornerRadiusButton [マップで開く] ボタンと [OK] ボタン(丸いアイコンボタンを除く)
theme.shape.cornerRadiusThumbnail サムネイル画像を配置する
theme.shape.cornerRadiusCollageOuter メディア コラージュ
theme.shape.cornerRadiusCard 場所情報カード、ユーザー レビューカード
theme.shape.cornerRadiusDialog Google マップの開示ダイアログ
   
Google マップのブランド アトリビューション
attribution.lightModeColor ライトモードの Google マップのアトリビューションと開示ボタン(白、グレー、黒の列挙型)
attribution.darkModeColor ダークモードの Google マップのアトリビューションと開示ボタン(白、グレー、黒の列挙型)

プレイスの詳細コンポーネントの例セクションの例をご覧ください。

幅と高さのカスタマイズ

コンパクト ビュー

推奨される幅:

  • 縦向き: 180 ~ 300 ピクセル。
  • 横向き: 180 ~ 500 ピクセル。

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

幅が 160 ピクセル未満の場合、正しく表示されないことがあります。

完全再生数

フルビューの場合、推奨される幅は 250 ~ 450 ピクセルです。幅が 250 ピクセル未満の場合、正しく表示されないことがあります。

コンポーネントの高さを設定できます。縦型の Place Details ビューは、割り当てられたスペース内で縦方向にスクロールします。

ベスト プラクティスは、全画面表示の高さを設定することです。これにより、ウィンドウ内のコンテンツが適切にスクロールされます。

アトリビューションの色

アトリビューション
アトリビューション

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

ライトモードとダークモードで個別に設定できる 3 つのブランドカラーから選択できます。

  • ライトテーマ: 白、グレー、黒の列挙型を含む attributionColorLight
  • ダークモード: 白、グレー、黒の列挙型を含む attributionColorDark

Place Details コンポーネントの例

縦向きレイアウトで全画面ビューを作成する

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

水平レイアウトのコンパクト ビューを作成する

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

縦向きレイアウトで全画面ビューを作成する

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

スタイル属性をカスタマイズする

このサンプルは、全画面表示またはコンパクト表示のデフォルトのスタイル属性をカスタマイズする方法を示しています。

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

特定のコンテンツを表示する

このサンプルでは、前の例で作成したテーマを使用して、メディア、住所、評価、タイプのみを表示するコンパクト ビューを作成します。

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }