Adicione um mapa ao seu app iOS (Swift)

1. Antes de começar

Este codelab mostra como começar a usar a Plataforma Google Maps para criar apps iOS no Swift. Você vai criar um app iOS que poderá fazer o seguinte:

  • Carregue o SDK do Maps para iOS e a biblioteca de utilitários desse SDK.
  • Exiba um mapa centralizado em Sydney, Austrália.
  • Exiba marcadores personalizados de 100 pontos ao redor de Sydney.
  • Implemente o clustering de marcadores.
  • Permita interações que recentralizam o mapa e desenham um círculo nele quando o usuário toca em um marcador.

Mapa com marcadores em um app iOS

Pré-requisitos

  • Conhecimentos básicos de desenvolvimento em Swift e iOS.

O que você vai aprender

  • Como carregar o SDK do Maps para iOS e a biblioteca de utilitários desse SDK
  • Como carregar um mapa
  • Como usar marcadores, marcadores personalizados e clustering de marcadores
  • Como trabalhar com o sistema de eventos do SDK do Maps para iOS e permitir interações com os usuários
  • Como controlar a câmera do mapa de maneira programática
  • Como desenhar no mapa

Pré-requisitos

Para concluir este codelab, você precisa das seguintes contas, serviços e ferramentas:

  • Xcode 12.0 ou mais recente com um SDK de destino 12.0 ou mais recente.
  • É preciso ter o CocoaPods (em inglês) instalado.
  • Uma conta do Google Cloud Platform com o faturamento ativado (veja a próxima etapa).
  • Um projeto no Console do Cloud com o SDK do Maps para iOS ativado (veja a próxima etapa).

2. Começar a configuração

Para a etapa abaixo, é necessário ativar o SDK do Maps para iOS.

Configurar a Plataforma Google Maps

Caso você ainda não tenha uma conta do Google Cloud Platform e um projeto com faturamento ativado, veja como criá-los no guia da Plataforma Google Maps.

  1. No Console do Cloud, clique no menu suspenso do projeto e selecione o projeto que você quer usar neste codelab.

  1. Ative as APIs e os SDKs da Plataforma Google Maps necessários para este codelab no Google Cloud Marketplace. Para fazer isso, siga as etapas descritas neste vídeo ou nesta documentação.
  2. Gere uma chave de API na página Credenciais do Console do Cloud. Siga as etapas indicadas neste vídeo ou nesta documentação. Todas as solicitações à Plataforma Google Maps exigem uma chave de API.

Guia de início rápido

Veja aqui o código inicial para ajudar você a acompanhar este codelab e começar o mais rápido possível.

  1. Clone o repositório se você tiver o git instalado.
git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Se preferir, clique em Informar o código para fazer o download do código-fonte.

  1. Depois de fazer o download do código, abra o projeto StarterApp no diretório /starter. Esse projeto inclui a estrutura de arquivos básica necessária para concluir o codelab. Tudo o que você precisa para trabalhar está no diretório /starter/StarterApp.

Para ver o código completo da solução em execução, visualize o código concluído no diretório /solution/SolutionApp.

3. Instalar o SDK do Maps para iOS

A primeira etapa para usar o SDK do Maps para iOS é instalar as dependências necessárias. Há duas etapas nesse processo: a instalação do SDK do Maps para iOS e da biblioteca de utilitários desse SDK pelo gerenciador de dependências do Cocoapods e o fornecimento da chave de API ao SDK.

  1. Adicione o SDK do Maps para iOS e a biblioteca de utilitários ao Podfile.

Este codelab usa o SDK do Maps para iOS, que oferece todos os principais recursos do Google Maps, e a biblioteca de utilitários do Maps para iOS, que disponibiliza vários recursos para complementar seu mapa, incluindo o clustering de marcadores.

Para começar, no Xcode (ou no seu editor de texto preferido), abra Podfile e atualize o arquivo para incluir as dependências do SDK do Maps para iOS e da biblioteca de utilitários no comentário # Pods for StarterApp:

pod 'GoogleMaps', '6.1.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

