„Place Markers“-Komponente

Mit der Komponente „Ortsmarkierungen“ können Sie benutzerdefinierte Kartenanmerkungen erstellen, in denen wichtige Ortsinformationen direkt auf der Karte angezeigt werden. Sie können Inhalte wie die Bewertung eines Orts, den Ortstyp, den Status „Geöffnet“ oder „Geschlossen“, die Preisspanne oder benutzerdefinierten Text (z. B. ein KI-generiertes Label oder eine Routennummer) anzeigen. So können Nutzer die Karte besser erkunden, ohne auf eine detaillierte Ortskarte tippen zu müssen.

Verfügbare Symbole und Texte für Ortsmarkierungen

Pro PlaceMarker können Sie ein Markierungssymbol und optionalen Markierungstext anzeigen lassen.

Folgende Symbole sind verfügbar:

  • type: Der Ortstyp.
  • none: Kein Symbol.
Folgende Textmarkierungen sind verfügbar:
  • rating: Bewertungs-Score.
  • priceRange: Preisspanne (z. B. 10–20 €)
  • openStatus: Gibt an, ob ein Unternehmen geöffnet oder geschlossen ist.
  • custom: Benutzerdefinierter Text, z. B. „BELIEBT“.

Verweisen Sie auf den Ort mit einer Orts-ID (.placeID), einem Ressourcennamen (.resourceName) oder geografischen Koordinaten (.coordinate).

Anzeige- und Quellenangabeanforderungen

Wenn Kartenmarkierungen des Places UI Kit angezeigt werden, dürfen sie nicht isoliert dargestellt werden. Sie müssen interaktiv sein und beim Klicken oder Tippen eine zugehörige Place Details-Komponente oder eine Lightbox öffnen, um das erforderliche Google-Branding, die Quellenangabe für Mitwirkende und die Abläufe zum Melden von Problemen bereitzustellen.

Hier finden Sie Informationen zu den Anforderungen an die Quellenangabe für Fotos und Rezensionen für Szenarien, in denen der Platz begrenzt ist.

Beispiele für „Markierung platzieren“

Einfache Anpassung von Markierungen

Das folgende Codebeispiel zeigt grundlegende Anpassungen von Platzhaltern.

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

Darstellung von Markierungen anpassen

Das folgende Codebeispiel zeigt, wie Sie deklarative SwiftUI-Ansichtsmodifikatoren verwenden, um das Erscheinungsbild von Markierungen anzupassen. Dazu wird die dreieckige Sprechblase ausgeblendet und ein Tipp-Callback bereitgestellt, um benutzerdefinierte App-Aktionen auszulösen, wenn der Nutzer auf die Markierung tippt.

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

Callbacks verarbeiten

Das folgende Codebeispiel zeigt, wie Sie mit Callbacks erfolgreiches Rendern oder Fehler aufgrund fehlender Daten behandeln.

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

Integration in das Maps SDK

Das folgende Codebeispiel zeigt, wie Sie PlaceMarker in ein GMSMarker des Google Maps SDK for iOS einbetten. Dazu wird die Helper-Klasse PlaceMarkerHostingView verwendet, um PlaceMarker zu umschließen.

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
}