이 페이지는 Cloud Translation API를 통해 번역되었습니다.

장소 세부정보 구성요소

장소 UI 키트의 장소 세부정보 구성요소를 사용하면 앱에 장소 세부정보를 표시하는 개별 UI 구성요소를 추가할 수 있습니다.

PlaceDetailsCompactView는 최소한의 공간을 사용하여 선택한 장소의 세부정보를 렌더링합니다. 지도에서 장소를 강조 표시하는 정보 창, 채팅에서 위치를 공유하는 등의 소셜 미디어 환경, 현재 위치를 선택하기 위한 추천, Google 지도에서 장소를 참조하기 위한 미디어 기사 내에서 유용할 수 있습니다. PlaceDetailsCompactView는 이름, 주소, 평점, 유형, 가격, 접근성 아이콘, 영업 상태, 단일 사진을 표시할 수 있습니다.

장소 세부정보 구성요소는 독립적으로 또는 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다. 이 구성요소는 장소 ID 또는 위도/경도 좌표를 사용하고 렌더링된 장소 세부정보 정보를 반환합니다.

장소 세부정보 구성요소는 가로 또는 세로로 표시할 수 있는 좁은 보기를 제공합니다.

장소 세부정보 구성요소의 콘텐츠와 시각적 스타일은 사용 사례 및 시각적 브랜드 가이드라인에 맞게 구성할 수 있습니다. 맞춤 PlacesMaterialTheme 값을 제공하여 장소 세부정보의 모양을 맞춤설정할 수 있습니다. 장소에 표시되는 정보에 각각 대응하는 PlaceDetailsCompactView 항목 목록을 지정하여 포함할 장소 세부정보 필드를 맞춤설정할 수도 있습니다.

결제

장소 세부정보 UI 키트를 사용하면 PlaceDetailsQuery 메서드가 호출될 때마다 요금이 청구됩니다. 동일한 장소를 여러 번 로드하면 요청마다 비용이 청구됩니다.

앱에 장소 세부정보 추가

장소 세부정보 구성요소는 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 키트는 대략적으로 Material Design을 기반으로 하는 시각적 맞춤설정에 대한 디자인 시스템 접근 방식을 제공합니다 (일부 Google 지도 관련 수정사항 포함). Material Design의 색상 및 서체 참조를 확인하세요. 기본적으로 스타일은 Google 지도의 시각적 디자인 언어를 따릅니다.

다음 스타일을 맞춤설정할 수 있습니다.

너비 및 높이

세로 모드 보기의 경우 권장 너비는 180~300픽셀입니다. 가로 모드의 경우 권장 너비는 180~500픽셀입니다.

높이를 설정하지 않는 것이 좋습니다. 이렇게 하면 창의 콘텐츠가 높이를 설정하여 모든 정보를 표시할 수 있습니다.

기여 분석 색상

Google 지도 서비스 약관에 따라 Google 지도 저작자 표시에는 세 가지 브랜드 색상 중 하나를 사용해야 합니다. 맞춤설정이 변경된 경우 이 저작자 표시가 표시되고 액세스할 수 있어야 합니다.

밝은 테마와 어두운 테마에 대해 개별적으로 설정할 수 있는 3가지 브랜드 색상을 제공합니다.

밝은 테마: 흰색, 회색, 검은색의 enum이 있는 attributionColorLight
어두운 테마: 흰색, 회색, 검은색의 enum이 있는 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)
  }