장소 마커 구성요소

장소 마커 구성요소를 사용하면 지도에 주요 장소 정보를 직접 표시하는 맞춤설정 가능한 지도 주석을 만들 수 있습니다. 장소의 평점, 장소 유형, 영업 여부, 가격대 또는 맞춤 텍스트 (예: AI 생성 라벨 또는 일정 번호)와 같은 콘텐츠를 표시할 수 있습니다. 이를 통해 사용자는 세부적인 장소 카드를 탭하지 않고도 더 많은 정보를 제공하는 지도 탐색 환경을 이용할 수 있습니다.

장소 마커에 사용할 수 있는 아이콘 및 텍스트

PlaceMarker당 하나의 마커 아이콘과 선택적 마커 텍스트를 표시할 수 있습니다.

사용 가능한 아이콘은 다음과 같습니다.

  • type: 장소 유형입니다.
  • none: 아이콘이 없습니다.
사용 가능한 텍스트 마커는 다음과 같습니다.
  • rating: 평가 점수입니다.
  • priceRange: 가격대 (예: $10~20)
  • openStatus: 비즈니스가 영업 중인지 폐업했는지 여부입니다.
  • custom: 맞춤 텍스트 (예: '인기')

장소 ID (.placeID), 리소스 이름 (.resourceName) 또는 지리 좌표 (.coordinate)를 사용하여 장소를 참조합니다.

표시 및 저작자 표시 요구사항

장소 UI 키트 지도 마커가 표시될 때 마커가 단독으로 표시되어서는 안 됩니다. 클릭하거나 탭하면 연결된 장소 세부정보 구성요소 또는 라이트박스가 열려 필수 Google 브랜딩, 참여자 저작자 표시, 문제 신고 흐름을 제공해야 합니다.

공간이 제한된 시나리오의 경우 사진 및 리뷰 저작자 표시 요구사항을 참고하세요.

장소 마커 예

기본 마커 맞춤설정

다음 코드 예에서는 기본 장소 마커 맞춤설정을 보여줍니다.

Swift

import GooglePlacesSwift
import SwiftUI

@MainActor
struct DefaultMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
    )
  }
}

@MainActor
struct RatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .rating
    )
  }
}

@MainActor
struct TypeAndRatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .type,
      markerText: .rating
    )
  }
}


@MainActor
struct PriceRangeMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME"),
      markerIcon: .none,
      markerType: .priceRange
    )
  }
}


@MainActor
struct OpenStatusMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.coordinate(CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)),
      markerIcon: .icon,
      markerText: .openStatus
    )
  }
}
@MainActor
struct PhotoMarker: View {
    PlaceMarker(
        identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME")
        markerIcon =.Photo
    )
}


@MainActor
struct CustomMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerType: .custom(label: "3")
    )
  }
}

마커 디자인 맞춤설정

다음 코드 예에서는 선언적 SwiftUI 뷰 수정자를 사용하여 삼각형 말풍선 부리를 숨겨 마커 모양을 맞춤설정하고 사용자가 마커를 탭할 때 맞춤 앱 작업을 트리거하는 탭 콜백을 제공하는 방법을 보여줍니다.

Swift

@MainActor
struct ModifierStyleMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: .placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .openStatus,
      configuration: PlaceMarkerConfiguration(beakPresence: false)
    )
    .onTap { placeID in
      print("Marker tapped for place: \(placeID)")
    }
  }
}

콜백 처리

다음 코드 예에서는 콜백을 사용하여 렌더링 성공 또는 데이터 누락 오류를 처리하는 방법을 보여줍니다.

Swift

import GooglePlacesSwift
import SwiftUI


@MainActor
struct StatusHandlingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
      markerText: .priceRange,
    )
    /// Triggered when place data is successfully fetched or when data fetching fails or 
    /// required data is missing for the place..
    .onLoad { result in
        if let place = result.place {
          print("Marker successfully loaded for place ID: \(place.placeID)")
        } else if let error = result.error {
          print("Failed to load marker: \(error)")
      }
    }
  }
}

Maps SDK와 통합

다음 코드 예에서는 PlaceMarkerHostingView 도우미 클래스를 사용하여 PlaceMarker을 래핑하여 iOS용 Maps SDK GMSMarker 내에 PlaceMarker을 삽입하는 방법을 보여줍니다.

Swift

import GoogleMaps
import GooglePlacesSwift
import SwiftUI
import UIKit


func addPlaceMarker(to mapView: GMSMapView, placeID: String) {
  let marker = GMSMarker()
  let markerView = PlaceMarker(
    identifier: .placeID(placeID),
    markerType: .rating(showIcon: true),
  ).onLoad { result in
    switch Result
    case .success(let place)
      marker.position = place.coordinate
    case .error(let error) {
      print("Failed to load marker: \(error)")
    }
  }

  marker.iconView = PlaceMakerHostingView(markerView)
  marker.map = mapView
}