Adicionar um mapa ao seu app iOS (Objective-C)

21 minutos restantes

Sobre este codelab

Último mar. 18, 2022 atualizado

Escrito por Equipe da Plataforma Google Maps

1. Antes de começar

Resumo

Neste codelab, você aprenderá tudo que precisa para começar a usar a Plataforma Google Maps na criação de apps iOS em Objective-C. Você verá todos os princípios básicos, incluindo a configuração e carregamento do SDK do Maps para iOS, a exibição do primeiro mapa, como trabalhar com marcadores e clustering de marcadores, desenhar no mapa e interagir com o usuário.

O que você criará

Neste codelab, você criará um app iOS que poderá fazer o seguinte:

Carregar o SDK do Maps para iOS e a biblioteca de utilitários desse SDK
Exibir um mapa centralizado em Sydney, Austrália
Exibir marcadores personalizados de 100 pontos ao redor de Sydney
Implementar o clustering de marcadores
Permitir interações que recentralizam o mapa e desenham um círculo nele quando o usuário clica em um marcador

O que você aprenderá

Primeiros passos com a Plataforma Google Maps
Carregar o SDK do Maps para iOS e a biblioteca de utilitários desse SDK
Carregar um mapa
Como usar marcadores, clustering de marcadores e marcadores personalizados
Como trabalhar com o sistema de eventos do SDK do Maps para iOS e permitir interações com os usuários
Como controlar o mapa de maneira programática
Como desenhar no mapa

Pré-requisitos

Você precisa se familiarizar com os itens abaixo para concluir este codelab. Caso você já tenha trabalhado com a Plataforma Google Maps, avance para o codelab.

Produtos obrigatórios da Plataforma Google Maps

Neste codelab, você usará os seguintes produtos da Plataforma Google Maps:

SDK do Maps para iOS
Biblioteca de utilitários do SDK do Maps para iOS

Primeiros passos com a Plataforma Google Maps

Se você nunca usou a Plataforma Google Maps, siga o guia Primeiros passos com a Plataforma Google Maps ou assista à playlist Primeiros passos na Plataforma Google Maps para concluir as seguintes etapas:

Criar uma conta de faturamento
Criar um projeto
Ativar as APIs e os SDKs da Plataforma Google Maps (listados na seção anterior)
Gerar uma chave de API

Outros requisitos para o codelab

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

Uma conta do Google Cloud Platform com o faturamento ativado
Uma chave de API da Plataforma Google Maps com o SDK do Maps para iOS ativado
Conhecimento básico sobre Objective-C
Xcode 12.0 com um SDK de destino 12.0 ou mais recente

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 Primeiros passos com a Plataforma Google Maps.

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

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

Configuração do modelo inicial do projeto

Antes de iniciar este codelab, siga as instruções abaixo para fazer o download do modelo inicial do projeto e do código completo da solução:

Faça o download ou crie uma bifurcação do repositório GitHub deste codelab em https://github.com/googlecodelabs/maps-platform-101-objc (em inglês).

O projeto StarterApp fica no diretório /starter e 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.

Se você quiser ver o código completo da solução em execução, conclua as etapas de configuração acima e veja a solução 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.

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

Neste codelab, você usará 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 Pods > Podfile e atualize o arquivo para incluir as dependências do SDK do Maps para iOS e da biblioteca de utilitários, em use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

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 fará o download automático das dependências e criará StarterApp.xcworkspace. 3. Depois de instalar as dependências, abra StarterApp.xcworkspace no Xcode e 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. 4. Importe o SDK em AppDelegate.h.

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 "AppDelegate.h":

@import GoogleMaps;

Abaixo da instrução de importação do SDK do iOS, declare uma constante NSString com o mesmo valor da sua chave de API:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Transmita a chave de API para o SDK do iOS chamando provideAPIKey em GMSServices no método application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

O arquivo AppDelegate.m atualizado terá esta aparência:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

O Podfile será semelhante a este:

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

target 'StarterApp' do
  use_frameworks!

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

end

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.

Abra ViewController.m.

Aqui você fará todo o trabalho restante para este codelab. Você perceberá que os eventos de ciclo de vida de loadView e viewDidLoad do controlador de visualização já estão fragmentados. 2. Importe o SDK do Maps para iOS adicionando os seguintes itens à parte superior do arquivo:

@import GoogleMaps;

Declare uma variável de instância ViewController para armazenar GMSMapView.

A instância de GMSMapView é o objeto principal com que você trabalhará 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 e armazenar uma variável de instância:

@implementation ViewController {
  GMSMapView *_mapView;
}

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:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

Em loadView, crie uma instância de GMSMapView para instanciar o mapa.

Para criar uma nova instância de mapa, chame mapWithFrame:camera:. Perceba que o frame é definido como CGRectZero, 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.

Para exibir o mapa, defina a visualização raiz do controlador como _mapview. Assim, o mapa será exibido em tela cheia.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

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 serão usados nas etapas mais adiante.

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

