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

場所の詳細コンポーネントは、単独で使用することも、他の 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
の列挙型を使用して、表示するコンテンツを指定できます。
コンパクト表示 | 全文表示 |
---|---|
|
|
課金
Place Details UI Kit を使用する場合、PlaceDetailsQuery
メソッドが呼び出されるたびに課金されます。同じ場所を複数回読み込むと、リクエストごとに課金されます。
アプリに場所の詳細を追加する
Place Details コンポーネントは Swift UI View です。プレイスの詳細情報のデザインをニーズに合わせてカスタマイズし、アプリのデザインに合わせることができます。カスタマイズの詳細をご覧ください。
Place ID、リソース名、緯度/経度座標を使用して Place Details コンポーネントを読み込むことができます。1 つまたは複数の方法を選択できます。PlaceDetailsQuery
構造体の identifier
を .placeID
、.resourceName
、または .coordinate
に設定します。
コンパクト ビューのデフォルトの向きは縦向きです。横向きのレイアウトにする場合は、PlaceDetailsCompactView
で orientation: .horizontal
を指定します。必要に応じて、わかりやすくするために orientation: .vertical
を指定することもできます。全画面表示は縦向きでのみ表示できます。
プレイスの詳細コンポーネントの例セクションの例をご覧ください。
外観をカスタマイズする

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

コンポーネントのルック アンド フィールは、placesMaterialColor
、placesMaterialFont
、placesMaterialShape
、placesMaterialTheme
構造体でカスタマイズされます。
次のスタイルをカスタマイズできます。

テーマ属性 | 用途 |
---|---|
色 | |
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 つのブランドカラーのうちの 1 つを使用することが求められています。この帰属情報は、カスタマイズの変更が行われたときに表示され、アクセス可能である必要があります。
ライトモードとダークモードで個別に設定できる 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) }