Janelas de informações

Selecione a plataforma: Android iOS JavaScript

Uma janela de informações que aparece sobre um marcador.

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

Uma janela de informações é desenhada em relação à tela do dispositivo, centralizada acima do marcador associado. 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á oculta 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, ela vai se fechar e reabrir.

Crie uma janela de informações personalizada para adicionar mais texto ou imagens. Uma janela de informações personalizada oferece controle total sobre a 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, você pode adicionar mais texto que vai aparecer abaixo do título em uma fonte menor. Strings mais longas que a largura da janela de informações são automaticamente transferidas para várias linhas. Mensagens muito longas podem ser 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 foram 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á-la.

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 definir uma janela de informações para atualização automática

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

Swift

london.tracksInfoWindowChanges = true

Objective-C

london.tracksInfoWindowChanges = YES;

Para decidir quando definir a propriedade tracksInfoWindowChanges, pese as considerações de desempenho com as vantagens de ter a janela de informações redesenhada automaticamente. Exemplo:

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

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

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

Essas janelas aparecem na tela do dispositivo e ficam centralizadas acima do marcador associado. É possível 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 variam entre 0,0 e 1,0. O deslocamento padrão é (0,5, 0,0), ou seja, o centro superior. 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;

Como processar eventos em janelas de informações

É possível detectar os seguintes eventos da janela de informações:

Para detectar eventos, é necessário implementar o protocolo GMSMapViewDelegate. Consulte o guia de eventos e a lista de métodos no GMSMapViewDelegate.

O GitHub inclui exemplos que demonstram como processar eventos de infowindow:

Personalizar janelas de informações

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

Verifique se o 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

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

Consulte exemplos de código para informações sobre como fazer o download e executar esses exemplos.