@interface ViewController ()<GMSMapViewDelegate>

Depois, adicione o seguinte para definir GMSMapViewDelegate como ViewController.

_mapView.delegate = self;

Agora, atualize o app no simulador de iOS (Command+R). O mapa aparecerá.

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.m ficou assim:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Estilização de mapas baseada na nuvem (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:

Criar um ID do mapa
Associar um ID do mapa a um estilo

Adicionar um ID de mapa ao seu app

Para usar o ID de mapa que você criou na etapa anterior, abra o arquivo ViewController.m 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.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

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 permitem mostrar 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 esta aparência:

Nesta etapa, você 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.

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 podem ser acessadas na visualização de mapa, com as propriedades camera.target.latitude e camera.target.longitude.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

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.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

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 imageNamed:@"custom_pin.png"];

Renderize o marcador no mapa.

Seu marcador foi criado, mas você notará que ele não está no mapa. Para inclui-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.

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.m pode ser semelhante este:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. Ativar o clustering de marcadores

Usar um grande número de marcadores ou deixá-los muito próximos, pode causar uma experiência negativa para o usuário, que os vê sobrepostos e amontoados. Por exemplo, se dois marcadores estiverem muito próximos, poderá acontecer o seguinte:

A solução neste caso é o clustering de marcadores. um outro recurso comum que agrupa marcadores próximos em um único ícone e muda dependendo do nível de zoom. Veja como:

O algoritmo do clustering de marcadores divide a área visível do mapa em uma grade e agrupa os ícones que estão na mesma célula. Você não precisa se preocupar com isso, já que a equipe da Plataforma Google Maps criou uma biblioteca de código aberto, a biblioteca de utilitários do SDK do Maps para iOS. Ela 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.

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 LocationGenerator.m.

Para adicionar quantos marcadores quiser ao seu mapa, chame generateMarkersNear:count: 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 objeto NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

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

@import GoogleMapsUtils;

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. Basta adicionar o seguinte:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

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:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

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

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

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 addItems:) e execute o clustering (chamando cluster).

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Atualize o app para ver vários marcadores agrupados. 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.

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.m vai ficar assim:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems: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ê adiciona 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 posicionar o mapa de modo programático para o centro em qualquer marcador que o usuário tocar.

Implemente o listener de toque do marcador.

mapView:didTapMarker é 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.m antes da instrução end.

Você perceberá que o método retorna NO. 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.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

Processe o evento de toque e adicione animação à câmera para recentralizar o mapa quando houver um toque no marcador ou no cluster.

Quando chamado, mapView:didTapMarker 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 animateToLocation: na visualização de mapa do manipulador de eventos e transmitindo a ele a posição da instância do marcador, disponível na propriedade position.

[_mapView animateToLocation:marker.position];

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. Isso permite que os usuários vejam os marcadores em cluster, já que ele expandirá em níveis de zoom mais detalhados.

Conforme observado antes, o ícone do cluster de marcadores é apenas 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 animateToZoom: 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 YES. 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 ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

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:didTapMarker concluído fica assim:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

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ê usará 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 conhecer a cidade de Sydney. Um recurso interessante seria visualizar 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. Em seguida, você vai renderizar um círculo para mostrar um raio de 800 metros ao redor de um marcador após ele receber um clique.

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

Essa variável de instância será 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:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Desenhe o círculo quando o marcador for tocado.

Na parte inferior do método mapView:didTapMarker, adicione o código a seguir para criar uma instância da classe GMSCircle do SDK do iOS, desenhando um novo círculo com raio de 800 metros chamando circleWithPosition:radius: e transmitindo a posição do marcador que recebeu o toque, como você fez ao centralizar o mapa.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

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 dele. O código a seguir adicionará um preenchimento cinza com 50% de transparência:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

Renderize o círculo no mapa.

Da mesma forma que você criou marcadores antes, apenas 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.

_circ.map = _mapView;

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 _circ como nil na parte superior de mapView:didTapMarker.

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

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

Seu método mapView:didTapMarker vai ficar assim:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Parabéns

Você criou seu primeiro app iOS com a Plataforma Google Maps, incluindo o carregamento do SDK do Maps para iOS, o carregamento de um mapa, o uso de marcadores, o controle e desenho no mapa, além da adição de interações com o usuário.

Para ver o código concluído, confira o projeto finalizado no diretório /solution.

Qual é a próxima etapa?

Neste codelab, abordamos apenas os conceitos básicos do SDK do Maps para iOS. Agora, tente incluir alguns destes recursos no mapa:

Altere o tipo de mapa para exibir mapas de satélite, de terreno e híbridos.
Personalize outras interações do usuário, como zoom e controles do mapa.
Adicione janelas de informações para exibir informações quando os marcadores forem clicados.
Confira o SDK do Places para iOS se quiser adicionar recursos e dados avançados de lugar da Plataforma Google Maps ao seu app.

Para continuar estudando maneiras de usar a Plataforma Google Maps na Web, confira estes links:

Informar um erro