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 aparência comum do Google Maps e sentir. Se quiser personalizar seu marcador, você pode alterar a cor do marcador padrão, substituir a imagem do marcador por um ícone personalizado ou alterar outro do marcador.

Em resposta a um evento de clique em um marcador, você pode abrir uma mensagem Janela. Uma janela de informações exibe texto 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 por completo seu conteúdo.

Adicionar um marcador

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

O exemplo a seguir demonstra como adicionar um marcador a um marcador GMSMapView. O marcador é criado nas coordenadas 10,10 e mostra 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;

Você pode animar a adição de novos marcadores ao mapa definindo o marker.appearAnimation para:

  • kGMSMarkerAnimationPop para fazer o marcador se destacar da groundAnchor. quando adicionados.
  • kGMSMarkerAnimationFadeIn para fazer com que o marcador apareça gradualmente quando adicionado.

Como remover um marcador

Para remover um marcador do mapa, defina a propriedade map do GMSMarker para nil. Como alternativa, remova todas as sobreposições (incluindo marcadores) atualmente no mapa chamando o método clear do 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 depois de 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;

Alterar a cor do marcador

Você pode personalizar a cor da imagem padrão do marcador solicitando uma versão do ícone padrão com markerImageWithColor: e transmitindo o 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 alterar a imagem do marcador padrão, você pode definir um ícone personalizado, usando a propriedade icon ou iconView do marcador. Se iconView estiver definido, a API ignora 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 snippet pressupõe que seu 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;

Se você estiver criando vários marcadores com a mesma imagem, use a mesma instância de UIImage para cada um dos marcadores. Isso ajuda a melhorar o desempenho ao exibir muitos marcadores.

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

Usar a propriedade iconView do marcador

O snippet a seguir cria um marcador com um ícone personalizado definindo o propriedade iconView do marcador e anima uma alteração 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 uma UIView, é possível ter uma hierarquia de interfaces de usuário padrão controles que definem seus marcadores, cada visualização com o conjunto padrão de animação recursos. É 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 as seguintes considerações ao usar iconView:

  • UIView pode exigir recursos quando tracksViewChanges está definido para YES, o que pode aumentar o uso da bateria. Em comparação, um O único frame UIImage é estático e não precisa ser renderizado novamente.
  • Alguns dispositivos podem ter dificuldade para renderizar o mapa se você tiver muitos marcadores ativados tela, e cada marcador tem o próprio UIView, e todos os marcadores estão rastreando ao mesmo tempo.
  • Um iconView não responde à interação do usuário, porque é um snapshot dos a visualização.
  • A visualização se comporta como se clipsToBounds estivesse definida como YES, independentemente da o valor real. É possível aplicar transformações que funcionam fora dos limites, mas o objeto que você desenhar deve estar dentro dos limites do objeto. Tudo 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, pondere considerações de desempenho em relação às vantagens de ter o marcador redesenhado automaticamente. Exemplo:

  • Se você precisar fazer uma série de alterações, altere 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é que as ações sejam concluídas.

Como alterar a opacidade do marcador

Controle a opacidade de um marcador com a propriedade opacity. Você deve especificar a opacidade como um ponto flutuante entre 0 e 1, em que 0 é totalmente transparente e 1 é totalmente opaca.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

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

Como nivelar um marcador

Os ícones de marcador normalmente são desenhados na orientação da tela do dispositivo, e não superfície do mapa, portanto, girar, inclinar ou alterar o zoom do mapa não implica necessariamente alterar a orientação do marcador.

Você pode definir a orientação de um marcador como plana em relação ao solo. Liso os marcadores giram quando o mapa é girado e alteram a perspectiva quando o mapa é inclinado. Assim como os marcadores regulares, os marcadores planos retêm o tamanho quando o mapa é mais ou menos zoom.

Para alterar a orientação do marcador, defina a propriedade flat dele 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;

Girar um marcador

Você pode girar um marcador em torno de seu ponto de fixação, definindo a rotation. . Especifique a rotação como um tipo CLLocationDegrees, medida 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°. Como definir o groundAnchor como 0.5,0.5 faz com que o marcador seja girado em torno de seu centro, em vez da base dele.

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;

Gerenciar eventos em marcadores

É possível detectar eventos ocorridos no mapa, como quando um usuário toca em um marcador. Para detectar eventos, você precisa implementar o GMSMapViewDelegate. Consulte eventos de marcadores e gestos para aprender a lidar eventos de marcadores específicos. O guia para eventos também fornece uma lista de em GMSMapViewDelegate. Para eventos do Street View, consulte GMSPanoramaViewDelegate