Janelas de informações

Selecione a plataforma: Android iOS JavaScript

Janela de informações sobre um marcador.

Uma janela de informações permite exibir informações ao usuário quando ele toca em um marcador.

Uma janela de informações é desenhada orientada em relação à tela do dispositivo, centralizada acima do marcador associado a ela. A janela de informações padrão contém o título em negrito, com o texto do snippet abaixo do título.

O conteúdo da janela de informações é definido pelas propriedades title e snippet do marcador. Clicar no marcador não exibe uma janela de informações se as propriedades title e snippet estiverem em branco ou nil.

Apenas uma janela aparece de cada vez. Se um usuário tocar em outro marcador, a janela atual será ocultada e a nova janela de informações será aberta. Se o usuário clicar em um marcador que está mostrando uma janela de informações, essa janela será fechada e reaberta.

Crie uma janela de informações personalizada para adicionar outros textos ou imagens. Uma janela de informações personalizada oferece controle total da aparência do pop-up.

Adicionar uma janela de informações

O snippet a seguir cria um marcador simples, com apenas um título para o texto da 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;

Com a propriedade snippet, é possível adicionar mais texto que aparecerá abaixo do título em uma fonte menor. Strings maiores que a largura da janela de informações são automaticamente agrupadas em várias linhas. Mensagens muito longas podem ficar truncadas.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Mostrar/ocultar uma janela de informações

As janelas de informações são projetadas para responder a eventos de toque do usuário no marcador. É possível mostrar ou ocultar uma janela de informações de maneira programática, definindo a propriedade selectedMarker de GMSMapView:

  • Defina selectedMarker como o nome do marcador para mostrá-lo.
  • Defina selectedMarker como nil para ocultá-lo.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;

Como configurar uma janela de informações para atualizar automaticamente

Defina tracksInfoWindowChanges no marcador como YES ou true se quiser que novas propriedades ou o conteúdo da janela de informações sejam exibidos imediatamente quando forem alterados, em vez de esperar que a janela de informações seja ocultada e mostrada novamente. O padrão é NO ou false.

Swift

london.tracksInfoWindowChanges = true

Objective-C

london.tracksInfoWindowChanges = YES;

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

  • Se você tiver uma série de mudanças a serem feitas, altere a propriedade para YES e depois para NO.
  • Quando uma animação está em execução ou o conteúdo está sendo carregado de forma assíncrona, você precisa manter a propriedade definida como YES até que as ações sejam concluídas.

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

Como alterar a posição de uma janela de informações

Essas janelas aparecem na tela do dispositivo e ficam centralizadas acima do marcador associado. Você pode alterar 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) em que x e y estão entre 0,0 e 1,0. O deslocamento padrão é (0,5, 0,0), ou seja, a parte superior central. Definir o deslocamento infoWindowAnchor é útil para alinhar a janela de informações a um ícone personalizado.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Processamento de eventos em janelas de informações

Você pode ouvir os seguintes eventos da janela de informações:

Para detectar eventos, você precisa implementar o protocolo GMSMapViewDelegate. Consulte o guia para eventos e a lista de métodos na GMSMapViewDelegate.

O GitHub inclui exemplos que demonstram como processar eventos da janela de informações:

Personalizar janelas de informações

Personalize o conteúdo das janelas de informações criando uma subclasse de UIView que defina o layout da janela. Nessa subclasse, defina a visualização como quiser. Por exemplo, é possível usar instâncias UILabel personalizadas para exibir o título e o snippet de texto e outras visualizações, como instâncias UIImageView, para adicionar imagens exibidas na janela de informações.

Verifique se seu ViewController implementa o protocolo GMSIndoorDisplayDelegate e define um listener para o evento mapView:markerInfoWindow:. Esse listener de eventos é chamado quando um marcador está prestes a ser selecionado e permite retornar uma instância da classe UIView personalizada para definir a janela de informações personalizada usada pelo marcador.

As imagens abaixo mostram uma janela de informações padrão, outra com conteúdo personalizado e uma com frame e segundo plano personalizados.

Comparação de janelas de informações

As amostras de código no GitHub fornecidas com o SDK do Maps para iOS incluem amostras de janelas de informações personalizadas. Por exemplo, consulte a definição de MarkerInfoWindowViewController.m (Objective-C) ou MarkerInfoWindowViewController.swift (Swift).

Consulte as amostras de código para informações sobre como fazer o download e executar essas amostras.