Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ative o Google Maps SDK for iOS

Para começar, orientaremos você pelo Google Developers Console para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ative o Google Maps SDK for iOS
  3. Criar chaves apropriadas
Continuar

Marcadores

Os marcadores indicam localizações únicas no mapa.

Por padrão, os marcadores usam um ícone padrão que tem a sensação e visual comum do Google Maps. Se quiser personalizar seu marcador, é possível alterar a cor do marcador padrão, substituir a imagem do marcador por um ícone personalizado ou alterar outras propriedades do marcador.

Adicionar um marcador

Para adicionar um marcador, crie um objeto GMSMarker que inclui um position e title, e defina o seu map.

O exemplo abaixo mostra como adicionar um marcador a um objeto GMSMapViewexistente. O marcador é criado nas coordenadas 10,10e, quando clicado, exibe a string "Hello world" em uma janela de informações.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

Anime a adição de novos marcadores ao mapa definindo a propriedade marker.appearAnimation como kGMSMarkerAnimationPop.

Remover um marcador

É possível remover um marcador do mapa definindo a propriedade map do GMSMarker para nil. Como alternativa, remova todas as sobreposições (inclusive marcadores) existentes no mapa chamando o método GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView clear];

Se você quiser fazer alterações em um marcador após adicioná-lo ao mapa, não deixe de manter uma referência ao objeto GMSMarker. O marcador pode ser modificado posteriormente mediante alterações efetuadas nesse objeto.

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

Alterar a cor do marcador

Você pode personalizar a cor da imagem do marcador padrão solicitando uma versão tingida do ícone padrão com markerImageWithColor: e passando a imagem resultante à propriedade de ícone do GMSMarker.

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

Personalizar a imagem do marcador

Se quiser alterar a imagem do marcador padrão, é possível definir um ícone personalizado usando a propriedade icon ou iconView do marcador.

Se iconView estiver definido, a API ignora a propriedade icon. Atualizações para o icon atual não são reconhecidos enquanto iconView estiver definido.

Usar a propriedade icon do marcador

O snippet a seguir cria um marcador com um ícone personalizado fornecido como um UIImage na propriedade icon. O ícone está centralizado em Londres, Inglaterra. O snippet presume que o seu aplicativo contém uma imagem chamada "house.png".

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Para criar diversos marcadores com a mesma imagem, use a mesma instância de UIImage para cada um dos marcadores. Isso ajuda a melhorar o desempenho do aplicativo quando vários marcadores são exibidos.

Essa imagem pode ter vários quadros. Como alternativa, a propriedade alignmentRectInsets é respeitada, o que é útil se um marcador tiver uma sombra ou outra região inútil.

Usar a propriedade iconView do marcador

O snippet a seguir cria um marcador com um ícone personalizado definindo a propriedade iconView do marcador e anima uma alteração na cor do marcador. O snippet presume que o seu aplicativo contém uma imagem chamada "house.png".

Swift

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func loadView() {

    let camera = GMSCameraPosition.camera(withLatitude: 51.5,
                                          longitude: -0.127,
                                          zoom: 14)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
      }, completion: {(finished) in
        // Stop tracking view changes to allow CPU to idle.
        self.london?.tracksViewChanges = false
    })
  }

Objective-C

#import "ViewController.h"
@import GoogleMaps;

@interface ViewController () <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation ViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView
    idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

Como iconView aceita uma UIView, é possível ter uma hierarquia de controles de IU padrão definindo seus marcadores, cada visualização tendo um conjunto padrão de capacidades de animação. É possível incluir alterações no tamanho, na cor e nos níveis alfa do marcador, além de poder aplicar transformações arbitrárias. A propriedade iconView suporta animação de todas as propriedades animáveis de UIView exceto frame e center.

Lembre-se das seguintes considerações ao usar iconView:

  • A UIView pode exigir recursos quando tracksViewChanges está definido como YES, o que pode resultar no aumento do uso da bateria. Em comparação, um único UIImage de frame é estático e não precisa ser renderizado novamente.
  • Alguns dispositivos podem ter problemas para renderizar o mapa caso tenha vários marcadores na tela, cada marcador tem uma UIView própria e todos os marcadores estão anotando as alterações ao mesmo tempo.
  • Uma iconView não responde à interação do usuário, pois é apenas um instantâneo da visualização.
  • A visualização se comporta como se clipsToBounds estivesse definido como YES, independentemente do seu verdadeiro valor. É possível aplicar transformações que trabalham fora dos limites, mas o objeto que você arrastar deve estar dentro dos limites do objeto. Todas as transformações/alterações são monitoradas e aplicadas. Resumindo: subvisualizações devem ser contidas dentro da visualização.