Veja na documentação das versões do SDK do Maps para iOS a versão mais recente do SDK e as orientações de manutenção.

O Podfile vai ser semelhante a este:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '12.0'

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end
  1. Instale os pods da biblioteca de utilitários e do SDK do Maps para iOS.

Para instalar as dependências, execute pod install no diretório /starter, na linha de comando. O CocoaPods faz o download das dependências automaticamente e cria o StarterApp.xcworkspace.

  1. Depois de instalar as dependências, execute open StarterApp.xcworkspace no diretório /starter para abrir o arquivo no Xcode e, em seguida, execute o app no simulador do iPhone pressionando Command+R. Se tudo estiver configurado corretamente, o simulador será iniciado e mostrará uma tela preta. Não se preocupe, você ainda não criou nada.
  2. Importe o SDK em AppDelegate.swift.

Agora que as dependências estão instaladas, é hora de enviar a chave de API ao SDK. A primeira etapa é importar o SDK do Maps para iOS como dependência, inserindo o seguinte abaixo da instrução de importação import UIKit:

import GoogleMaps
  1. Transmita a chave de API para o SDK do iOS chamando provideAPIKey em GMSServices no método application: didFinishLaunchingWithOptions:
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

O arquivo AppDelegate.swift atualizado tem esta aparência:

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

Substitua YOUR_API_KEY pela chave de API que você criou no Console do Cloud.

Agora que suas dependências estão instaladas e sua chave de API foi enviada, está tudo pronto para fazer chamadas no SDK do Maps para iOS.

4. Exibir um mapa

Hora de exibir seu primeiro mapa.

A parte mais usada do SDK do Maps para iOS é a classe GMSMapView, que fornece muitos dos métodos que permitem criar e manipular instâncias de mapas. Veja a seguir como isso é feito.

  1. Abra a ViewController.swift.

Aqui você fará o restante do trabalho para este codelab. Os eventos de ciclo de vida de loadView e viewDidLoad do controlador de visualização já estão fragmentados.

  1. Importe o SDK do Maps para iOS adicionando os seguintes itens à parte de cima do arquivo:
import GoogleMaps
  1. Declare uma variável de instância ViewController para armazenar GMSMapView.

A instância de GMSMapView é o objeto principal com que você trabalha ao longo deste codelab. Você a usará como referência e agirá com base em vários métodos de ciclo de vida do controlador de visualização. Para disponibilizá-la, atualize a implementação de ViewController para declarar uma variável de instância e armazená-la:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}
  1. Em loadView, crie uma instância de GMSCameraPosition.

GMSCameraPosition define onde o mapa será centralizado e o nível de zoom exibido. Esse código chama o método cameraWithLatitude:longitude:zoom: para centralizar o mapa em Sydney, Austrália, em uma latitude de -33.86 e longitude de 151.20, com um nível de zoom 12:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)
  1. Em loadView, crie uma instância de GMSMapView para instanciar o mapa.

Para criar uma nova instância de mapa, chame GMSMapView(frame: CGRect, camera: GMSCameraPosition). Perceba que o frame é definido como CGRect.zero, uma variável global da biblioteca CGGeometry do iOS que especifica um frame de largura e altura 0 localizada na posição (0,0) dentro do controlador de visualização. A câmera é definida de acordo com a posição que você acabou de criar.

Então, para exibir o mapa, defina a visualização raiz do controlador como mapView. Assim, o mapa é exibido em tela cheia.

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  1. Defina GMSMapViewDelegate como o controlador de visualização.

Quando implementado, o delegado da visualização de mapa permite processar eventos de interações com o usuário na instância GMSMapView, que vão ser usados mais tarde.

Primeiro, atualize a interface de ViewController para ficar de acordo com o protocolo de GMSMapViewDelegate:

class ViewController: UIViewController, GMSMapViewDelegate

Em seguida, adicione-os na função loadView para definir GMSMapViewDelegate como ViewController.

    mapView.delegate = self

Agora, atualize o app no simulador de iOS (Command+R). O mapa vai aparecer como mostrado na Figura 1.

App iOS mostrando um mapa do Google Maps

