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

장소 세부정보 구성요소

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

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

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

결제

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

여러 번 청구되지 않도록 하려면 Android 수명 주기 메서드에 .loadWithPlaceId() 또는 .loadWithResourceName()를 직접 추가하지 마세요. 예를 들어 onResume() 메서드에서 .loadWithPlaceId() 또는 .loadWithResourceName()를 직접 호출하지 마세요.

앱에 장소 세부정보 추가

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

Kotlin과 Java에서 모두 사용할 수 있는 두 가지 메서드가 있습니다. 하나는 장소 ID (loadWithPlaceId())로 프래그먼트를 로드하는 메서드이고 하나는 리소스 이름 (loadWithResourceName())으로 프래그먼트를 로드하는 메서드입니다. 장소 ID와 리소스 이름을 모두 사용하는 경우 두 메서드 중 하나를 선택하거나 둘 다 선택할 수 있습니다.

방향 (가로 또는 세로), 테마 재정의, 콘텐츠를 지정할 수 있습니다. 콘텐츠 옵션은 미디어, 주소, 평점, 가격, 유형, 접근 가능한 입구, 현재 영업 상태입니다. 맞춤설정에 대해 자세히 알아보기

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
  R.style.CustomizedPlaceDetailsTheme
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
  override fun onSuccess(place: Place) { ... }
      
  override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId)
// Load the fragment with a resource name.
//fragment.loadWithResourceName(resourceName)

자바

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override public void onSuccess(Place place) { ... }
    
        @Override public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId);
      
// Load the fragment with a resource name.
// fragment.loadWithResourceName(resourceName);

Kotlin

        import android.os.Bundle
        import android.util.Log
        import android.view.View
        import android.widget.FrameLayout
        import androidx.appcompat.app.AppCompatActivity
        import com.google.android.gms.maps.CameraUpdateFactory
        import com.google.android.gms.maps.GoogleMap
        import com.google.android.gms.maps.OnMapReadyCallback
        import com.google.android.gms.maps.SupportMapFragment
        import com.google.android.gms.maps.model.LatLng
        import com.google.android.gms.maps.model.PointOfInterest
        import com.google.android.libraries.places.api.Places
        import com.google.android.libraries.places.api.net.PlacesClient
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment.Companion.ALL_CONTENT
        import com.google.android.libraries.places.widget.model.Orientation
        
        class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
            private var googleMap: GoogleMap? = null
            private val orientation: Orientation = Orientation.HORIZONTAL
            private lateinit var placesClient: PlacesClient
            private var placeDetailsFragment: PlaceDetailsCompactFragment? = null
        
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContentView(R.layout.activity_main)
        
                // --- Initialize Places SDK ---
                val apiKey = BuildConfig.PLACES_API_KEY
                if (apiKey.isEmpty()) {
                    Log.e("Places test", "No api key")
                    finish()
                    return
                }
                Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)
                placesClient = Places.createClient(this)
                // -----------------------------
        
                val mapFragment = supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
                mapFragment?.getMapAsync(this)
            }
        
            override fun onMapReady(map: GoogleMap) {
                googleMap = map
                val sydney = LatLng(-33.8688, 151.2093)
                val zoomLevel = 13f
                googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, zoomLevel))
                googleMap?.setOnPoiClickListener(this)
            }
        
            override fun onPoiClick(poi: PointOfInterest) {
                val placeId = poi.placeId
                Log.d("POI Click", "Place ID: $placeId")
                showPlaceDetailsFragment(placeId)
            }
        
            private fun showPlaceDetailsFragment(placeId: String) {
                placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }

장소 세부정보 맞춤설정

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

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

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialsTheme">
    <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>

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

테마 속성	사용
색상
`placesColorSurface`	컨테이너 및 대화상자 배경
`placesColorOnSurface`	제목, 대화상자 콘텐츠
`placesColorOnSurfaceVariant`	장소 정보
`placesColorPrimary`	링크
`placesColorOutlineDecorative`	컨테이너 테두리
`placesColorSecondaryContainer`	버튼 배경
`placesColorOnSecondaryContainer`	버튼 텍스트 및 아이콘
`placesColorPositive`	'지금 열림' 라벨을 배치합니다.
`placesColorNegative`	'폐쇄됨' 장소 라벨이 변경됨
`placesColorInfo`	장애인 이용 가능 입구 아이콘

서체
`placesTextAppearanceHeadlineMedium`	대화상자 제목
`placesTextAppearanceTitleSmall`	장소 이름
`placesTextAppearanceBodyMedium`	대화상자 콘텐츠
`placesTextAppearanceBodySmall`	장소 정보
`placesTextAppearanceLabelLarge`	버튼 라벨

지역
`placesCornerRadius`	컨테이너 모서리

Google 지도 브랜드 저작자 표시
`placesColorAttributionLight`	밝은 테마 Google 지도 저작자 표시 및 공개 버튼 (흰색, 회색, 검은색의 enum)
`placesColorAttributionDark`	어두운 테마 Google 지도 저작자 표시 및 공개 버튼 (흰색, 회색, 검은색의 enum)

너비 및 높이

세로 모드 보기의 경우 권장 너비는 180dp~300dp입니다. 가로 뷰의 경우 권장 너비는 180dp~500dp입니다. 뷰가 160dp 미만이면 올바르게 표시되지 않을 수 있습니다.

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

기여 분석 색상

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

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

밝은 테마: 흰색, 회색, 검은색의 enum이 있는 placesColorAttributionLight
어두운 테마: 흰색, 회색, 검은색의 enum이 있는 placesColorAttributionDark

맞춤설정 예시

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

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

이 샘플에서는 콘텐츠 옵션을 맞춤설정합니다.

  val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
    orientation,
    listOf(
        Content.ADDRESS,
        Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
    ),
    R.style.CustomizedPlaceDetailsTheme
)

이 샘플은 모든 Content 옵션을 맞춤설정합니다.

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

장소 세부정보 구성요소

결제

앱에 장소 세부정보 추가

Kotlin

자바

장소 세부정보 위젯을 로드하는 전체 코드 보기

Kotlin

장소 세부정보 맞춤설정

너비 및 높이

기여 분석 색상

맞춤설정 예시