플랫폼 선택: Android iOS JavaScript

장소 세부정보 구성요소

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

장소 세부정보 컴팩트 구성요소

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

장소 세부정보 구성요소는 완전히 테마를 지정할 수 있으므로 사용 사례 및 시각적 브랜드 가이드라인에 맞게 글꼴, 색상, 모서리 반경을 맞춤설정할 수 있습니다. 맞춤 PlacesMaterialTheme 값을 제공하여 장소 세부정보의 모양을 맞춤설정할 수 있습니다. 각각 장소에 대해 표시되는 정보에 해당하는 PlaceDetailsCompactView 항목 목록을 지정하여 포함할 장소 세부정보 필드를 맞춤설정할 수도 있습니다.

레이아웃 변형

장소 세부정보 구성요소는 두 가지 기본 레이아웃 변형을 지원합니다.

  • 컴팩트: 주요 정보를 미리 보는 레이아웃입니다.
  • 전체: 사용 가능한 모든 장소 세부정보를 표시하는 포괄적인 레이아웃입니다.

컴팩트 레이아웃은 세로 또는 가로 방향으로 표시할 수 있습니다. 이를 통해 다양한 디자인 레이아웃과 화면 크기에 구성요소를 통합할 수 있습니다. 전체 레이아웃은 세로로만 표시할 수 있습니다.

가로 및 세로 레이아웃
가로 및 세로 레이아웃

장소 세부정보 구성요소를 사용하면 구성요소에 표시되는 콘텐츠를 세부적으로 관리할 수 있습니다. 사진, 리뷰, 연락처 정보와 같은 각 요소를 개별적으로 표시하거나 숨길 수 있으므로 구성요소의 모양과 정보 밀도를 정확하게 맞춤설정할 수 있습니다.

장소 세부정보 콘텐츠 옵션
콘텐츠 표시 옵션

장소 세부정보 간단히 보기

장소 세부정보 컴팩트 뷰 (PlaceDetailsCompactView)는 최소한의 공간을 사용하여 선택한 장소의 세부정보를 렌더링합니다. 이는 지도에서 장소를 강조 표시하는 정보 창, 채팅에서 위치를 공유하는 소셜 미디어 환경, 현재 위치 선택을 위한 제안, Google 지도의 장소를 참조하는 미디어 기사에서 유용할 수 있습니다.

장소 세부정보 전체 보기

장소 세부정보 전체 보기 (PlaceDetailsView)는 장소 세부정보 정보를 표시할 수 있는 더 큰 화면을 제공하며 더 많은 유형의 정보를 표시할 수 있습니다.

콘텐츠 표시 옵션

PlaceDetailsCompactContent 또는 PlaceDetailsContent의 열거형을 사용하여 표시할 콘텐츠를 지정할 수 있습니다.

간단한 뷰 전체보기
  • 장소 사진
  • 장소 주소
  • 평점 및 평점 수
  • 장소 유형
  • 가격
  • 장애인 이용 가능 입구 정보
  • 지금 영업 중 상태
  • 장소 사진 콜라주
  • 장소 주소
  • 평점 및 평점 수
  • 장소 유형
  • 가격
  • 접근성 정보
  • 지금 영업 중 상태
  • 영업시간
  • 편집자 요약
  • 웹사이트
  • 전화번호
  • 전용 탭에 렌더링된 리뷰
  • Plus Code
  • 전용 탭에 렌더링된 기능 목록
  • 유형별 하이라이트(예: 주유소의 휘발유 가격)

결제

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

앱에 장소 세부정보 추가

장소 세부정보 구성요소는 Swift UI 뷰입니다. 필요에 맞게 장소 세부정보의 디자인을 맞춤설정하고 앱의 모양과 일치시킬 수 있습니다. 맞춤설정에 대해 자세히 알아보기

장소 ID, 리소스 이름 또는 위도/경도 좌표를 사용하여 장소 세부정보 구성요소를 로드할 수 있습니다. 하나 또는 여러 방법을 선택할 수 있습니다. PlaceDetailsQuery 구조체에서 identifier.placeID, .resourceName 또는 .coordinate로 설정합니다.

컴팩트 뷰의 기본 위치는 세로입니다. 가로 레이아웃을 원하는 경우 PlaceDetailsCompactVieworientation: .horizontal를 지정합니다. 명확성을 위해 orientation: .vertical을 선택적으로 지정할 수도 있습니다. 전체 뷰는 세로로만 표시할 수 있습니다.

장소 세부정보 구성요소 예 섹션의 예시를 참고하세요.

시각적 디자인 맞춤설정

장소 세부정보 시각적 맞춤설정
시각적 맞춤설정 예

Places UI 키트는 Material Design을 대략적으로 기반으로 하는 시각적 맞춤설정에 디자인 시스템 접근 방식을 제공합니다 (일부 Google 지도 관련 수정사항 포함). 색상서체에 관한 Material Design 참조를 확인하세요. 기본적으로 스타일은 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 지도에서 열기 및 확인 버튼
   
서체
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 지도에서 열기 및 확인 버튼 (원형 아이콘 버튼 제외)
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픽셀보다 작으면 올바르게 표시되지 않을 수 있습니다.

구성요소의 높이를 설정할 수 있습니다. 할당된 공간 내에서 세로 장소 세부정보 뷰가 세로로 스크롤됩니다.

전체 뷰의 높이를 설정하는 것이 좋습니다. 이렇게 하면 창의 콘텐츠가 올바르게 스크롤됩니다.

기여 분석 색상

기여
기여 분석

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

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

  • 밝은 테마: 흰색, 회색, 검은색의 열거형이 있는 attributionColorLight
  • 어두운 테마: 흰색, 회색, 검은색의 열거형이 있는 attributionColorDark

장소 세부정보 구성요소 예

세로 레이아웃으로 전체 뷰 만들기

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