Componente Place Details

El componente Place Details del kit de IU de Places te permite agregar un componente de IU individual que muestra los detalles del lugar 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 Place Details.

El componente Place Details es totalmente adaptable a temas, lo que te permite personalizar fuentes, colores y radios de las esquinas para que coincidan con tu caso de uso y los lineamientos visuales de la marca. Puedes personalizar la apariencia de los detalles del lugar proporcionando valores PlacesMaterialTheme personalizados. También puedes personalizar qué campos de detalles del lugar se incluyen especificando una lista de PlaceDetailsCompactView entradas, 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: Un diseño para obtener una vista previa de la información clave.
• Completo: Un diseño integral que muestra todos los detalles del lugar disponibles.

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 y datos 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 un espacio mínimo. 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 Place Details (PlaceDetailsView) ofrece una superficie más grande para mostrar información detallada 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 del lugar a tu app

El componente Place Details es una vista de IU de Swift. Puedes personalizar el aspecto de la información de los detalles del lugar para que se adapte a tus necesidades y coincida con la apariencia de tu app. Obtén más información sobre la personalización.

Puedes elegir 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 el identifier en la PlaceDetailsQuery estructura como .placeID, .resourceName, o .coordinate.

La posición predeterminada para 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

Diseño personalizado

Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas de tu componente Place Details.

El kit de IU de Places ofrece un enfoque de sistema de diseño para la personalización visual basado 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 ajusta al lenguaje de diseño visual de Google Maps.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega valores para .dark y attribution.darkModeColor a tu tema personalizado.

Consulta la sección Diseño personalizado para obtener más información sobre el diseño.

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.

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()
    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()
    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()
  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 estilo predeterminados de una vista completa o compacta.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega valores para .dark y attribution.darkModeColor a tu tema personalizado.

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

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