Composant Place Details

Le composant Place Details du Kit UI pour Places vous permet d'ajouter un composant d'interface utilisateur individuel qui affiche les détails sur le lieu dans votre application. Ce composant est personnalisable.

Le composant Place Details peut être utilisé indépendamment ou en association avec d'autres API et services Google Maps Platform. Le composant accepte un ID de lieu, un nom de ressource ou des coordonnées de latitude/longitude, et renvoie des informations rendues sur le lieu.

Le composant Place Details est entièrement personnalisable. Vous pouvez ainsi modifier les polices, les couleurs et les rayons des angles pour les adapter à votre cas d'utilisation et à vos consignes visuelles. Vous pouvez personnaliser l'apparence des détails sur le lieu en fournissant des valeurs PlacesMaterialTheme personnalisées. Vous pouvez également personnaliser les champs de détails sur le lieu inclus en spécifiant une liste d'entrées PlaceDetailsCompactView, chacune correspondant à une information affichée sur le lieu.

Variantes de mise en page

Le composant Place Details est compatible avec deux variantes de mise en page principales :

• Compacte : mise en page permettant de prévisualiser les informations clés.
• Complète : mise en page complète affichant tous les détails disponibles sur le lieu.

La mise en page compacte peut être affichée en orientation verticale ou horizontale. Vous pouvez ainsi intégrer le composant dans différentes mises en page et tailles d'écran. La mise en page complète ne peut être affichée que verticalement.

Le composant Place Details vous offre un contrôle précis sur le contenu affiché dans le composant. Chaque élément (comme les photos, les avis et les coordonnées) peut être affiché ou masqué individuellement, ce qui permet de personnaliser précisément l'apparence des composants et la densité des informations.

Affichage compact des détails sur le lieu

L'affichage compact des détails sur le lieu (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 évidence un lieu sur une carte, dans une expérience de réseau social comme le partage d'un lieu dans une discussion, comme suggestion pour sélectionner votre position actuelle ou dans un article de presse pour faire référence au lieu sur Google Maps.

Affichage complet des détails sur le lieu

L'affichage complet des détails sur le lieu (PlaceDetailsView) offre une plus grande surface pour afficher les informations détaillées sur le lieu et vous permet d'afficher davantage de types d'informations.

Options d'affichage du contenu

Vous pouvez spécifier le contenu à afficher à l'aide des énumérations dans PlaceDetailsCompactContent ou PlaceDetailsContent.

Facturation

Lorsque vous utilisez le Kit UI pour Place Details, vous êtes facturé chaque fois que la méthode PlaceDetailsQuery est appelée. Si vous chargez plusieurs fois le même lieu, vous êtes facturé pour chaque requête.

Ajouter des détails sur le lieu à votre application

Le composant Place Details est une vue d'interface utilisateur Swift. Vous pouvez personnaliser l'apparence des informations détaillées sur le lieu en fonction de vos besoins et de l'apparence de votre application. En savoir plus sur la personnalisation.

Vous pouvez choisir de charger le composant Place Details avec un ID de lieu, un nom de ressource ou des coordonnées de latitude/longitude. Vous pouvez choisir n'importe quelle méthode, ou plusieurs. Définissez le identifier dans la structure PlaceDetailsQuery sur .placeID, .resourceName, ou .coordinate.

La position par défaut de l'affichage compact est verticale. Si vous souhaitez une mise en page horizontale, spécifiez orientation: .horizontal dans PlaceDetailsCompactView. Vous pouvez également spécifier orientation: .vertical pour plus de clarté. L'affichage complet ne peut être affiché que verticalement.

Consultez des exemples dans la section Exemples de composants Place Details.

Personnaliser l'apparence visuelle

Style personnalisé

Vous pouvez personnaliser les couleurs, la typographie, l'espacement, les bordures et les angles de votre composant Place Details.

Le Kit UI pour 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 référence de Material Design pour les couleurs et la typographie. Par défaut, le style respecte le langage de conception visuelle de Google Maps.

Le Kit UI pour Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes sombre et clair. Pour personnaliser le thème sombre, ajoutez des valeurs pour .dark et attribution.darkModeColor à votre thème personnalisé.

Pour en savoir plus sur les styles, consultez la section Style personnalisé.

Personnalisation de la largeur et de la hauteur

Affichages compacts

Largeurs recommandées :

• Orientation verticale : entre 180 et 300 pixels.
• Orientation horizontale : entre 180 et 500 pixels.

Il est recommandé de ne pas définir de hauteur pour les affichages compacts. Cela permettra au contenu de la fenêtre de définir la hauteur, ce qui permettra d'afficher toutes les informations.

Les largeurs inférieures à 160 pixels peuvent ne pas s'afficher correctement.

Affichages complets

Pour les affichages complets, la largeur recommandée est comprise entre 250 et 450 pixels. Une largeur inférieure à 250 pixels peut ne pas s'afficher correctement.

Vous pouvez définir la hauteur du composant : la vue verticale des détails sur le lieu défilera verticalement dans l'espace alloué.

Il est recommandé de définir une hauteur pour les affichages complets. Cela permettra au contenu de la fenêtre de défiler correctement.

Exemples de composants Place Details

Créer un affichage complet avec une mise en page verticale

  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
    )

Créer un affichage compact avec une mise en page horizontale

  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
    )

Créer un affichage complet avec une mise en page verticale

  @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
  )

Personnaliser les attributs de style

Cet exemple montre comment personnaliser les attributs de style par défaut d'un affichage complet ou compact.

Le Kit UI pour Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes sombre et clair. Pour personnaliser le thème sombre, ajoutez des valeurs pour .dark et attribution.darkModeColor à votre thème personnalisé.

  // 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
}

Afficher un contenu spécifique

Cet exemple crée un affichage compact qui n'affiche que les médias, l'adresse, la note et le type, à l'aide du thème créé dans l'exemple précédent.

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