Figura 1. App iOS mostrando um mapa do Google Maps.

Vamos revisar. Nesta etapa, você criou uma instância de GMSMapView para exibir um mapa centralizado na cidade de Sydney, Austrália.

Seu arquivo ViewController.swift ficou assim:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Definir o estilo do mapa (opcional)

Você pode personalizar o estilo do mapa usando a Estilização de mapas baseada na nuvem.

Criar um ID do mapa

Se você ainda não criou um ID do mapa com um estilo associado a ele, consulte o guia de IDs do mapa para concluir as seguintes etapas:

  1. Crie um ID do mapa.
  2. Associe um ID do mapa a um estilo.

Adicionar o ID do mapa ao seu app

Para usar o ID de mapa que você criou na etapa anterior, abra o arquivo ViewController.swift e, no método loadView, crie um objeto GMSMapID e forneça a ele o ID. Em seguida, modifique a instanciação GMSMapView fornecendo o objeto GMSMapID como um parâmetro.

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

Depois de fazer isso, execute o app para ver o mapa no estilo selecionado.

6. Adicionar marcadores ao mapa

O SDK do Maps para iOS oferece inúmeras possibilidade para os desenvolvedores, sendo que a ação mais comum é colocar marcadores no mapa. Os marcadores mostram pontos específicos no mapa e são elementos comuns da IU para interação com os usuários. Se você já usou o Google Maps, provavelmente já conhece o marcador padrão, que tem a aparência dos alfinetes vermelhos mostrados na Figura 2:

Mapa com marcadores vermelhos

Figura 2. Mapa com marcadores vermelhos.

Nesta etapa, você vai aprender a usar a classe GMSMarker para colocar marcadores no mapa.

Os marcadores não serão posicionados até que o mapa carregue na etapa anterior, no evento de ciclo de vida do controlador de visualização loadView. Conclua essas etapas no evento de ciclo de vida de viewDidLoad, chamado após a visualização e o mapa carregarem.

  1. Defina um objeto CLLocationCoordinate2D.

CLLocationCoordinate2D é uma estrutura disponibilizada pela biblioteca CoreLocation do iOS, que estabelece uma localização geográfica com latitude e longitude definidas. Para criar seu primeiro marcador, defina um objeto CLLocationCoordinate2D e a latitude e longitude como centro do mapa. Essas coordenadas são acessadas na visualização de mapa, com as propriedades camera.target.latitude e camera.target.longitude.

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
  1. Crie uma instância de GMSMarker.

O SDK do Maps para iOS informa a classe GMSMarker. Cada instância de GMSMarker representa um marcador específico no mapa e é criada chamando markerWithPosition: e transmitindo um objeto CLLocationCoordinate2D para informar ao SDK onde colocar o marcador.

    let marker = GMSMarker(position: mapCenter)
  1. Defina um ícone de marcador personalizado.

O alfinete vermelho padrão do Google Maps é ótimo, mas você também pode personalizar seu mapa. É muito fácil usar um marcador personalizado com o SDK do Maps para iOS. O projeto StarterApp inclui uma imagem chamada "custom_pin.png", mas você pode usar qualquer uma.

Para definir o marcador personalizado, especifique a propriedade icon dele como uma instância UIImage.

    marker.icon = UIImage(named: "custom_pin.png")
  1. Renderize o marcador no mapa.

Seu marcador foi criado, mas ele ainda não está no mapa. Para incluí-lo, defina a propriedade map da instância GMSMarker como uma instância GMSMapView.

    marker.map = mapView

Atualize o app e confira seu primeiro mapa com um marcador, como mostrado na Figura 3.

App iOS mostrando um mapa do Google Maps com um marcador vermelho no centro

Figura 3. App iOS mostrando um mapa do Google Maps com um marcador vermelho no centro.

Vamos recapitular. Nesta seção, você criou uma instância da classe GMSMarker e a aplicou à visualização do mapa para exibir um marcador. Agora, o evento de ciclo de vida de um viewDidLoad atualizado em ViewController.swift será semelhante a este:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. Ativar o clustering de marcadores

