Komponen Penanda Tempat

Komponen Penanda Tempat memungkinkan Anda membuat anotasi peta yang dapat disesuaikan yang menampilkan informasi Tempat utama langsung di peta. Anda dapat menampilkan konten seperti rating tempat, jenis tempat, status buka atau tutup, rentang harga, atau teks kustom (misalnya, label buatan AI atau nomor rencana perjalanan). Hal ini memberikan pengalaman eksplorasi peta yang lebih informatif kepada pengguna Anda tanpa mengharuskan mereka mengetuk kartu tempat yang mendetail.

Ikon dan teks yang tersedia untuk penanda tempat

Anda dapat menampilkan satu ikon penanda dan teks penanda opsional per PlaceMarker.

Ikon yang tersedia adalah:

  • type: Jenis tempat.
  • none: Tidak ada ikon.
Penanda teks yang tersedia adalah:
  • rating: Skor rating.
  • priceRange: Rentang harga (misalnya, Rp100.000-200.000).
  • openStatus: Apakah bisnis buka atau tutup.
  • custom: Teks kustom (misalnya, "POPULER").

Merujuk tempat menggunakan ID Tempat (.placeID), Nama resource (.resourceName), atau koordinat geografis (.coordinate).

Persyaratan tampilan dan atribusi

Saat penanda peta Places UI Kit ditampilkan, penanda tidak boleh muncul secara terpisah. Komponen ini harus interaktif dan membuka Komponen Detail Tempat atau Lightbox terkait saat diklik atau diketuk untuk memberikan branding Google, atribusi kontributor, dan alur Laporkan Masalah yang diperlukan.

Lihat persyaratan atribusi foto dan ulasan kami untuk skenario saat ruang terbatas.

Contoh Penanda Tempat

Penyesuaian penanda dasar

Contoh kode berikut menunjukkan penyesuaian penanda tempat dasar.

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

Menyesuaikan tampilan penanda

Contoh kode berikut menunjukkan cara menggunakan pengubah tampilan SwiftUI deklaratif untuk menyesuaikan tampilan penanda dengan menyembunyikan paruh balon ucapan segitiga dan menyediakan callback ketuk untuk memicu tindakan aplikasi kustom saat pengguna mengetuk penanda.

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

Menangani callback

Contoh kode berikut menunjukkan cara menggunakan callback untuk menangani error rendering yang berhasil atau data yang tidak ada.

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

Mengintegrasikan dengan Maps SDK

Contoh kode berikut menunjukkan cara menyematkan PlaceMarker dalam GMSMarker Google Maps SDK for iOS menggunakan class helper PlaceMarkerHostingView untuk membungkus 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
}