장소 세부정보 UI 키트 (실험용)

장소 세부정보 간단히 보기

장소 세부정보용 장소 세부정보 UI 키트를 사용하면 앱에 장소 세부정보를 표시하는 개별 UI 구성요소를 추가할 수 있습니다. UI 키트는 독립적으로 사용하거나 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다. UI 키트는 장소 ID 또는 위도/경도 좌표를 사용하고 렌더링된 장소 세부정보 정보를 반환합니다.

UI 키트는 가로 또는 세로로 표시할 수 있는 좁은 뷰를 제공합니다. 기본 테마의 속성을 재정의하여 장소 세부정보의 모양을 맞춤설정할 수 있습니다. 장소에 표시되는 정보에 각각 대응하는 Content 항목 목록을 지정하여 포함할 장소 세부정보 필드를 맞춤설정할 수도 있습니다.

결제

장소 세부정보에 장소 세부정보 UI 키트를 사용하는 경우 위젯을 사용하여 로드되는 각 장소에 대해 요금이 청구됩니다. 동일한 장소를 여러 번 로드하면 요청마다 비용이 청구됩니다.

장소 UI 키트 사용 설정

장소 UI 키트를 사용하기 전에 다음을 실행해야 합니다.

장소 세부정보 UI 키트 예시

레이아웃에 프래그먼트를 추가하여 앱에 장소 세부정보를 추가할 수 있습니다. 프래그먼트를 인스턴스화할 때 필요에 맞게 장소 세부정보 정보의 디자인과 분위기를 맞춤설정하고 앱의 모양에 맞출 수 있습니다.

방향 (가로 또는 세로), 테마 재정의, 콘텐츠를 지정할 수 있습니다. 콘텐츠 옵션은 미디어, 주소, 평점, 가격, 유형, 접근 가능한 입구, 지도 링크, 경로 링크입니다. [맞춤설정 예 보기]().

Kotlin자바
val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
  R.style.CustomizedPlaceDetailsTheme,
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
    override fun onSuccess() { ... }
      
      override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
fragment.loadPlaceDetails(placeId)
 
      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override
        public void onSuccess() { ... }
    
        @Override
        public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
fragment.loadPlaceDetails(placeId);

맞춤설정 예

프래그먼트를 인스턴스화할 때 기본 스타일 속성을 재정의하는 테마를 지정할 수 있습니다. 재정의되지 않은 테마 속성은 기본 스타일을 사용합니다. 어두운 테마를 지원하려면 values-night/colors.xml에 색상 항목을 추가하면 됩니다. 

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

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

  • placesColorSurfaceContainerLowest
  • placesColorOutlineDecorative
  • placesColorPrimary
  • placesColorOnSurface
  • placesColorOnSurfaceVariant
  • placesColorSecondaryContainer
  • placesColorOnSecondaryContainer
  • placesCornerRadius
  • placesTextAppearanceBodySmall
  • placesTextAppearanceBodyMedium
  • placesTextAppearanceBodyLarge
  • placesTextAppearanceLabelLarge
  • placesTextAppearanceHeadlineMedium
  • placesColorAttributionLight (흰색, 회색, 검은색의 enum)
  • placesColorAttributionDark (흰색, 회색, 검은색의 enum)

이 샘플에서는 표준 콘텐츠를 맞춤설정합니다.

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.STANDARD_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)

이 샘플은 모든 콘텐츠를 맞춤설정합니다.

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
  orientation,
  PlaceDetailsCompactFragment.ALL_CONTENT,
  R.style.BrandedPlaceDetailsTheme,
)