Componente Place Details

O componente Place Details do Kit de Interface do Places permite adicionar um componente de interface individual que mostra detalhes do lugar no seu app. Esse componente é personalizável.

O componente Place Details pode ser usado de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps. O componente usa um ID de lugar, um nome de recurso ou coordenadas de latitude/longitude e retorna informações renderizadas do Place Details.

O componente Place Details é totalmente temático, permitindo personalizar fontes, cores e raios de canto para corresponder ao seu caso de uso e às diretrizes de marca visual. É possível personalizar a aparência dos detalhes do lugar fornecendo valores PlacesMaterialTheme personalizados. Você também pode personalizar quais campos de detalhes do lugar são incluídos especificando uma lista de PlaceDetailsCompactView entradas, cada uma correspondendo a uma informação mostrada sobre o lugar.

Variantes de layout

O componente Place Details oferece suporte a duas variantes de layout principais:

• Compacto:um layout para visualizar informações importantes.
• Completo:um layout abrangente que mostra todos os detalhes do lugar disponíveis.

O layout compacto pode ser mostrado na orientação vertical ou horizontal. Isso permite integrar o componente a vários layouts de design e tamanhos de tela. O layout completo só pode ser mostrado verticalmente.

O componente Place Details oferece controle granular sobre o conteúdo mostrado no componente. Cada elemento (como fotos, avaliações e informações de contato) pode ser mostrado ou oculto individualmente, permitindo a personalização precisa da aparência e da densidade de informações dos componentes.

Visualização compacta do Place Details

A visualização compacta do Place Details (PlaceDetailsCompactView) renderiza detalhes de um lugar selecionado usando o mínimo de espaço. Isso pode ser útil em uma janela de informações que destaca um lugar em um mapa, em uma experiência de mídia social, como compartilhar um local em um chat, como uma sugestão para selecionar seu local atual ou em um artigo de mídia para referenciar o lugar no Google Maps.

Visualização completa do Place Details

A visualização completa do Place Details (PlaceDetailsView) oferece uma superfície maior para mostrar informações detalhadas do lugar e permite mostrar mais tipos de informações.

Opções de exibição de conteúdo

É possível especificar qual conteúdo mostrar usando as enumerações em PlaceDetailsCompactContent ou PlaceDetailsContent.

Faturamento

Ao usar o Kit de Interface do Place Details, você recebe cobranças por cada vez que o método PlaceDetailsQuery é chamado. Se você carregar o mesmo lugar várias vezes, haverá cobrança por cada solicitação.

Adicionar detalhes do lugar ao seu app

O componente Place Details é uma visualização de interface do Swift. É possível personalizar a aparência das informações de detalhes do lugar para atender às suas necessidades e corresponder à aparência do seu app. Saiba mais sobre a personalização.

É possível carregar o componente Place Details com um ID de lugar, um nome de recurso ou coordenadas de latitude/longitude. Você pode escolher qualquer método ou vários. Defina o identifier na PlaceDetailsQuery struct como .placeID, .resourceName, ou .coordinate.

A posição padrão da visualização compacta é vertical. Se você quiser um layout horizontal, especifique orientation: .horizontal em PlaceDetailsCompactView. Também é possível especificar orientation: .vertical para fins de esclarecimento. A visualização completa só pode ser mostrada verticalmente.

Confira exemplos na seção Exemplos de componentes do Place Details.

Personalizar a aparência visual

Estilo personalizado

É possível personalizar as cores, a tipografia, o espaçamento, as bordas e os cantos do componente Place Details.

O Kit de Interface do Places oferece uma abordagem de sistema de design para personalização visual com base no Material Design (com algumas modificações específicas do Google Maps). Consulte a referência do Material Design para cores e tipografia. Por padrão, o estilo segue a linguagem de design visual do Google Maps.

O Kit de Interface do Places oferece um tema escuro por padrão. Portanto, talvez seja necessário personalizar os temas escuro e claro. Para personalizar o tema escuro, adicione valores para .dark e attribution.darkModeColor ao seu tema personalizado.

Consulte a seção Estilo personalizado para mais informações sobre estilos.

Personalização de largura e altura

Visualizações compactas

Larguras recomendadas:

• Orientação vertical: entre 180 e 300 pixels.
• Orientação horizontal: entre 180 e 500 pixels.

A prática recomendada é não definir uma altura para visualizações compactas. Isso permite que o conteúdo na janela defina a altura, permitindo que todas as informações sejam mostradas.

Larguras menores que 160 pixels podem não ser mostradas corretamente.

Visualizações completas

Para visualizações completas, a largura recomendada é entre 250 e 450 pixels. Uma largura menor que 250 pixels pode não ser mostrada corretamente.

É possível definir a altura do componente: a visualização vertical do Place Details vai rolar verticalmente dentro do espaço alocado.

A prática recomendada é definir uma altura para visualizações completas. Isso permite que o conteúdo na janela role corretamente.

Exemplos de componentes do Place Details

Criar uma visualização completa com layout 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
    )

Criar uma visualização compacta com layout 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
    )

Criar uma visualização completa com layout 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
  )

Personalizar atributos de estilo

Este exemplo mostra como personalizar os atributos de estilo padrão de uma visualização completa ou compacta.

O Kit de Interface do Places oferece um tema escuro por padrão. Portanto, talvez seja necessário personalizar os temas escuro e claro. Para personalizar o tema escuro, adicione valores para .dark e attribution.darkModeColor ao seu 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
}

Mostrar conteúdo específico

Este exemplo cria uma visualização compacta que mostra apenas mídia, endereço, classificação e tipo, usando o tema criado no exemplo 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)
  }