Se você usa muitos marcadores ou tem marcadores próximos uns dos outros, pode haver um problema em que eles se sobrepõem ou aparecem juntos, o que causa uma experiência negativa para o usuário. Por exemplo, se dois marcadores estiverem muito próximos, poderá acontecer a situação mostrada na Figura 4:

Dois marcadores muito próximos

Figura 4. Dois marcadores estão muito próximos.

A solução neste caso é o clustering de marcadores, Esse é outro recurso bastante usado, que agrupa marcadores próximos em um único ícone que muda dependendo do nível de zoom, como mostrado na Figura 5:

Exemplo de marcadores em cluster em um único ícone

Figura 5. Exemplo de marcadores em cluster em um único ícone.

O algoritmo para clustering de marcadores divide a área visível do mapa em uma grade e agrupa os ícones que estão na mesma célula. A equipe da Plataforma Google Maps criou uma biblioteca de código aberto, a biblioteca de utilitários do SDK do Maps para iOS, que lida automaticamente com o clustering de marcadores, entre outras coisas. Saiba mais sobre o clustering de marcadores na documentação da Plataforma Google Maps ou confira o código-fonte na biblioteca de utilitários do iOS no GitHub.

  1. Adicione outros marcadores ao mapa.

Se quiser ver o clustering de marcadores funcionando, é necessário incluir vários marcadores no mapa. Para facilitar, um gerador de marcadores conveniente será fornecido para você no projeto inicial em MarkerGenerator.swift.

Para adicionar um número especificado de marcadores ao mapa, chame MarkerGenerator(near:count:).markerArray no ciclo de vida de viewDidLoad do controlador de visualização abaixo do código da etapa anterior. O método cria o número de marcadores especificado em count em locais aleatórios, ao redor das coordenadas definidas em um objeto CLLocationCoordinate2D. Nesse caso, basta transmitir a variável mapCenter criada anteriormente. Os marcadores são retornados em um [GMSMarker].

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

É possível testar a aparência de vários marcadores adicionando essas linhas após a definição de markerArray e executando o app. Comente essas linhas antes de passar para as próximas etapas, que usam a biblioteca Marker Clusterer para gerenciar a exibição dos marcadores:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }
  1. Importe a biblioteca de utilitários do SDK do Maps para iOS.

Para adicionar a biblioteca de utilitários do Maps para iOS como dependência ao seu projeto, adicione o seguinte à lista de dependências na parte superior de ViewController.swift:

import GoogleMapsUtils
  1. Configure o clustering de marcadores.

É necessário fornecer três itens para configurar o funcionamento do clustering: um algoritmo de clustering, um gerador de ícones e um renderizador. O algoritmo determina o comportamento do cluster, como a distância entre os marcadores que serão incluídos. O gerador fornece os ícones do cluster que serão usados em diferentes níveis de zoom. O renderizador processa a renderização real dos ícones do cluster no mapa.

Se você preferir, programe tudo do zero, mas a biblioteca de utilitários do Maps para iOS oferece implementações padrão que facilitam o processo. Adicione:

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
  1. Crie uma instância de GMUClusterManager.

GMUClusterManager é a classe que implementa o clustering de marcadores, usando o algoritmo, o gerador de ícones e o renderizador especificados por você. Para criar o renderizador e disponibilizá-lo na visualização de mapa, primeiro adicione uma variável de instância à implementação ViewController, que armazenará a instância do gerenciador de clusters:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

Depois, crie a instância de GMUClusterManager no evento de ciclo de vida viewDidLoad:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
  1. Adicione os marcadores e execute o clustering de marcadores.

Agora que a instância do clustering de marcadores está configurada, transmita o gerenciador de clusters para o conjunto de marcadores a serem agrupados (chamando add(items:)) e execute o clustering (chamando cluster).

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

Atualize o app para ver diversos marcadores agrupados, como no exemplo da Figura 6. Teste diferentes níveis de zoom, fazendo gesto de pinça e aumentando o zoom do mapa, para ver os clusters de marcadores se adaptarem de acordo com o zoom.

