Place Details コンポーネント

Places UI Kit の Place Details コンポーネントを使用すると、アプリに場所の詳細を表示する個別の UI コンポーネントを追加できます。

PlaceDetailsCompactView は、最小限のスペースを使用して、選択した場所の詳細をレンダリングします。これは、地図上の場所をハイライト表示する情報ウィンドウ、チャットでの場所の共有などのソーシャル メディア エクスペリエンス、現在地の選択候補として、またはメディア記事内で Google マップ上の場所を参照する場合に役立ちます。PlaceDetailsCompactView には、名前、住所、評価、タイプ、料金、バリアフリー アイコン、営業状況、1 枚の写真が表示されます。

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

Place Details コンポーネントは、横向きまたは縦向きに表示できるコンパクトなビューを提供します。

Place Details コンポーネントのコンテンツとビジュアル スタイルは、ユースケースとビジュアル ブランド ガイドラインに合わせて構成できます。カスタムの PlacesMaterialTheme 値を指定することで、店舗情報の外観をカスタマイズできます。PlaceDetailsCompactView エントリのリストを指定することで、表示する場所の詳細フィールドをカスタマイズすることもできます。各エントリは、場所について表示される情報に対応しています。

課金

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

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

Place Details コンポーネントは Swift UI ビューです。場所の詳細情報の外観は、ニーズに合わせてカスタマイズし、アプリの外観に合わせて調整できます。

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

デフォルトの配置は縦向きです。横向きのレイアウトにする場合は、PlaceDetailsCompactView に orientation: .horizontal を指定します。

このサンプルでは、縦向きレイアウトのコンパクト ビューを作成します。

Swift

      
  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

このサンプルでは、水平レイアウトのコンパクト ビューを作成します。

Swift

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

場所の詳細をカスタマイズする

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

重要: 視覚的な変更を行う場合は、Google マップの帰属情報の要件に準拠する必要があります。

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

幅と高さ

縦向きの場合は、幅は 180 ～ 300 ピクセルが推奨されます。横向き表示の場合、推奨される幅は 180 ～ 500 ピクセルです。

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

注: 幅が 350 ピクセル未満のビューでは、プレイスのサムネイル画像は表示されません。

アトリビューションの色

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

明るいテーマと暗いテーマで個別に設定できる 3 つのブランドカラーから選択できます。

• ライトモード: attributionColorLight（白、グレー、黒の列挙型を使用）。
• ダークモード: attributionColorDark（白、グレー、黒の列挙型）。

カスタマイズの例

注: ビジュアル カスタマイズを指定しない場合、デフォルト値が保持されます。

このサンプルは、デフォルトのスタイル属性をカスタマイズする方法を示しています。

Swift

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }