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

Place Details コンポーネント

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

Place details compact コンポーネント

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

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

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

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

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

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

横向きと縦向きのレイアウト
横向きと縦向きのレイアウト

Place Details コンポーネントを使用すると、コンポーネントに表示されるコンテンツを細かく制御できます。各要素（写真、クチコミ、連絡先情報など）は個別に表示または非表示にできるため、コンポーネントの外観と情報密度を正確にカスタマイズできます。

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

Place Details のコンパクト表示

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

Place Details のフル表示

Place Details のフル表示（PlaceDetailsView）では、場所の詳細情報を表示するためのサーフェスが広くなり、より多くの種類の情報を表示できます。

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

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

コンパクト表示 全文表示
  • 場所の写真
  • 全画面表示の写真拡大用のライトボックスを有効にする
  • 場所の住所
  • 評価と評価数
  • 場所のタイプ
  • 価格
  • 入口がバリアフリーの情報
  • 営業中のステータス
  • 場所の写真コラージュ
  • 場所の住所
  • 評価と評価数
  • 場所のタイプ
  • 価格
  • バリアフリーについての情報
  • 営業中のステータス
  • 営業時間
  • 解説記事
  • ウェブサイト
  • 電話番号
  • 専用タブにレンダリングされたクチコミ
  • Plus Code
  • 専用タブにレンダリングされた特徴のリスト
  • ガソリン スタンドのガソリン価格など、タイプ固有のハイライト

課金

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

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

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

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

コンパクト表示のデフォルトの位置は縦向きです。横向きのレイアウトにする場合は、PlaceDetailsCompactView で orientation: .horizontal を指定します。わかりやすくするために、orientation: .vertical を指定することもできます。全文表示は縦向きでのみ表示できます。

例については、Place Details コンポーネントの例のセクションをご覧ください。

外観をカスタマイズする

カスタム スタイル

Place Details コンポーネントの色、タイポグラフィ、間隔、ボーダー、角をカスタマイズできます。

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

Places UI キットでは、デフォルトでダークテーマが提供されるため、ダークテーマとライトテーマの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、.dark と attribution.darkModeColor の値を カスタムテーマに追加します。

スタイルの詳細については、カスタム スタイルのセクションをご覧ください。

幅と高さのカスタマイズ

コンパクト表示

推奨される幅:

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

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

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

フル表示

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

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

フル表示の高さを設定することをおすすめします。これにより、ウィンドウ内のコンテンツを適切にスクロールできます。

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

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

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

Places UI キットでは、デフォルトでダークテーマが提供されるため、ダークテーマとライトテーマの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、カスタムテーマに .dark と attribution.darkModeColor の値を追加します。

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