Para decidir quando definir a propriedade tracksViewChanges, você deve considerar o desempenho em relação às vantagens de ter o marcador redesenhado automaticamente. Por exemplo:

  • Caso tenha uma série de alterações para realizar, é possível alterar a propriedade para YES e, em seguida, de volta para NO.
  • Quando uma animação está em execução ou os conteúdos estão sendo carregados de forma assíncrona, deve-se manter a propriedade definida como YES até a conclusão das ações.

Alterar a opacidade do marcador

Controle a opacidade de um marcador com a propriedade opacity. Deve-se especificar a opacidade como flutuante entre 0.0 e 1.0, onde 0 é completamente transparente e 1 é completamente opaco.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

É possível animar a opacidade do marcador com o Core Animation pelo GMSMarkerLayer.

Comprimir um marcador

Normalmente, os ícones de marcador são desenhados de acordo com a orientação da tela do dispositivo, em vez da superfície do mapa. Portanto, girar, inclinar ou alterar o zoom do mapa não altera necessariamente a orientação do marcador.

Defina a orientação de um marcador como plana em relação ao planeta. Os marcadores planos giram quando o mapa gira e alteram a perspectiva quando o mapa é inclinado. Assim como os marcadores regulares, os marcadores planos retêm o tamanho quando o zoom do mapa é aumentado ou diminuído.

Para alterar a orientação do marcador, defina a propriedade flat do marcador como YES ou true.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.isFlat = true
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView;

Girar um marcador

Você pode girar um marcador em volta do ponto de controle definindo a propriedade rotation. Especifique a rotação como um tipo CLLocationDegrees, medido em graus no sentido horário a partir da posição padrão. Quando o marcador está plano no mapa, a posição padrão é norte.

O exemplo a seguir gira o marcador 90°. A definição da propriedade groundAnchor como 0.5,0.5 faz com que o marcador seja girado em torno do centro em vez da base.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

Adicionar uma janela de informações

Use uma janela de informações para exibir informações ao usuário quando ele toca em um marcador. Apenas uma janela de informações é exibida de cada vez. Se um usuário toca em outro marcador, a janela atual é oculta e uma nova janela de informações é exibida. O conteúdo da janela de informações é definido pelas propriedades title e snippet. A janela de informações não é exibida após um clique no marcador se as propriedades title e snippet estão em branco ou são nil.

O snippet a seguir cria um único marcador, com apenas um título para a janela de informações.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

A propriedade snippet permite acrescentar texto adicional para exibição abaixo do título, em uma fonte menor. Strings que são maiores que a largura da janela de informações são automaticamente quebradas em várias linhas. Mensagens muito longas podem ser truncadas.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Definir uma janela de informações para atualizar automaticamente

Defina tracksInfoWindowChanges no marcador como YES ou true se quiser novas propriedades ou para o conteúdo da janela de informações ser exibido imediatamente quando alterado, em vez de esperar a janela de informações ocultar e aparecer novamente em seguida. O padrão é NO ou false.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

Para decidir quando definir a propriedade tracksInfoWindowChanges, deve-se considerar o desempenho em relação às vantagens de ter a janela de informações redesenhada automaticamente. Por exemplo:

  • Caso tenha uma série de alterações para realizar, é possível alterar a propriedade para YES e, em seguida, de volta para NO.
  • Quando uma animação está em execução ou os conteúdos estão sendo carregados de forma assíncrona, deve-se manter a propriedade definida como YES até a conclusão das ações.

Consulte também as observações de consideração ao usar a propriedade iconView do marcador.

Alterar a posição de uma janela de informações

Uma janela de informações é desenhada orientada em relação à tela do dispositivo, centralizada acima do marcador associado. Altere a posição da janela de informações em relação ao marcador definindo a propriedade infoWindowAnchor. Essa propriedade aceita um CGPoint, definido como um deslocamento (x, y), com x e y variando entre 0.0 e 1.0. O deslocamento padrão é (0.5, 0.0), ou seja, na parte superior central. A definição do deslocamento infoWindowAnchor é útil para alinhar a janela de informações a um ícone personalizado.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Lidar com eventos em marcadores e janelas de informações

É possível escutar eventos ocorridos no mapa, como o toque de um usuário em um marcador ou em uma janela de informações. Para escutar eventos, é necessário implementar o protocolo GMSMapViewDelegate. Consulte o guia para eventos e a lista de métodos no GMSMapViewDelegate. Para eventos do Street View, consulte o GMSPanoramaViewDelegate.

Enviar comentários sobre…

Google Maps SDK for iOS
Google Maps SDK for iOS
Precisa de ajuda? Acesse nossa página de suporte.