Place Markers コンポーネント

Place Markers コンポーネントを使用すると、地図上に場所の重要な情報を直接表示する、カスタマイズ可能な地図の注釈を作成できます。場所の評価、場所のタイプ、営業中または閉店中のステータス、価格帯、カスタム テキスト（AI 生成ラベルや旅程番号など）などのコンテンツを表示できます。これにより、ユーザーは詳細なプレイスカードをタップしなくても、より多くの情報を含む地図を探索できます。

場所マーカーに使用できるアイコンとテキスト

PlaceMarker ごとに 1 つのマーカー アイコンとオプションのマーカー テキストを表示できます。

使用可能なアイコンは次のとおりです。

  • type: 場所のタイプ。
  • none: アイコンなし。
使用できるテキスト マーカーは次のとおりです。
  • rating: 評価スコア。
  • priceRange: 価格帯（例: $10 ～ 20）。
  • openStatus: ビジネスが営業中か休業中か。
  • custom: カスタム テキスト（「人気」など）。

プレイス ID（.placeID）、リソース名（.resourceName）、地理座標（.coordinate）を使用して場所を参照します。

表示と帰属表示の要件

Places UI キットの地図マーカーが表示される場合、マーカーが単独で表示されてはなりません。インタラクティブで、クリックまたはタップすると関連する Place Details コンポーネントまたはライトボックスが開き、必要な Google ブランド、投稿者の帰属表示、問題の報告フローを提供する必要があります。

スペースが限られている場合のシナリオについては、写真とクチコミの帰属に関する要件をご覧ください。

Place Marker の例

マーカーの基本的なカスタマイズ

次のコード例は、プレイスマーカーの基本的なカスタマイズを示しています。

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 をラップし、Google Maps SDK for iOS の 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
}