App iOS com um mapa do Google Maps e marcadores em cluster

Figura 6. App iOS com um mapa do Google Maps e marcadores em cluster.

Vamos recapitular. Nesta etapa, você configurou uma instância do clustering de marcadores com a biblioteca de utilitários do SDK do Google Maps para iOS e, depois, a usou para agrupar 100 marcadores no mapa. Agora, seu evento de ciclo de vida viewDidLoad em ViewController.swift ficará assim:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Adicionar interações com o usuário

Você vai ter um ótimo mapa com marcadores e o uso do recurso de clustering. Nesta etapa, você vai adicionar algumas opções extras de gerenciamento de interações do usuário com GMSMapViewDelegate, definidos anteriormente no controlador de visualização, para melhorar a experiência do usuário no mapa.

O SDK do Maps para iOS oferece um sistema de eventos abrangente que é implementado pelo delegado de visualização de mapa, que inclui manipuladores de eventos que permitem executar o código quando várias interações do usuário ocorrem. Por exemplo, ele inclui métodos que permitem acionar a execução do código mediante interações, como quando o usuário clica no mapa e nos marcadores, movimenta a visualização do mapa, aumenta e diminui o zoom e muito mais.

Nesta etapa, você vai movimentar o mapa de maneira programática para centralizá-lo em qualquer marcador que o usuário tocar.

  1. Implemente o listener de toque do marcador.

mapView(_:didTap:) é chamado sempre que o usuário toca em um dos marcadores criados ou em um clustering de marcadores. Os clusters internos são implementados como uma instância de GMSMarker.

Para implementar o listener de eventos, comece fragmentando-o na parte inferior de ViewController.swift antes da chave de fechamento.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

O método retorna false. Isso faz com que o SDK do iOS continue executando a funcionalidade padrão de GMSMarker, como mostrar uma janela de informações quando ela está configurada, depois de executar o código do manipulador de eventos.

  1. Processe o evento de toque e anime a câmera para recentralizar o mapa quando houver um toque no marcador ou no cluster.

Quando chamado, mapView(_:didTap:) transmite a instância de GMSMarker que foi tocada, permitindo que você a execute no seu código. Você pode usar essa instância para atualizar o mapa, chamando animate(toLocation:) na visualização de mapa do manipulador de eventos e transmitindo a ele a posição da instância do marcador, na propriedade position.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)
  1. Aumente o zoom em um cluster de marcadores quando ele receber um toque.

Um padrão comum da UX é aumentar o zoom nos clusters de marcadores quando o usuário toca neles. Permite que os usuários vejam os marcadores em cluster à medida que o cluster se expande em níveis mais baixos de zoom.

Conforme observado antes, o ícone do cluster de marcadores é uma implementação de GMSMarker com um ícone personalizado. Então, como saber se um marcador ou cluster foi tocado? Quando o gerenciador de clustering de marcadores cria um novo ícone de cluster, ele implementa a instância de GMSMarker para atender a um protocolo chamado GMUCluster. Você pode usar uma condicional para verificar se o marcador transmitido ao manipulador de eventos obedece a esse protocolo.

Quando você souber programaticamente que houve um toque em um cluster, chame animate(toZoom:) na instância de visualização de mapa e defina o zoom como o nível atual mais um. O nível de zoom atual está disponível na instância da visualização de mapa na propriedade camera.zoom.

Além disso, observe como o código abaixo retorna true. Isso informa ao manipulador de eventos que você concluiu o processamento e que ele não deve executar outros códigos no gerenciador. Um dos motivos para fazer isso é impedir que o objeto GMSMarker subjacente execute o restante do comportamento padrão dele, como exibir uma janela de informações, o que não faria sentido no caso de toques em um ícone do cluster.

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

Atualize o app e toque em alguns marcadores e clusters. Quando você toca em um dos elementos, o mapa recentraliza aquele que recebeu o toque. Quando um cluster de marcadores é tocado, o mapa também aumenta o zoom em um nível, e o cluster de marcadores expande para mostrar os marcadores agrupados.

Vamos recapitular. Nesta etapa, você implementou o listener de toque de marcadores, manipulou o evento para recentralizar o elemento tocado e aumentar o zoom se esse elemento for um ícone de cluster de marcadores.

O método mapView(_:didTap:) concluído ficará assim:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. Desenhar no mapa

Até agora, você criou um mapa de Sydney que mostra marcadores em cem pontos aleatórios e aceita interações com o usuário. Na última etapa deste codelab, você usa os recursos de desenho do SDK do Maps para iOS para adicionar outros recursos úteis à experiência no mapa.

Imagine que esse mapa será acessado pelos usuários que gostariam de explorar a cidade de Sydney. Um elemento útil seria ver um raio em torno de um marcador após clicar nele. Com isso, o usuário pode entender facilmente quais outros destinos estão a uma curta distância a pé do marcador selecionado.

O SDK do iOS inclui um conjunto de funções para desenhar formas no mapa, como quadrados, polígonos, linhas e círculos. Nesta etapa, você vai renderizar um círculo para mostrar um raio de 800 metros ao redor de um marcador após ele receber um clique.

  1. Adicione uma variável de instância circle à implementação do ViewController.

Essa variável de instância é usada para salvar o círculo desenhado mais recentemente, para que ela seja destruída antes que outra seja desenhada. Afinal, não seria muito útil nem visualmente atrativo para o usuário se cada marcador tocado tivesse um círculo desenhado ao redor.

Para fazer isso, atualize a implementação de ViewController da seguinte forma:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}
  1. Desenhe o círculo quando o marcador for tocado.

Na parte inferior do método mapView(_:didTap:), bem acima da instrução return false, adicione o código mostrado aqui para criar uma instância da classe GMSCircle do SDK do iOS, desenhando um novo círculo com raio de 800 metros chamando GMSCircle(position:radius:) e transmitindo a posição do marcador que recebeu o toque, como você fez ao centralizar o mapa.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
  1. Defina o estilo do círculo.

Por padrão, GMSCircle desenha um círculo com um traço preto e preenchimento transparente. O raio será exibido, mas será um pouco difícil de vê-lo. Em seguida, atribua uma cor de preenchimento ao círculo para melhorar o estilo, atribuindo um objeto UIColor à propriedade fillColor do círculo. O código mostrado aqui adiciona um preenchimento cinza com 50% de transparência:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
  1. Renderize o círculo no mapa.

Da mesma forma que você criou marcadores antes, criar uma instância de GMSCircle não faz com que ela apareça no mapa. Para fazer isso, atribua a instância de visualização de mapa à propriedade map do círculo.

    circle?.map = mapView
  1. Remova todos os círculos renderizados anteriormente.

Como visto antes, adicionar círculos ao mapa não seria uma boa experiência para o usuário. Para remover o círculo renderizado por um evento de toque anterior, defina a propriedade map de circle como nil na parte superior de mapView(_:didTap:).

    // Clear previous circles
    circle?.map = nil

Atualize o app e toque em um marcador. Um novo círculo desenhado aparecerá sempre que um marcador receber um toque e qualquer círculo renderizado anteriormente for removido, como mostrado na Figura 7.

Círculo desenhado ao redor do marcador tocado

Figura 7. Círculo desenhado ao redor do marcador tocado.

Vamos recapitular. Nesta etapa, você usou a classe GMSCircle para renderizar um círculo sempre que um marcador receber um toque.

O método mapView(_:didTap:) vai ficar assim:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Parabéns!

Você criou um app iOS com um mapa interativo do Google.

O que você aprendeu

A seguir

  • Explore ou crie uma bifurcação do repositório maps-sdk-for-ios-samples de amostras e demonstrações do GitHub para ter mais inspiração.
  • Aprenda com mais codelabs do Swift para criar apps iOS com a Plataforma Google Maps.
  • Ajude-nos a criar conteúdo útil respondendo à pergunta abaixo:

Quais outros codelabs você quer ver?

Visualização de dados em mapas Como personalizar o estilo dos meus mapas Como criar interações 3D em mapas

O codelab que você quer ver não está listado acima? Solicite-o aqui.