Google Maps: como criar uma InfoWindow personalizada?

A InfoWindow padrão do Google Maps para um marcador de mapa é muito redonda. Como faço para criar uma InfoWindow personalizada com cantos quadrados?

EDITAR Depois de alguma caça, esta parece ser a melhor opção:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Você pode ver uma versão personalizada deste InfoBubble que usei no Dive Seven, um site para registro de mergulho autônomo online . Se parece com isso:

Existem mais alguns exemplos aqui . Eles definitivamente não parecem tão bons quanto o exemplo em sua captura de tela, no entanto.

Você pode modificar toda a InfoWindow usando apenas jquery ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

Aqui, o elemento <p> atuará como um gancho para a InfoWindow real. Assim que o domready for acionado, o elemento ficará ativo e acessível usando javascript / jquery, como $('#hook').parent().parent().parent().parent().

O código a seguir apenas define uma borda de 2 pixels em torno da InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

Você pode fazer qualquer coisa, como definir uma nova classe CSS ou apenas adicionar um novo elemento.

Brinque com os elementos para obter o que você precisa ...

Achei o InfoBox perfeito para estilização avançada.

Uma caixa de informações se comporta como google.maps.InfoWindow , mas oferece suporte a várias propriedades adicionais para estilos avançados. Uma caixa de informações também pode ser usada como rótulo de mapa. Uma caixa de informações também dispara os mesmos eventos que google.maps.InfoWindow .

Inclua http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js em sua página

Definir o estilo da janela de informações é bastante simples com o vanilla javascript. Eu usei algumas das informações deste tópico ao escrever isto. Também levei em consideração os possíveis problemas com versões anteriores do ie (embora não tenha testado com eles).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

O código cria a janela de informações como de costume (sem necessidade de plug-ins, sobreposições personalizadas ou código enorme), usando um div com um id para armazenar o conteúdo. Isso fornece um gancho no sistema que podemos usar para obter os elementos corretos para manipular com uma folha de estilo externa simples.

Existem algumas peças extras (que não são estritamente necessárias) que tratam de coisas como colocar um gancho no div com a imagem da janela de informações de fechamento nele.

O loop final esconde todas as peças da seta do ponteiro. Eu mesmo precisava disso, pois queria ter transparência na janela de informações e a flecha atrapalhou. Claro, com o gancho, alterar o código para substituir a imagem da seta por um png de sua escolha deve ser bastante simples também.

Se você quiser alterá-lo para jquery (não tenho ideia de por que faria), isso deve ser bastante simples.

Normalmente não sou um desenvolvedor de javascript, então qualquer pensamento, comentário, crítica bem-vinda :)

O trecho de código abaixo pode ajudá-lo.

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

Aqui está um artigo < Como localizar vários endereços no google maps com zoom perfeito > que me ajudou a conseguir isso. Você pode consultá-lo para obter o link JS Fiddle e um exemplo completo.

Não tenho certeza de como o FWIX.com está fazendo isso especificamente, mas aposto que eles estão usando sobreposições personalizadas .

Você pode usar o código abaixo para remover o estilo padrão da janela. Depois que você pode usar o código HTML para inforwindow:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

Aqui está uma solução CSS pura baseada no exemplo da janela de informações atual no google:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

Esta é uma solução rápida que funcionará bem para pequenas janelas de informações. Não se esqueça de votar se isso ajudar: P

Você pode até mesmo anexar sua própria classe css no contêiner / tela pop-up ou como quiser. O google maps 3.7 atual tem pop-ups estilizados por um elemento canvas que antecede o contêiner div de pop-up no código. Portanto, no googlemaps 3.7, você pode entrar no processo de renderização pelo evento domready do pop-up como este:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling não está presente no IE8 - então, se você quiser fazer funcionar, siga isto .

verifique a referência de InfoWindow mais recente para eventos e muito mais.

Achei isso mais limpo em alguns casos.

Acho que a melhor resposta que encontrei é aqui: https://codepen.io/sentrathis96/pen/yJPZGx

Eu não posso levar o crédito por isso, eu fiz isso de outro usuário codepen para corrigir a dependência do Google Maps para realmente carregar

Anote a ligação para:

InfoWindow() // constructor