Plattform auswählen: Android iOS JavaScript

„Place Details“-Komponente

Mit der „Place Details“-Komponente des Places UI Kits können Sie Ihrer App eine einzelne UI-Komponente hinzufügen, in der Ortsdetails angezeigt werden. Diese Komponente ist anpassbar.

Kompakte Komponente „Ortsdetails“

Die „Place Details“-Komponente kann unabhängig oder in Verbindung mit anderen APIs und Diensten der Google Maps Platform verwendet werden. Die Komponente verwendet entweder eine Orts-ID, einen Ressourcennamen oder Breiten-/Längenkoordinaten und gibt gerenderte „Place Details“-Informationen zurück.

Die „Place Details“-Komponente ist vollständig anpassbar. Sie können Schriftarten, Farben und Eckradien an Ihren Anwendungsfall und die visuellen Markenrichtlinien anpassen. Sie können die Darstellung der Ortsdetails anpassen, indem Sie benutzerdefinierte PlacesMaterialTheme-Werte angeben. Sie können auch festlegen, welche Ortsdetailsfelder enthalten sein sollen, indem Sie eine Liste von PlaceDetailsCompactView-Einträgen angeben. Jeder Eintrag entspricht einer Information, die zum Ort angezeigt wird.

Layoutvarianten

Die „Place Details“-Komponente unterstützt zwei Hauptlayoutvarianten:

  • Kompakt:Ein Layout zur Vorschau wichtiger Informationen.
  • Vollständig:Ein umfassendes Layout, in dem alle verfügbaren Ortsdetails angezeigt werden.

Das kompakte Layout kann entweder vertikal oder horizontal angezeigt werden. So können Sie die Komponente in verschiedene Designlayouts und Bildschirmgrößen einbinden. Das vollständige Layout kann nur vertikal angezeigt werden.

horizontale und vertikale Layouts
Horizontale und vertikale Layouts

Mit der „Place Details“-Komponente haben Sie detaillierte Kontrolle über die in der Komponente angezeigten Inhalte. Jedes Element (z. B. Fotos, Rezensionen und Kontaktdaten) kann einzeln ein- oder ausgeblendet werden. So lassen sich die Darstellung und die Informationsdichte der Komponente genau anpassen.

Inhaltsoptionen für Ortsdetails
Optionen für die Inhaltsanzeige

Kompaktansicht von Place Details

In der Kompaktansicht von Place Details (PlaceDetailsCompactView) werden Details zu einem ausgewählten Ort auf kleinem Raum gerendert. Das kann in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in sozialen Medien, z. B. wenn ein Standort in einem Chat geteilt wird, als Vorschlag für die Auswahl des aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen.

Place Details Vollansicht

Die Vollansicht von Ortsdetails (PlaceDetailsView) bietet mehr Platz für die Anzeige von Ortsdetails und ermöglicht die Anzeige weiterer Arten von Informationen.

Optionen für die Inhaltsanzeige

Mit den Enums in PlaceDetailsCompactContent oder PlaceDetailsContent können Sie angeben, welche Inhalte angezeigt werden sollen.

Kompaktansicht Vollansicht
  • Foto von einem Ort
  • Vollbild-Mediengalerie aktiviert, wenn eine Medien-Lightbox vorhanden ist
  • Adresse des Orts
  • Bewertung und Anzahl der Bewertungen
  • Typ des Orts
  • Preis
  • Informationen zum barrierefreien Zugang
  • Status „Jetzt geöffnet“
  • Fotocollage des Orts
  • Adresse des Orts
  • Bewertung und Anzahl der Bewertungen
  • Typ des Orts
  • Preis
  • Informationen zu Bedienungshilfen
  • Status „Jetzt geöffnet“
  • Öffnungszeiten
  • Redaktionelle Zusammenfassung
  • Website
  • Telefonnummer
  • Rezensionen auf einem separaten Tab gerendert
  • Plus Code
  • Liste der Funktionen auf einem separaten Tab gerendert
  • Typspezifische Highlights, z. B. Benzinpreise für Tankstellen
  • Stoßzeiten

