Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Janelas de informações

  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 (normalmente textos ou imagens) em uma janela pop-up sobre o mapa, em uma determinada localização. A janela de informações tem uma área de conteúdo e uma ponta afunilada. A extremidade da ponta é conectada a uma localização especificada no mapa.

Normalmente, janelas de informações são anexadas a marcadores, mas também é possível anexá-las a uma latitude/longitude específica, como descrito abaixo na seção sobre adição de janela de informações.

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

Adicionar uma janela de informações

O construtor InfoWindow aceita um literal de objeto InfoWindowOptions, que especifica os parâmetros iniciais da exibição da janela de informações.

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

  • content contém uma string de texto ou um nó DOM para exibição na janela de informações.
  • pixelOffset contém um deslocamento da ponta da janela de informações até a localização onde a janela de informações está ancorada. Na prática, não é necessário especificar esse campo. Use o valor padrão.
  • position contém a LatLng onde a janela de informações está ancorada. Observação: uma InfoWindow pode ser anexada a um objeto Marker (a posição da janela é baseada na localização do marcador) ou ao próprio mapa, em uma LatLng especificada. Uma forma de recuperar um LatLng é usando o serviço de Geocodificação. A abertura de uma janela de informações em um marcador atualiza automaticamente a position.
  • maxWidth especifica a largura máxima da janela de informações em pixels. Por padrão, uma janela de informações expande de acordo com o conteúdo e o texto é dividido automaticamente se a janela de informações ocupa todo o mapa. Especifique maxWidth para que a janela de informações divida o texto automaticamente na largura especificada. Se a janela alcança a largura máxima e há espaço vertical na tela, ela pode se expandir verticalmente.

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

Para dimensionar explicitamente o conteúdo, coloque-o em um elemento <div> e aplique estilo ao <div> usando CSS. Também é possível usar CSS para ativar a rolagem. Observe que, se a rolagem não está ativada e o conteúdo excede o espaço disponível na janela de informações, o conteúdo pode vazar da janela de informações.

Abrir uma janela de informações

Quando uma janela de informações é criada, ela não é exibida automaticamente no mapa. Para que ela fique visível, chame o método open() em InfoWindow, passando o Map onde será aberta e, opcionalmente, o Marker onde será ancorada. Se nenhum marcador é fornecido, a janela de informações é aberta usando a propriedade position.

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

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var 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>';

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

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var 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>';

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

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

Ver o exemplo (infowindow-simple.html).

O exemplo a seguir define o maxWidth de uma janela de informações: Ver o exemplo (infowindow-simple-max.html).

Fechar uma janela de informações

Por padrão, uma InfoWindow permanece aberta até que o usuário clique no controle de fechamento (uma cruz no canto superior direito da janela de informações). Feche a janela de informações explicitamente chamando o método close().

Mover uma janela de informações

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

  • Chame 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 passar um marcador, a InfoWindow usará a posição especificada na construção por meio do literal de objeto InfoWindowOptions.

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.