Componente Place Markers

Il componente Indicatori di luogo ti consente di creare annotazioni personalizzabili della mappa che mostrano le informazioni chiave del luogo direttamente sulla mappa. Puoi visualizzare contenuti come la valutazione di un luogo, il tipo di luogo, lo stato di apertura o chiusura, la fascia di prezzo o il testo personalizzato (ad esempio, un'etichetta generata con l'AI o un numero di itinerario). In questo modo, gli utenti possono esplorare la mappa in modo più informativo senza dover toccare una scheda dettagliata del luogo.

Icone e testo disponibili per i segnaposto

Puoi visualizzare un'icona indicatore e un testo indicatore facoltativo per ogni PlaceMarker.

Le icone disponibili sono:

  • type: il tipo di luogo.
  • none: Nessuna icona.
I marcatori di testo disponibili sono:
  • rating: punteggio di valutazione.
  • priceRange: Fascia di prezzo (ad esempio, 10-20 €).
  • openStatus: indica se un'attività è aperta o chiusa.
  • custom: Testo personalizzato (ad esempio "POPULAR").

Fai riferimento al luogo utilizzando un ID luogo (.placeID), un nome risorsa (.resourceName) o coordinate geografiche (.coordinate).

Requisiti di visualizzazione e attribuzione

Quando vengono visualizzati i marcatori della mappa di Places UI Kit, questi non devono apparire isolati. Devono essere interattivi e aprire un componente o una lightbox con i dettagli del luogo associati quando si fa clic o si tocca per fornire il branding Google richiesto, l'attribuzione dei contributi e i flussi di segnalazione di un problema.

Consulta i requisiti di attribuzione di foto e recensioni per gli scenari in cui lo spazio è limitato.

Esempi di segnaposto

Personalizzazioni di base degli indicatori

Il seguente esempio di codice mostra le personalizzazioni di base dei segnaposto.

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

Personalizzare l'aspetto dei marcatori

Il seguente esempio di codice mostra come utilizzare i modificatori di visualizzazione SwiftUI dichiarativi per personalizzare l'aspetto del marker nascondendo il becco triangolare del fumetto e fornire un callback di tocco per attivare azioni personalizzate dell'app quando l'utente tocca il marker.

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

Gestire i callback

Il seguente esempio di codice mostra come utilizzare i callback per gestire il rendering riuscito o gli errori relativi ai dati mancanti.

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

Esegui l'integrazione con Maps SDK

Il seguente esempio di codice mostra come incorporare PlaceMarker all'interno di un GMSMarker di Google Maps SDK per iOS utilizzando la classe helper PlaceMarkerHostingView per eseguire il wrapping di 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
}