Abrechnung

Bei Verwendung des Place Details UI Kits wird Ihnen jeder Aufruf der Methode PlaceDetailsQuery in Rechnung gestellt. Wenn Sie denselben Ort mehrmals laden, wird Ihnen jede Anfrage in Rechnung gestellt.

Ortsdetails zu Ihrer App hinzufügen

Die „Place Details“-Komponente ist eine Swift UI-Ansicht. Sie können das Aussehen und Verhalten der Ortsdetails an Ihre Bedürfnisse und das Erscheinungsbild Ihrer App anpassen. Weitere Informationen zur Anpassung.

Sie können die „Place Details“-Komponente mit einer Orts-ID, einem Ressourcennamen oder Breiten-/Längenkoordinaten laden. Sie können eine oder mehrere Methoden auswählen. Legen Sie identifier in der PlaceDetailsQuery-Struktur auf .placeID, .resourceName oder .coordinate fest.

Die Standardposition für die Kompaktansicht ist vertikal. Wenn Sie ein horizontales Layout wünschen, geben Sie in PlaceDetailsCompactView orientation: .horizontal an. Optional können Sie zur Klarheit auch orientation: .vertical angeben. Die Vollansicht kann nur vertikal angezeigt werden.

Beispiele finden Sie im Abschnitt Beispiele für die „Place Details“-Komponente.

Visuelle Darstellung anpassen

Benutzerdefinierte Stile

Sie können die Farben, Typografie, Abstände, Rahmen und Ecken Ihrer „Place Details“-Komponente anpassen.

Das Places UI Kit bietet einen Designsystemansatz für die visuelle Anpassung, der in etwa auf Material Design basiert (mit einigen Google Maps-spezifischen Änderungen). Weitere Informationen finden Sie in der Material Design-Referenz zu Farben und Typografie. Standardmäßig entspricht der Stil der visuellen Designsprache von Google Maps.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

Weitere Informationen zu Stilen finden Sie im Abschnitt Benutzerdefinierte Stile.

Breite und Höhe anpassen

Kompaktansichten

Empfohlene Breiten:

  • Vertikale Ausrichtung: zwischen 180 und 300 Pixel
  • Horizontale Ausrichtung: zwischen 180 und 500 Pixel

Es empfiehlt sich, für Kompaktansichten keine Höhe festzulegen. So kann die Höhe durch den Inhalt des Fensters bestimmt werden, sodass alle Informationen angezeigt werden.

Bei Breiten unter 160 Pixeln werden die Inhalte möglicherweise nicht richtig angezeigt.

Vollansichten

Für Vollansichten wird eine Breite zwischen 250 und 450 Pixeln empfohlen. Bei einer Breite von weniger als 250 Pixeln werden die Inhalte möglicherweise nicht richtig angezeigt.

Sie können die Höhe der Komponente festlegen: Die vertikale Ansicht der Ortsdetails wird innerhalb des zugewiesenen Bereichs vertikal gescrollt.

Es empfiehlt sich, für Vollansichten eine Höhe festzulegen. So kann der Inhalt im Fenster richtig gescrollt werden.

Beispiele für die „Place Details“-Komponente

Vollansicht mit vertikalem Layout erstellen

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Kompaktansicht mit horizontalem Layout erstellen

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Vollansicht mit vertikalem Layout erstellen

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Stilattribute anpassen

In diesem Beispiel wird gezeigt, wie Sie die Standardstilattribute einer Voll- oder Kompaktansicht anpassen.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Bestimmte Inhalte anzeigen

In diesem Beispiel wird eine Kompaktansicht erstellt, in der nur Medien, Adresse, Bewertung und Typ angezeigt werden. Dabei wird das im vorherigen Beispiel erstellte Design verwendet.

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }