Componente de detalhes do lugar

O componente Place Details do kit de interface do Places permite adicionar um componente de interface individual que mostra os detalhes do lugar no app.

O 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 sugestão para selecionar seu local atual ou em um artigo de mídia para referenciar o lugar no Google Maps. O PlaceDetailsCompactView pode mostrar nome, endereço, classificação, tipo, preço, ícone de acessibilidade, status de abertura e uma única foto.

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

O componente "Place Details" oferece uma visualização compacta, que pode ser exibida horizontal ou verticalmente.

O conteúdo e o estilo visual do componente Place Details podem ser configurados para corresponder ao seu caso de uso e às diretrizes visuais da marca. É possível personalizar a aparência dos detalhes do lugar fornecendo valores personalizados de PlacesMaterialTheme. Também é possível personalizar quais campos de detalhes do lugar são incluídos especificando uma lista de entradas PlaceDetailsCompactView, cada uma correspondendo a uma informação mostrada sobre o lugar.

Faturamento

Ao usar o kit de interface de detalhes do lugar, você vai receber cobranças sempre que o método PlaceDetailsQuery for 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 da interface Swift. Você pode personalizar a aparência das informações dos detalhes do lugar de acordo com suas necessidades e com a aparência do seu app.

É possível especificar a orientação (horizontal ou vertical), as substituições de tema e o conteúdo. As opções de conteúdo são mídia, endereço, classificação, preço, tipo, entrada acessível, link do Maps e link de direções. Saiba mais sobre a personalização.

A posição padrão é vertical. Se você quiser um layout horizontal, especifique orientation: .horizontal em PlaceDetailsCompactView.

Este exemplo cria uma visualização compacta com um layout 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)
  }

  

Este exemplo cria uma visualização compacta com um layout 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)
  }

Personalizar detalhes do lugar

O kit de interface do Places oferece uma abordagem de sistema de design para a personalização visual baseada 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.

Importante : ao fazer modificações visuais, você precisa obedecer aos requisitos de atribuição do Google Maps.

Você pode personalizar os seguintes estilos:

Largura e altura

Para visualizações verticais, a largura recomendada é entre 180 e 300 pixels. Para visualizações horizontais, a largura recomendada é de 180 a 500 pixels.

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

Observação:a imagem em miniatura do lugar não aparece em visualizações com menos de 350 pixels de largura.

Cores de atribuição

Os Termos de Serviço do Google Maps exigem que você use uma das três cores da marca para a atribuição do Google Maps. Essa atribuição precisa estar visível e acessível quando as mudanças de personalização forem feitas.

Oferecemos três cores de marca que podem ser definidas de forma independente para temas claros e escuros:

• Tema claro: attributionColorLight com enumerações para branco, cinza e preto.
• Tema escuro: attributionColorDark com enumerações para branco, cinza e preto.

Exemplo de personalização

Observação:se você não especificar uma personalização visual, o valor padrão será mantido.

Este exemplo mostra como personalizar os atributos de estilo padrão.

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