Componente Place Details

El componente Place Details del kit de IU de Places te permite agregar un componente de IU individual que muestre los detalles de un lugar en tu app.

El PlaceDetailsCompactView renderiza los detalles de un lugar seleccionado con un espacio mínimo. Esto puede ser útil en una ventana de información que destaque un lugar en un mapa, en una experiencia de redes sociales, como compartir una ubicación en un chat, como sugerencia para seleccionar tu ubicación actual o en un artículo multimedia para hacer referencia al lugar en Google Maps. El PlaceDetailsCompactView puede mostrar el nombre, la dirección, la calificación, el tipo, el precio, el ícono de accesibilidad, el estado de abierto y una sola foto.

El componente Place Details se puede usar de forma independiente o en conjunto con otras APIs y servicios de Google Maps Platform. El componente toma un ID de lugar o coordenadas de latitud y longitud, y muestra información renderizada de Place Details.

El componente Place Details ofrece una vista compacta, que se puede mostrar horizontal o verticalmente.

El contenido y el estilo visual del componente Place Details se pueden configurar para que coincidan con tu caso de uso y los lineamientos de desarrollo de la marca visual. Puedes personalizar la apariencia de los detalles del lugar si proporcionas valores personalizados de PlacesMaterialTheme. También puedes personalizar qué campos de detalles del lugar se incluyen especificando una lista de entradas PlaceDetailsCompactView, cada una de las cuales corresponde a un dato que se muestra sobre el lugar.

Facturación

Cuando usas el kit de IU de Place Details, se te factura cada vez que se llama al método PlaceDetailsQuery. Si cargas el mismo lugar varias veces, se te facturará por cada solicitud.

Agrega detalles de lugares a tu app

El componente Place Details es una vista de IU de Swift. Puedes personalizar el estilo de la información de los detalles del lugar para que se adapte a tus necesidades y coincida con el aspecto de tu app.

Puedes especificar la orientación (horizontal o vertical), las anulaciones de temas y el contenido. Las opciones de contenido son medios, dirección, calificación, precio, tipo, entrada accesible, vínculo a Maps y vínculo a instrucciones sobre cómo llegar. Obtén más información sobre la personalización.

La posición predeterminada es vertical. Si deseas un diseño horizontal, especifica orientation: .horizontal en PlaceDetailsCompactView.

En este ejemplo, se crea una vista compacta con un diseño vertical.

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

  

En este ejemplo, se crea una vista compacta con un diseño horizontal.

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

Personaliza los detalles de los lugares

El kit de IU de Places ofrece un enfoque de sistema de diseño para la personalización visual basado, en términos generales, en Material Design (con algunas modificaciones específicas de Google Maps). Consulta la referencia de Material Design para Color y Tipografía. De forma predeterminada, el estilo se adhiere al lenguaje de diseño visual de Google Maps.

Importante: Cuando realices modificaciones visuales, debes cumplir con los requisitos de atribución de Google Maps.

Puedes personalizar los siguientes estilos:

Ancho y altura

Para las vistas verticales, el ancho recomendado es de entre 180 y 300 píxeles. Para las vistas horizontales, el ancho recomendado es de entre 180 y 500 píxeles.

La práctica recomendada es no establecer una altura. Esto permitirá que el contenido de la ventana establezca la altura, lo que permitirá que se muestre toda la información.

Nota: La imagen en miniatura del lugar no aparecerá en las vistas de menos de 350 píxeles de ancho.

Colores de atribución

Las Condiciones del Servicio de Google Maps requieren que uses uno de los tres colores de marca para la atribución de Google Maps. Esta atribución debe ser visible y accesible cuando se realicen cambios de personalización.

Ofrecemos 3 colores de marca para elegir que se pueden configurar de forma independiente para temas claros y oscuros:

• Tema claro: attributionColorLight con enums para blanco, gris y negro.
• Tema oscuro: attributionColorDark con enums para blanco, gris y negro.

Ejemplo de personalización

Nota: Si no especificas una personalización visual, se conservará el valor predeterminado.

En este ejemplo, se muestra cómo personalizar los atributos de diseño predeterminados.

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