Composant Place Details

Le composant "Place Details" (Détails du lieu) du kit d'UI Places vous permet d'ajouter un composant d'UI individuel qui affiche les détails du lieu dans votre application.

Composant compact des détails sur le lieu

La PlaceDetailsCompactView affiche les détails d'un lieu sélectionné en utilisant un espace minimal. Cela peut être utile dans une fenêtre d'informations mettant en avant un lieu sur une carte, dans une expérience sur les réseaux sociaux (par exemple, pour partager un lieu dans une discussion), comme suggestion pour sélectionner votre position actuelle ou dans un article multimédia pour faire référence au lieu dans Google Maps. PlaceDetailsCompactView peut afficher le nom, l'adresse, la note, le type, le prix, l'icône d'accessibilité, l'état d'ouverture et une seule photo.

Le composant "Détails du lieu" peut être utilisé indépendamment ou en conjonction avec d'autres API et services Google Maps Platform. Le composant accepte un ID de lieu ou des coordonnées de latitude/longitude, et renvoie des informations Place Details affichées.

Le composant "Détails du lieu" offre une vue compacte, qui peut être affichée horizontalement ou verticalement.

Vous pouvez configurer le contenu et le style visuel du composant "Place Details" en fonction de votre cas d'utilisation et de vos consignes relatives à la marque visuelle. Vous pouvez personnaliser l'apparence des informations sur le lieu en fournissant des valeurs PlacesMaterialTheme personnalisées. Vous pouvez également personnaliser les champs de détails du lieu inclus en spécifiant une liste d'entrées PlaceDetailsCompactView, chacune correspondant à une information affichée sur le lieu.

Facturation

Lorsque vous utilisez l'UI Kit "Informations sur le lieu", vous êtes facturé à chaque appel de la méthode PlaceDetailsQuery. Si vous chargez le même lieu plusieurs fois, chaque requête vous est facturée.

Ajouter des informations sur un lieu à votre application

Le composant "Place Details" est une vue d'interface utilisateur Swift. Vous pouvez personnaliser l'apparence des informations sur les lieux en fonction de vos besoins et de l'apparence de votre application.

Vous pouvez spécifier l'orientation (horizontale ou verticale), les forçages de thème et le contenu. Les options de contenu sont les suivantes : contenu multimédia, adresse, note, prix, type, entrée accessible, lien Maps et lien vers les itinéraires. En savoir plus sur la personnalisation

Par défaut, la position est verticale. Si vous souhaitez une mise en page horizontale, spécifiez orientation: .horizontal dans PlaceDetailsCompactView.

Cet exemple crée une vue compacte avec une mise en page verticale.

Swift

      
  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

Cet exemple crée une vue compacte avec une mise en page horizontale.

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

Personnaliser les détails du lieu

Le kit d'UI Places propose une approche de système de conception pour la personnalisation visuelle, basée sur Material Design (avec quelques modifications spécifiques à Google Maps). Consultez la documentation de référence de Material Design sur la couleur et la typographie. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Options de personnalisation des informations sur les lieux

Vous pouvez personnaliser les styles suivants:

Largeur et hauteur

Pour les vues verticales, la largeur recommandée est comprise entre 180 pixels et 300 pixels. Pour les vues horizontales, la largeur recommandée est comprise entre 180 pixels et 500 pixels.

Il est recommandé de ne pas définir de hauteur. Le contenu de la fenêtre pourra ainsi définir la hauteur, ce qui permettra d'afficher toutes les informations.

Couleurs d'attribution

Les Conditions d'utilisation de Google Maps vous obligent à utiliser l'une des trois couleurs de la marque pour l'attribution Google Maps. Cette attribution doit être visible et accessible lorsque des modifications de personnalisation ont été apportées.

Nous proposons trois couleurs de marque au choix, qui peuvent être définies indépendamment pour les thèmes clair et sombre:

  • Thème clair: attributionColorLight avec énumérations pour le blanc, le gris et le noir.
  • Thème sombre: attributionColorDark avec énumérations pour le blanc, le gris et le noir.

Exemple de personnalisation

Cet exemple montre comment personnaliser les attributs de style par défaut.

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }