Componente Place Markers

El componente Place Markers te permite crear anotaciones de mapa personalizables que muestran información clave de lugares directamente en el mapa. Puedes mostrar contenido como la calificación de un lugar, el tipo de lugar, el estado de abierto o cerrado, el intervalo de precios o texto personalizado (por ejemplo, una etiqueta generada por IA o un número de itinerario). Esto les brinda a los usuarios una experiencia de exploración del mapa más informativa sin necesidad de presionar una tarjeta de lugar detallada.

Íconos y texto disponibles para los marcadores de lugar

Puedes mostrar un ícono de marcador y texto de marcador opcional por cada PlaceMarker.

Los íconos disponibles son los siguientes:

  • type: Es el tipo de lugar.
  • none: Sin ícono.
Los marcadores de texto disponibles son los siguientes:
  • rating: Puntuación de calificación.
  • priceRange: Intervalo de precios (por ejemplo, USD 10 a 20).
  • openStatus: Indica si una empresa está abierta o cerrada.
  • custom: Texto personalizado (por ejemplo, "POPULAR").

Haz referencia al lugar con un ID de lugar (.placeID), un nombre de recurso (.resourceName) o coordenadas geográficas (.coordinate).

Requisitos de visualización y atribución

Cuando se muestran los marcadores de mapa del kit de IU de Places, estos no deben aparecer de forma aislada. Deben ser interactivos y abrir un componente o una Lightbox de Place Details asociados cuando se haga clic o se presione para proporcionar la marca de Google requerida, la atribución del colaborador y los flujos de Report a Problem.

Consulta nuestros requisitos de atribución de fotos y opiniones para situaciones en las que el espacio es limitado.

Ejemplos de Place Marker

Personalizaciones básicas de los marcadores

En el siguiente ejemplo de código, se muestran personalizaciones básicas de marcadores de lugar.

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

Personaliza la apariencia del marcador

En el siguiente ejemplo de código, se muestra cómo usar modificadores de vista declarativos de SwiftUI para personalizar la apariencia del marcador ocultando el pico triangular de la burbuja de diálogo y proporcionar una devolución de llamada de toque para activar acciones personalizadas de la app cuando el usuario toca el marcador.

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

Controla las devoluciones de llamada

En el siguiente ejemplo de código, se muestra cómo usar devoluciones de llamada para controlar la renderización correcta o los errores de falta de datos.

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

Integración con el SDK de Maps

En el siguiente ejemplo de código, se muestra cómo incorporar PlaceMarker en un GMSMarker del SDK de Maps para iOS con la clase de ayuda PlaceMarkerHostingView para encapsular 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
}