Janelas de informações

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Selecione a plataforma: Android iOS JavaScript
  1. Introdução
  2. Adicionar uma janela de informações
  3. Abrir uma janela de informações
  4. Fechar uma janela de informações
  5. Mover uma janela de informações

Introdução

Uma InfoWindow exibe conteúdo (geralmente texto ou imagens) em uma janela pop-up acima do mapa, em um determinado local. A janela de informações tem uma área de conteúdo e uma estrutura cônica. A ponta da raiz é anexada a um local especificado no mapa. As janelas de informações aparecem como uma caixa de diálogo para os leitores de tela.

Uma janela de informações que exibe informações sobre um local na Austrália.

Normalmente, você anexa uma janela de informações a um marcador, mas também pode anexar uma janela de informações a uma latitude/longitude específica, conforme descrito na seção sobre como adicionar uma janela de informações abaixo.

Falando genericamente, as janelas de informações são um tipo de sobreposição. Para ver informações sobre outros tipos de sobreposição, consulte Como desenhar no mapa.

Adicionar uma janela de informações

O construtor InfoWindow usa um literal de objeto InfoWindowOptions, que especifica os parâmetros iniciais para exibir a janela de informações.

O literal do objeto InfoWindowOptions contém os seguintes campos:

  • content contém uma string de texto ou um nó DOM a ser exibido na janela de informações.
  • pixelOffset contém um deslocamento da gorjeta da janela de informações até o local em que a janela está fixada. Na prática, não é necessário especificar esse campo. Deixe o valor padrão.
  • position contém o LatLng em que essa janela de informações está fixada. Observação: um InfoWindow pode ser anexado a um objeto Marker (nesse caso, a posição dele é baseada no local do marcador) ou ao próprio mapa em uma LatLng especificada. Uma maneira de recuperar um LatLng é usando o serviço de geocodificação. A abertura de uma janela de informações em um marcador atualiza automaticamente o position.
  • maxWidth especifica a largura máxima da janela de informações em pixels. Por padrão, uma janela de informações se expande para caber no conteúdo e ajusta o texto automaticamente se ela preencher o mapa. Se você adicionar um maxWidth, a janela de informações será quebrada automaticamente para aplicar a largura especificada. Se ela atingir a largura máxima e houver espaço vertical na tela, a janela de informações poderá se expandir verticalmente.

O conteúdo de InfoWindow pode conter uma string de texto, um snippet de HTML ou um elemento DOM. Para definir o conteúdo, especifique-o no InfoWindowOptions ou chame setContent() no InfoWindow explicitamente.

Para dimensionar explicitamente o conteúdo, coloque-o em um elemento <div> e estilize o <div> com CSS. Também é possível usar CSS para ativar a rolagem. Se você não ativar a rolagem e o conteúdo exceder o espaço disponível na janela de informações, o conteúdo poderá espalhar-se pela janela.

Abrir uma janela de informações

Quando uma janela de informações é criada, ela não é exibida automaticamente no mapa. Para tornar a janela de informações visível, chame o método open() na InfoWindow, transmitindo um literal de objeto InfoWindowOpenOptions especificando as seguintes opções:

  • map especifica o mapa ou panorama do Street View em que o mapa será aberto.
  • anchor contém um ponto de fixação (por exemplo, Marker). Se a opção anchor for null ou não estiver definida, a janela de informações será aberta na propriedade position.
  • shouldFocus especifica se o foco precisa ou não ser movido dentro da janela de informações quando for aberto.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

window.initMap = initMap;
Ver exemplo

Testar amostra

O exemplo a seguir define o maxWidth de uma janela de informações: ver exemplo

Definir o foco em uma janela de informações

Para definir o foco em uma janela de informações, chame o método focus() dela. Considere usar esse método com um evento visible antes de definir o foco. Chamar esse método em uma janela de informações não visível não terá efeito. Chame open() para tornar uma janela de informações visível.

Fechar uma janela de informações

Por padrão, uma janela de informações permanece aberta até que o usuário clique no controle de fechamento (uma cruz no canto superior direito da janela de informação) ou pressione a tecla ESC. Você também pode fechar a janela explicitamente chamando o método close().

Quando uma janela de informações é fechada, o foco volta para o elemento que estava em foco antes da abertura da janela. Se esse elemento não estiver disponível, o foco será movido de volta para o mapa. Para substituir esse comportamento, é possível detectar o evento closeclick e gerenciar manualmente o foco, conforme mostrado no exemplo a seguir:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Mover uma janela de informações

A localização de uma janela de informações pode ser alterada de duas formas:

  • Ligue para setPosition() na janela de informações ou
  • Anexe a janela de informações a um novo marcador usando o método InfoWindow.open(). Observação: se você chamar open() sem transmitir um marcador, o InfoWindow usará a posição especificada durante a construção pelo literal do objeto InfoWindowOptions.

Personalização

A classe InfoWindow não oferece personalização. Em vez disso, consulte o exemplo de pop-up personalizado para saber como criar um pop-up totalmente personalizado.