Info Window no Google Maps API JavaScript v3 Uma Info Window é um <div> e pode ser formatada através de CSS, pode conter quaisquer outros elementos HTML no seu interior.

Info Window no Google Maps API JavaScript v3

por quinta-feira, 26 de setembro de 2013

A Info Window do Google Maps não é mais do que um <div> em forma de balão de banda desenhada, com uma posição no mapa definida através das coordenadas do marcador.

Assim, a infowindow pode ser personalizada com CSS e pode conter quaisquer outros elementos HTML no seu interior.
O conteúdo da Info Window pode ser definido na inicialização do mapa, no caso de o mapa conter somente um marcador, ou a posteriori através de uma chamada à API com a função setContent().

No caso de haver mais do que um marcador no mapa, o conteúdo da Info Window é definido aquando da criação do marcador, sendo utilizada a mesma Info Window para todos os marcadores.

Artigos relacionados:

Antes de iniciar o tutorial vê uma demonstração do mapa ou faz o download do código necessário para seguir este exemplo.

DEMO DOWNLOAD

Criar a Info Window

A crição de uma Info Window para um único marcador é bastante simples e obedece aos seguintes requisitos:

  • Conteúdo que pode ser simples texto ou HTML
    JavaScript /map.jsmarnoto.com
    var conteudo = '<div id="iw_container">' +
          '<div class="iw_title">Museu Marítimo de Ílhavo</div>' +
          '<div class="iw_content">Visite o aquário de bacalhaus no Museu Marítimo de Ílhavo.</div>' +
       '</div>';
  • Criar a nova Info Window com o construtor da API  new google.maps.InfoWindow(), e ao mesmo tempo indicar que a Info Window deve buscar o seu conteúdo na variável conteudo anteriormente definida
    JavaScript /map.jsmarnoto.com
    var infowindow = new google.maps.InfoWindow({
       content: conteudo
    });
    
  • Abrir a Info Window através de uma função da API que detecta um click no respectivo marcador e abre a InfoWindow.
    A função google.maps.event.addListener(<marcador>, <evento>, <acção>) está constantemente à espera de um click (neste caso o <evento> é um click) no marcador (<marcador> neste exemplo só existe um marcador definido no mapa), para executar uma <acção> que neste caso é uma função que faz uma chamada à API (infowindow.open(<mapa>,<marcador>) e pede que a Info Window - definida na variável infowindow - seja aberta ( .open() ) no mapa definido em map e cujas coordenadas devem ser as mesmas do marcador definido em marker.
    Pode parecer complicado mas o exemplo seguinte mostra como é bastante simples abrir uma Info Window no respectivo marcador.
    JavaScript /map.jsmarnoto.com
    google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map,marker);
    });
    

A API insere um link ( x ) no topo direito para que o utilizador possa fechar a Info Window. Adicionalmente podemos inserir um novo evento - infowindow.close() - que fecha a Info Window com um click no mapa.
Como o exemplo seguinte mostra, desta vez a API é instruída para aguardar um click no mapa e quando isso acontecer fecha a Info Window.

JavaScript /map.jsmarnoto.com
  // evento que fecha a infoWindow com click no mapa
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

Agora tudo junto...
JavaScript /map.jsmarnoto.com
var ilhavo = new google.maps.LatLng(40.604036,-8.665247);
var museu = new google.maps.LatLng(40.604382,-8.665983);

function initialize() {
   var mapOptions = {
      center: ilhavo,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
   };

   var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

   // variável que define o conteúdo da Info Window
   var conteudo = '<div id="iw_container">' +
                  '<div class="iw_title">Museu Marítimo de Ílhavo</div>' +
                  '<div class="iw_content">Visite o aquário de bacalhaus no Museu Marítimo de Ílhavo.</div>' +
                  '</div>';

   // cria a nova Info Window com referência à variável infowindow e atribui o conteúdo
   var infowindow = new google.maps.InfoWindow({
      content: conteudo
   });

   // variável que define as opções do marcador
   var marker = new google.maps.Marker({
      position: museu, // variável com as coordenadas Lat e Lng
      map: map,
      title:"Museu Marítimo de Ílhavo"
   });

   // procedimento que mostra a Info Window através de um click no marcador
   google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker); //map e marker são as variáveis definidas anteriormente
   });

  // evento que fecha a infoWindow com click no mapa
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
Ver exemplo do mapa.

Este exemplo mostra como adicionar uma simples Info Window com conteúdo em HTML. A Info Window também pode receber links, imagens e formulários.

