Selecciona la plataforma: Android iOS JavaScript

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.

Componente compacto de detalles del lugar

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: Es 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.

Diseños horizontales y verticales
Diseños horizontales y verticales

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

Opciones de contenido de los detalles del lugar
Opciones de visualización de contenido

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.

Vista compacta Vista completa
  • Foto del lugar
  • Dirección del lugar
  • Calificación y recuento de calificaciones
  • Tipo de lugar
  • Precio
  • Información de la entrada accesible
  • Estado de abierto ahora
  • Collage de fotos del lugar
  • Dirección del lugar
  • Calificación y recuento de calificaciones
  • Tipo de lugar
  • Precio
  • Información de accesibilidad
  • Estado de abierto ahora
  • Horario de atención
  • Resumen editorial
  • Sitio web
  • Número de teléfono
  • Opiniones renderizadas en una pestaña dedicada
  • Plus Code
  • Lista de funciones, renderizada en una pestaña dedicada
  • Destacados específicos del tipo, como los precios de la gasolina en las gasolineras

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

Diseño personalizado

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

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.

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 del ancho y la 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

Swift

  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

Swift

  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

Swift

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

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.

Swift

  // 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 el contenido multimedia, la dirección, la calificación y el tipo, con el tema creado en el ejemplo anterior.

Swift

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