Marcadores

Selecione a plataforma: Android iOS JavaScript

Os marcadores indicam locais únicos no mapa.

Por padrão, os marcadores usam um ícone padrão que tem a mesma aparência do marcador do Google Maps. Se quiser personalizar o marcador, é possível mudar a cor do marcador padrão, substituir a imagem do marcador por um ícone personalizado ou mudar outras propriedades do marcador.

Em resposta a um evento de clique em um marcador, você pode abrir uma janela de informações. Uma janela de informações mostra textos ou imagens em uma janela de diálogo acima do marcador. Você pode usar uma janela de informações padrão para exibir texto ou criar sua própria janela de informações personalizada para controlar completamente o conteúdo.

Adicionar um marcador

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

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

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;
      

É possível animar a adição de novos marcadores ao mapa definindo a propriedade marker.appearAnimation como:

• kGMSMarkerAnimationPop para fazer com que o marcador saia do groundAnchor quando adicionado.
• kGMSMarkerAnimationFadeIn para fazer com que o marcador apareça gradualmente quando adicionado.

Remover um marcador

Para remover um marcador do mapa, defina a propriedade map do GMSMarker como nil. Como alternativa, remova todas as sobreposições (inclusive marcadores) no mapa chamando o método clear GMSMapView.

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 modificações em um marcador após adicioná-lo ao mapa, mantenha o objeto GMSMarker. Você pode modificar o marcador mais tarde fazendo alterações nesse objeto.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Como mudar 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 transmitindo a imagem resultante para a 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 mudar a imagem do marcador padrão, defina um ícone personalizado usando a propriedade icon ou iconView do marcador. Se iconView estiver definido, a API ignorará a propriedade icon.

Como 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 fragmento presume que o aplicativo contém uma imagem chamada "house.png".

Swift

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

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
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 seu aplicativo quando vários marcadores são exibidos.

Essa imagem pode ter vários quadros. Além disso, a propriedade alignmentRectInsets é respeitada, o que é útil se o marcador tiver uma sombra ou outra região inutilizável.

Como 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 mudança na cor do marcador. O snippet assume que seu aplicativo contém uma imagem com o nome "House.png".

Swift

import CoreLocation
import GoogleMaps

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

  override func viewDidLoad() {
    super.viewDidLoad()

    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 CoreLocation;
@import GoogleMaps;

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

@implementation MarkerViewController {
  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:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Como iconView aceita um UIView, é possível ter uma hierarquia de controles de IU padrão definindo seus marcadores, cada visualização tendo o conjunto padrão de recursos 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 oferece suporte à animação de todas as propriedades animáveis de UIView, exceto frame e center.

Considere o seguinte ao usar iconView:

• O UIView pode exigir recursos quando o tracksViewChanges é definido como YES, o que pode resultar no aumento do uso da bateria. Em comparação, um único frame UIImage é 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 rastreando as mudanças ao mesmo tempo.
• Um iconView não responde à interação do usuário, porque é um instantâneo da visualização.
• A visualização se comporta como se clipsToBounds estivesse definido como YES, independentemente do valor real. É possível aplicar transformações que trabalham fora dos limites, mas o objeto que você desenha precisa estar dentro dos limites do objeto. Todas as transformações/mudanças são monitoradas e aplicadas. Resumindo: as subvisualizações precisam estar contidas na visualização.

Para decidir quando definir a propriedade tracksViewChanges, considere as considerações de desempenho em relação às vantagens de ter o marcador redesenhado automaticamente. Exemplo:

• Se você tiver uma série de mudanças a fazer, mude a propriedade para YES e depois de volta para NO.
• Quando uma animação está em execução ou o conteúdo está sendo carregado de forma assíncrona, mantenha a propriedade definida como YES até a conclusão das ações.

Como mudar a opacidade do marcador

Controle a opacidade de um marcador com a propriedade opacity. Especifique a opacidade como um número flutuante entre 0.0 e 1.0, em que 0 é totalmente transparente e 1 é totalmente opaco.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

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

Como nivelar 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 muda necessariamente a orientação do marcador.

Você pode definir a orientação de um marcador como plana em relação ao solo. Os marcadores planos giram quando o mapa gira e mudam de 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 como YES ou true.

Swift

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

Objective-C

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

Como girar um marcador

Você pode girar um marcador em torno 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 em 90°. Definir a propriedade groundAnchor como 0.5,0.5 faz com que o marcador seja girado em torno do centro, em vez da base.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Como processar eventos em marcadores

É possível escutar eventos ocorridos no mapa, como o toque de um usuário em um marcador. Para detectar eventos, é necessário implementar o protocolo GMSMapViewDelegate. Consulte Eventos e gestos de marcador para saber como processar eventos de marcador específicos. O guia para eventos também fornece uma lista de métodos no GMSMapViewDelegate. Para eventos do Street View, consulte GMSPanoramaViewDelegate.