Google Maps: come creare un InfoWindow personalizzato?

Question

La finestra predefinita di Google Maps InfoWindow per un indicatore di mappa è molto rotonda. Come posso creare un InfoWindow personalizzato con angoli quadrati?

Answer 1

Non sono sicuro di come FWIX.com lo stia facendo in modo specifico, ma scommetto che stanno usando Custom Overlays.

Answer 2

EDIT Dopo un po 'di caccia in giro, questo sembra essere l'opzione migliore:

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

Si può vedere una versione personalizzata di questo InfoBubble che ho usato su Dive Seven, a website for online scuba dive logging. Ecco come si presenta:

---

Google provide a demo che mostra come implementare una finestra di informazioni personalizzato. Richiede una buona quantità di codice, ma sembra piuttosto semplice.

---

Ci sono altri esempi here. Sicuramente non sembrano così belli come nell'esempio nel tuo screenshot, comunque.

Answer 3

Ho trovato InfoBox perfetto per uno stile avanzato.

un infobox si comporta come un google.maps.InfoWindow, ma supporta diverse proprietà aggiuntive per lo styling avanzato. Un InfoBox può anche essere usato come un'etichetta di mappa. Un InfoBox attiva anche gli stessi eventi come google.maps.InfoWindow.

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

Answer 4

Si può anche aggiungere la propria classe CSS sulla comparsa del contenitore/tela o come si desidera. Current google maps 3.7 ha dei popup disegnati da un elemento canvas che antepone un contenitore div popup nel codice. Così a googlemaps 3.7 si può ottenere in processo di rendering per evento domready di popup in questo modo:

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 al IE8- quindi se si vuole per farlo funzionare a esso, follow this.

check the latest InfoWindow reference per gli eventi e molto altro ..

Ho trovato questo più pulito in alcuni casi.

Answer 5

È possibile modificare l'intero InfoWindow utilizzando jQuery da solo ...

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

Qui il <p> elemento agirà come un gancio nel InfoWindow reale. Una volta che domasa viene attivato, l'elemento diventa 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'); 
     } 
    } 
}); 

Si può fare qualsiasi cosa come impostare una nuova classe CSS o semplicemente aggiungere un nuovo elemento.

Giocare con gli elementi per ottenere quello che ti serve ...

Answer 6

Styling l'infowindow è abbastanza semplice con vaniglia javascript. Ho usato alcune 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 l'infowindow come al solito (non è necessario per i plugin, sovrapposizioni personalizzate o codice enorme), utilizzando un div con un id per tenere il contenuto. Questo dà un gancio 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 gancio nel div con l'immagine della finestra informativa chiusa in esso.

L'ultimo ciclo nasconde tutti i pezzi della freccia del puntatore. Ne avevo bisogno io stesso perché volevo avere trasparenza sulla finestra dell'infinito e la freccia si intrometteva. Ovviamente, con il gancio, 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 motivo per cui lo vorrai), allora dovrebbe essere abbastanza semplice.

Io non sono di solito uno sviluppatore javascript così tutti i pensieri, commenti, critiche benvenuto :)

Answer 7

Sotto pezzo di codice può 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 < How to locate multiple addresses on google maps with perfect zoom> che mi ha aiutato raggiunto questo. È possibile fare riferimento per il funzionamento del collegamento JS Fiddle e completare l'esempio.

Answer 8

È possibile utilizzare il codice seguente per rimuovere la finestra di infor- mazione predefinita di stile. Dopo è possibile utilizzare 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 
}); 

Answer 9

Ecco una soluzione CSS puro sull'esempio 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 verrà funziona bene per piccole finestre informative. Non dimenticate di up vote se aiuta: P

Answer 10

Penso che la risposta migliore che è venuta in mente è qui: https://codepen.io/sentrathis96/pen/yJPZGx

non riesco a prendersi il merito per questo, ho biforcato questo da un altro utente codepen per risolvere la dipendenza google maps per caricare effettivamente

Annotare la chiamata a:

InfoWindow() // constructor