Google Maps: come creare una InfoWindow personalizzata?

La finestra InfoWindow predefinita di Google Maps per un indicatore di mappa è molto rotonda. Come si crea una InfoWindow personalizzata con angoli retti?

MODIFICARE Dopo un po 'di ricerche in giro, questa sembra essere l'opzione migliore:

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

Puoi vedere una versione personalizzata di questo InfoBubble che ho usato su Dive Seven, un sito web per la registrazione delle immersioni subacquee online . Assomiglia a questo:

Ci sono altri esempi qui . Tuttavia, sicuramente non sono belli come l'esempio nel tuo screenshot.

Puoi modificare l'intera InfoWindow usando solo jquery ...

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

Qui l'elemento <p> fungerà da hook nell'effettiva InfoWindow. Una volta che domready si attiva, l'elemento diventerà attivo e accessibile utilizzando javascript / jquery, come $('#hook').parent().parent().parent().parent().

Il codice seguente imposta solo un bordo di 2 pixel attorno a 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');
        }
    }
});

Puoi fare qualsiasi cosa, come impostare una nuova classe CSS o semplicemente aggiungere un nuovo elemento.

Gioca con gli elementi per ottenere ciò di cui hai bisogno ...

Ho trovato InfoBox perfetto per lo styling avanzato.

Un riquadro informazioni si comporta come una google.maps.InfoWindow , ma supporta diverse proprietà aggiuntive per uno stile avanzato. Un riquadro informazioni può essere utilizzato anche come etichetta della mappa. Un riquadro informazioni attiva anche gli stessi eventi di google.maps.InfoWindow .

Includi http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js nella tua pagina

Lo stile della finestra informativa è abbastanza semplice con javascript vanilla. Ho usato alcune delle informazioni da questo thread durante la scrittura di questo. Ho anche preso in considerazione i possibili problemi con le versioni precedenti di ie (anche se non l'ho testato con loro).

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';
  }
});

Il codice crea la finestra delle informazioni come al solito (non c'è bisogno di plugin, overlay personalizzati o codice enorme), utilizzando un div con un id per contenere il contenuto. Questo fornisce un hook nel sistema che possiamo usare per ottenere gli elementi corretti da manipolare con un semplice foglio di stile esterno.

Ci sono un paio di pezzi extra (che non sono strettamente necessari) che gestiscono cose come dare un hook al div con l'immagine di chiusura della finestra delle informazioni al suo interno.

Il ciclo finale nasconde tutti i pezzi della freccia del puntatore. Ne avevo bisogno io stesso perché volevo avere trasparenza sulla finestra informativa e la freccia si intrometteva. Naturalmente, con l'hook, anche cambiare il codice per sostituire l'immagine della freccia con un png a tua scelta dovrebbe essere abbastanza semplice.

Se vuoi cambiarlo in jquery (non ho idea del perché lo faresti) allora dovrebbe essere abbastanza semplice.

Di solito non sono uno sviluppatore javascript, quindi qualsiasi pensiero, commento, critica è benvenuto :)

Il pezzo di codice sottostante potrebbe aiutarti.

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));

Ecco un articolo < Come individuare più indirizzi su Google Maps con uno zoom perfetto > che mi ha aiutato a raggiungere questo obiettivo. Puoi fare riferimento per il collegamento JS Fiddle funzionante e l'esempio completo.

Non sono sicuro di come FWIX.com lo stia facendo nello specifico, ma scommetto che stanno usando gli overlay personalizzati .

È possibile utilizzare il codice seguente per rimuovere la finestra di informazioni predefinita dello stile. Dopo aver utilizzato il codice HTML per 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
});

Ecco una soluzione CSS pura basata sull'esempio di infowindow corrente su 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;
}

Questa è una soluzione rapida che funzionerà bene per piccole finestre informative. Non dimenticare di votare se aiuta: P

Puoi anche aggiungere la tua classe CSS nel contenitore / canvas popup o come preferisci. L'attuale google maps 3.7 ha popup in stile per elemento canvas che precede il contenitore div popup nel codice. Quindi su googlemaps 3.7 puoi entrare nel processo di rendering dall'evento domready di popup come questo:

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 non è presente in IE8, quindi se vuoi farlo funzionare, segui questo .

controlla l'ultimo riferimento InfoWindow per eventi e altro ..

In alcuni casi l'ho trovato molto pulito.

Penso che la migliore risposta che ho trovato sia qui: https://codepen.io/sentrathis96/pen/yJPZGx

Non posso prendermi il merito di questo, l'ho biforcato da un altro utente di codepen per correggere la dipendenza di Google Maps da caricare effettivamente

Prendere nota della chiamata a:

InfoWindow() // constructor