Componente Place Details

El componente Place Details del kit de IU de Places te permite agregar un componente de IU individual que muestra detalles de lugares en tu app. Este componente es personalizable.

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, un nombre de recurso o coordenadas de latitud y longitud, y muestra información renderizada de Places Details.

El componente Place Details es totalmente compatible con temas, lo que te permite personalizar fuentes, colores y radios de esquinas para que coincidan con tu caso de uso y los lineamientos de la marca visual. Puedes personalizar la apariencia de los detalles del lugar proporcionando valores de PlacesMaterialTheme personalizados. También puedes personalizar los campos de detalles del lugar que se incluyen. Para ello, especifica una lista de entradas PlaceDetailsCompactView, cada una de las cuales corresponde a un fragmento de información que se muestra sobre el lugar.

Variantes de diseño

El componente Place Details admite dos variantes de diseño principales:

• Compacto: Es un diseño para obtener una vista previa de la información clave.
• Completa: Un diseño integral que muestra todos los detalles disponibles del lugar.

El diseño compacto se puede mostrar en orientación vertical u horizontal. Esto te permite integrar el componente en varios diseños y tamaños de pantalla. El diseño completo solo se puede mostrar verticalmente.

El componente Place Details te brinda un control detallado sobre el contenido que se muestra en el componente. Cada elemento (como fotos, opiniones e información de contacto) se puede mostrar u ocultar de forma individual, lo que permite una personalización precisa de la apariencia de los componentes y la densidad de la información.

Vista compacta de Place Details

La vista compacta de Place Details (PlaceDetailsCompactView) renderiza los detalles de un lugar seleccionado con el mínimo espacio posible. Esto puede ser útil en una ventana de información que destaca 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 dentro de un artículo de medios para hacer referencia al lugar en Google Maps.

Vista completa de Place Details

La vista completa de los detalles del lugar (PlaceDetailsView) ofrece una superficie más grande para mostrar la información de los detalles del lugar y te permite mostrar más tipos de información.

Opciones de visualización de contenido

Puedes especificar qué contenido mostrar con las enumeraciones en PlaceDetailsCompactContent o PlaceDetailsContent.

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 la apariencia de la información de detalles del lugar para que se adapte a tus necesidades y coincida con la apariencia de tu app. Más información sobre la personalización

Puedes optar por cargar el componente Place Details con un ID de lugar, un nombre de recurso o coordenadas de latitud y longitud. Puedes elegir cualquier método o varios. Establece identifier en la estructura PlaceDetailsQuery como .placeID, .resourceName o .coordinate.

La posición predeterminada de la vista compacta es vertical. Si deseas un diseño horizontal, especifica orientation: .horizontal en PlaceDetailsCompactView. También puedes especificar orientation: .vertical de forma opcional para mayor claridad. La vista completa solo se puede mostrar verticalmente.

Consulta los ejemplos en la sección Ejemplos del componente Place Details.

Personaliza la apariencia visual

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

La apariencia del componente se personaliza con los structs placesMaterialColor, placesMaterialFont, placesMaterialShape y placesMaterialTheme.

Puedes personalizar los siguientes estilos:

Consulta los ejemplos en la sección Ejemplos del componente Place Details.

Personalización de ancho y altura

Vistas compactas

Anchos recomendados:

• Orientación vertical: Entre 180 y 300 píxeles
• Orientación horizontal: Entre 180 y 500 píxeles

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

Es posible que los anchos inferiores a 160 píxeles no se muestren correctamente.

Vistas completas

Para las vistas completas, el ancho recomendado es de entre 250 y 450 píxeles. Es posible que un ancho inferior a 250 píxeles no se muestre correctamente.

Puedes establecer la altura del componente: la vista vertical de Place Details se desplazará verticalmente dentro del espacio asignado.

La práctica recomendada es establecer una altura para las vistas completas. Esto permitirá que el contenido de la ventana se desplace correctamente.

Colores de atribución

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

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

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

Ejemplos del componente Place Details

Crea una vista completa con diseño vertical

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Crea una vista compacta con diseño horizontal

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Crea una vista completa con diseño vertical

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = 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
  )

Personaliza los atributos de estilo

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

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

Mostrar contenido específico

En este ejemplo, se crea una vista compacta que solo muestra contenido multimedia, dirección, calificación y tipo, con el tema creado en el ejemplo anterior.

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