Componente Place Markers

Com o componente Place Markers, é possível criar anotações personalizáveis que mostram informações importantes do lugar diretamente no mapa. Você pode mostrar conteúdo como a classificação de um lugar, o tipo de lugar, o status aberto ou fechado, a faixa de preço ou um texto personalizado (por exemplo, um rótulo gerado por IA ou um número de itinerário). Isso oferece aos usuários uma experiência de exploração de mapas mais informativa sem exigir que eles toquem em um card de lugar detalhado.

O Ícones e texto disponíveis para marcadores de lugar

É possível mostrar um ícone de marcador e um texto opcional por PlaceMarker.

Os ícones disponíveis são:

  • type: o tipo de lugar.
  • none: sem ícone.
Os marcadores de texto disponíveis são:
  • rating: pontuação da classificação.
  • priceRange: faixa de preço (por exemplo, R$ 10 a R$ 20).
  • openStatus: se uma empresa está aberta ou fechada.
  • custom: texto personalizado (por exemplo, "POPULAR").

Faça referência ao lugar usando um ID de lugar (.placeID), um nome de recurso (.resourceName) ou coordenadas geográficas (.coordinate).

Requisitos de exibição e atribuição

Quando os marcadores de mapa do Kit de Interface do Places são mostrados, eles não podem aparecer isolados. Eles precisam ser interativos e abrir um componente de Place Details ou uma caixa de luz associada ao clicar ou tocar para fornecer a marca do Google, a atribuição do colaborador e os fluxos de denúncia de um problema necessários.

Consulte nossos requisitos de atribuição de fotos e avaliações para cenários em que o espaço é limitado.

Exemplos de marcador de lugar

Personalizações básicas de marcadores

O exemplo de código a seguir demonstra personalizações 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")
    )
  }
}

Personalizar a aparência do marcador

O exemplo de código a seguir demonstra como usar modificadores de visualização declarativos do SwiftUI para personalizar a aparência do marcador. Para isso, ele oculta o bico triangular do balão de fala e fornece um callback de toque para acionar ações personalizadas do app quando o usuário toca no 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)")
    }
  }
}

Processar callbacks

O exemplo de código a seguir demonstra como usar callbacks para processar erros de renderização bem-sucedida ou de dados ausentes.

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

Integrar com o SDK do Maps

O exemplo de código a seguir demonstra como incorporar PlaceMarker em um SDK do Maps para iOS GMSMarker usando a classe auxiliar PlaceMarkerHostingView para envolver 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
}