Composant Place Markers

Le composant "Repères de lieux" vous permet de créer des annotations de carte personnalisables qui affichent des informations clés sur les lieux directement sur la carte. Vous pouvez afficher des contenus tels que la note d'un lieu, son type, son état (ouvert ou fermé), sa gamme de prix ou du texte personnalisé (par exemple, un libellé généré par IA ou un numéro d'itinéraire). Vos utilisateurs bénéficient ainsi d'une expérience d'exploration de carte plus informative sans avoir à appuyer sur une fiche détaillée d'un lieu.

Icônes et texte disponibles pour les repères de lieux

Vous pouvez afficher une icône de repère et un texte de repère facultatif par PlaceMarker.

Voici les icônes disponibles :

  • type : type de lieu.
  • none : aucune icône.
Voici les repères de texte disponibles :
  • rating : score de la note.
  • priceRange : gamme de prix (par exemple, 10 € à 20 €).
  • openStatus : indique si un établissement est ouvert ou fermé.
  • custom : texte personnalisé (par exemple, "POPULAIRE").

Faites référence au lieu à l'aide d'un ID de lieu (.placeID), d'un nom de ressource (.resourceName) ou de coordonnées géographiques (.coordinate).

Exigences concernant l'affichage et l'attribution

Lorsque des repères de carte du Kit UI pour Places sont affichés, ils ne doivent pas apparaître de manière isolée. Ils doivent être interactifs et ouvrir un composant Place Details ou une lightbox associés lorsqu'un utilisateur clique ou appuie dessus. Cela permet de fournir la marque Google requise, l'attribution des contributeurs et les flux "Signaler un problème".

Consultez nos exigences concernant l'attribution des photos et des avis pour les cas où l'espace est limité.

Exemples de repères

Personnalisation de base des repères

L'exemple de code suivant illustre les personnalisations de base des repères de lieux.

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

Personnaliser l'apparence des repères

L'exemple de code suivant montre comment utiliser des modificateurs de vue SwiftUI déclaratifs pour personnaliser l'apparence des repères en masquant le bec triangulaire de la bulle de dialogue et en fournissant un rappel d'appui pour déclencher des actions d'application personnalisées lorsque l'utilisateur appuie sur le repère.

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

Gérer les rappels

L'exemple de code suivant montre comment utiliser des rappels pour gérer les erreurs de rendu ou les données manquantes.

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

Intégrer le SDK Maps

L'exemple de code suivant montre comment intégrer PlaceMarker dans un GMSMarker du SDK Google Maps pour iOS à l'aide de la classe d'assistance PlaceMarkerHostingView pour encapsuler 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
}