Todas as dúvidas ou comentários são bem-vindos. Por favor, utilizar a secção de comentários para que todos partilhem da informação.

CURIOSIDADE
O Museu Marítimo de Ílhavo inaugurou em 2013 o primeiro Aquário de Bacalhaus do país. Museu Marítimo de Ílhavo


Download dos ficheiros necessários para este exemplo

Miguel Marnoto

A minha especialização no Google Maps e na sua API JavaScript v3 é uma consequência do gosto pelos mapas e o reconhecimento da importância que o serviço Google Maps tem hoje no dia-a-dia das pessoas.

18 comentários para ''Info Window no Google Maps API JavaScript v3"

COMENTAR
  1. Muito bom seu tutorial...mas eu estou com uma duvida gostaria de saber como posso fazer para abrir o infowindow do marcador a partir de uma lista de endereços...
    Esse é um modelo da duvida: http://www.flexpro.com.br/Downloads/modeloGmaps.jpg
    Muito obrigado.

    ResponderEliminar
    Respostas
    1. Olá Marciano Olinski, agradeço o seu comentário.

      Voce deve ter criado um evento para o abrir a infowindow, certo? Então só precisa de "acordar" esse evento.
      Ou seja, se voce criou um evento do tipo "google.maps.event.addListener(marker, 'click', function() {..." e o código deste evento faz abrir a infowindow. Então, necessita de criar uma função que vai "acordar" este evento.

      Veja a função que eu utilizo:
      function myclick(i) {
      google.maps.event.trigger(markers[i],"click");
      }

      em que "myclick" pode ser o nome que voce quiser. (i) é o ID do marcador, normalmente guardado numa variavel (array) com nome "markers". O evento google.maps.event.trigger vai accionar (acordar) o evento que eu referi acima.

      Agora, para chamar a função "myclick(i)" eu utilizo um parametro onclick="myclick(i)" no html de cada marcador da lista de endereços. Pode ser no título do marcador ou no div que envolve a imagem, titulo e restante informação.
      Atenção que eu uso javascript para criar a lista de endereços e por isso torna-se fácil de passar o valor de "i" para a função myclick(i).

      Não sei se ajudei ou se confundi ainda mais :) deixe aqui as suas duvidas, eu tentarei ajudar com mais pormenor.

      Eliminar
    2. Muito obrigado pela ajuda, com essas informações que você passou deu pra fazer direito.

      Foi usado na própria função que carrega o marker no mapa o código:
      $('.idimovel'+Id).click(function(){
      google.maps.event.trigger(marker,"click");
      });
      no final do teste, if (status == google.maps.GeocoderStatus.OK) {.

      e na div do item uma class="idimovel1, onde o numero 1 é o id para class.

      Ficou bom...
      Obrigado mesmo pela atenção, um abraço.

      Eliminar
    3. Ainda bem que voce compreendeu tudo, pois eu não sabia o seu grau de conhecimento da API.

      Nesse tipo de layout eu também utilizo um método "mouseover" e "mouseout" em cada endereço da coluna da esquerda, que vai mudar a cor do marker. Dessa forma o utilizador consegue identificar a localização dos itens no mapa só com passagem do rato sobre a lista.
      Talvez isto possa indicar o caminho a tomar:

      google.maps.event.addDomListener(document.getElementById("idDiv"+i), "mouseover", function() {
      marker.setIcon(icon_marker_hover);
      });

      icon_marker_hover é uma variável que guarda o nome do icon alternativo.

      depois só tem de reverter a situação com:

      google.maps.event.addDomListener(document.getElementById("idDiv"+i), "mouseout", function() {
      marker.setIcon(icon_marker);
      });

      icon_marker guarda o nome do icon que utiliza por omissão.

      Se voce quiser criar o mesmo efeito com passagem do rato sobre o marcador, utiliza este código:

      google.maps.event.addListener(marker, 'mouseover', function() {
      this.setIcon(icon_marker_hover);
      });

      Boa sorte!

      Eliminar
  2. Miguel, bacana o compartilhamento de informações. Estou usando a API V3 com PHP e DB e estou com um pouco de dificuldade na hora de inserir uma infoWindow para cada marcador. teria como me ajudar? Posso enviar o código.

    ResponderEliminar
    Respostas
    1. Guilherme Marianelli, terei muito gosto em ajudar. Pode utilizar o formulário de contacto http://www.marnoto.com/p/contacto.html para enviar o link para o código.

      Eliminar
  3. Marnoto, tenho uma dúvida, eu consigo resgatar uma informação do API V3 e separa-lo em uma variável tipo session para um formulário que estou construindo em asp ?

    ResponderEliminar
    Respostas
    1. Qualquer informação proveniente do Google Maps API pode ser resgatada numa variável do JavaScript. A API do Google Maps só funciona em JavaScript. O ASP é uma linguagem server side, o JavaScript é browser side. O ASP é executado antes do JavaScript.
      Se quiser o HTML serve de intermediário. Ou seja, se quiser pode utilizar elementos HTML ocultos para transferir informações entre páginas ou para guardar em bases de dados.
      Receio que a minha resposta não seja muito útil, pode fornecer um exemplo?

      Eliminar
  4. como faço para customizar a infowindow de maneira que o cabeçalho tenha uma cor diferente do content?

    ResponderEliminar
    Respostas
    1. Veja neste link se é isto que pretende: http://maps.marnoto.com/infowindow_styled/exemplo.html

      recorrendo ao jquery pode aceder ao elemento que aplica o fundo à infowindow:

      google.maps.event.addListener(infowindow, 'domready', function() {
      $('#iw_container').parent().parent().css({left: '0', top: '0', width: '100%'});
      });

      depois o css do título:

      .iw_title {
      padding: 10px;
      background-color: #86D1E9;
      margin: 1px;
      border-radius: 2px 2px 0px 0px;
      }

      Eliminar
  5. como fazer para que a infowindow se adapte ao device? o código deste exemplo do google (https://developers.google.com/maps/documentation/javascript/infowindows) mostra uma infowindow com bastante conteúdo. se eu abrí-la em um smartphone, ela fica uma faixa estreita e com barra de rolagem ao lado. como faço para que ela se adapte a tela do dispositivo assim como o exemplo que você me mostrou no link "http://maps.marnoto.com/infowindow_styled/exemplo.html"? e quando abro a infowindow

    https://developers.google.com/maps/documentation/javascript/infowindows
    Miguel, eu conseguiria colocar um código html referênciando-o como $('#pagina') ?
    por exemplo, tenho em meu código a div < id="minhadiv">conteúdo< >
    como eu poderia fazê-lo?

    ResponderEliminar
    Respostas
    1. 1ª questão: Por norma a infowindow adapta-se automaticamente à área do mapa. Testei o mapa (https://developers.google.com/maps/documentation/javascript/infowindows) num Android 4.2 (browser nativo e Chrome) e a infowindow apareceu com a largura total do ecran, sem barra de rolagem. Assim, não me foi possível fazer testes para descobrir o seu problema.

      No entanto, eu utilizo sempre as seguintes definições de CSS para o mapa, e isto poderá estar relacionado com o que você descreveu:

      #map-canvas {
      margin: 0;
      padding: 0;
      max-width: none;
      }


      2ª questão: no código de exemplo eu defini a variável "var conteudo = ... " para o conteúdo da infowindow. Só precisa substituir o valor da variável por $('#minhadiv').html();

      Fica assim:
      var conteudo = $('#minhadiv').html();

      Eliminar
    2. Muito obrigado pela pela ajuda e pela paciência, abraço

      Eliminar
  6. Olá, tem como deixar o infowindow aparecendo sem precisar clicar?

    ResponderEliminar
  7. Boa tarde Miguel ótimos tutoriais, estou realizando um projeto que preciso trazer do banco de dados os endereços até ai ok consegui mostrar todos os marcadores no mapa. Mas preciso colocar uma infowindow em cada marcador seguindo seu artigo consegui mas só aparece uma no ultimo endereço da lista. Quando clico em outro marcador abre a infoWindow do ultimo marcador que foi colocado.
    Como posso resolver isso?

    Desde já agradeço.

    ResponderEliminar
    Respostas
    1. Olá Rogério, o seguinte código tem de ser colocado dentro da função que faz a busca dos dados no banco de dados:
      // procedimento que mostra a Info Window através de um click no marcador
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker); //map e marker são as variáveis definidas anteriormente
      });

      Sem ver o teu código é difícil apontar a solução correcta, entra em contacto comigo através do formulário "Contacto" no menu do topo.

      Eliminar
    2. Enviei o e-mail e o código do projeto.

      Eliminar
  8. Boa noite amigo meu nome é Marcio, gostaria de saber por favor como eu chamaria esta função do info window de fora do mapa por exemplo de uma tabela ao clicar em um respectivo endereço e chamar a janela do info window corresponde-te no mapa, se poder me ajudar fico grato forte abraço.

    ResponderEliminar