Kit de interface do Places Details (experimental)

Exibição compacta dos detalhes do lugar

Com o kit de interface para detalhes do lugar, você pode adicionar um componente de interface individual que mostra detalhes do lugar no seu app. O kit de interface pode ser usado de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps. O kit de interface usa um ID de lugar ou coordenadas de latitude/longitude e retorna informações renderizadas de Detalhes do lugar.

O kit de interface oferece uma visualização compacta, que pode ser exibida horizontal ou verticalmente. É possível personalizar a aparência dos detalhes do lugar fornecendo valores PlaceWidgetTheme personalizados. 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 do Place Details, você vai receber cobranças por cada lugar carregado usando o widget. Se você carregar o mesmo lugar várias vezes, haverá cobrança por cada solicitação.

Ativar o kit de interface do Places

Antes de usar o kit de interface do Places, você precisa:

Exemplos de kit de interface do Place Details

O widget 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. [Confira um exemplo de 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. 

       
  // 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: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @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)
  }

Este exemplo cria uma visualização compacta com um layout horizontal. 

  // 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: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @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)
  }

Exemplo de personalização

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

  // 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: PlaceWidgetTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .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)
  }