Se ci segui sul nostro blog avrete già visto degli articoli dedicati alle mappe di Google Maps e alle API, come questo in cui spiego come usare i marker o questo in cui ti spiego e ti offro il download delle mappe senza le label dei competitor. Se ci segui anche sui social (Facebook, Twitter o Google+) non ti sarai certamente perso, fra le altre risorse utili segnalate questa risorsa che offre degli stili per la mappa e se sei un po’ più pigro avrai sfruttato il nostro tool gratuito per creare delle mappe con le API di Google Maps.
Per ottenere il codice recati alla fine di questo articolo
Oggi voglio spiegarti come personalizzare le infowindows, cioè quei pop up che solitamente appaiono al click sui marker in Google Maps.
Ovviamente è necessario che tu sappia le basi delle API e un po’ di Javascript.
Per capirci meglio se riesci a creare questo, con la infowindows base tramite le API hai quanto richiesto.
Per personalizzare la infowindow abbiamo due possibilità:
- con i css
- con infobox.js
i primi sono certamente più semplici e possiamo lasciare il lavoro a chi si occupa del css, anche se magari faticherà un po’ a trovare le classi, ma sono anche meno potenti in quanto la struttura non può essere cambiata o non è conveniente farlo in questo modo, in quanto richiederebbe troppe modifiche al css che potremo risparmiarci.
Il secondo metodo permette una personalizzazione assoluta, possiamo mettere immagini di sfondo e spostare la posizione del box dove vogliamo, facendolo quindi aprire a sinistra o a destra, oppure sopra il marker.
Per capirci la prima immagine che vedi qui sotto è realizzata con i CSS mentre la seconda con infobox.js.
CSS
Vediamo subito il primo caso e il css necessario per realizzare un risultato simile.
Quello che faremo è mettere un contenuto nella nostra infowindows come segue:
var contentString = ‘<div id=”content”>’+
‘<div id=”siteNotice”>’+
‘</div>’+
‘<div id=”firstHeading”><span style=”font-size:18px;font-weight:bold;”>Uluru</span><br><br><img src=”image.jpg” style=”max-width:100%;” /><br><br>’+
‘Contact info<br>Phone: +65 123456789<br>Email: <a href=”mailto:info@example.com”>info@example.com</a>’+
‘</div><div id=”bodyContent”>’+
‘<p><b>Uluru</b> Lorem upsum</p>’+
‘</div>’+
‘</div>’;
Il codice è veramente molto semplice, creiamo giusto qualche classe per posizionare poi al meglio i nostri elementi e personalizzarli.
Il css che a noi interessa principalmente è il seguente:
.gm-style-iw {
background:#00A3FF !important;
left:0 !important;
top:0 !important;
width:100% !important;
height:100% !important;
}.gm-style div div div div div div div div div{
background:#00A3FF !important;
}
La classe “gm-style-iw” è quella del contenitore principale, che solitamente stacca il contenuto dal bordo. Nel nostro caso andremo a togliere queste distanze e metteremo un colore di sfondo.
La seconda modifica è relativa al simbolo che unisce il contenuto al marker, la freccia (che poi sono due div).
In questo caso dobbiamo aggiungere il nostro css a “gm-style div div div div div div div div div” (non contate i div :-)) ed ecco che abbiamo modificato lo sfondo e la freccia in basso.
Come abbiamo visto l’utilizzo è molto semplice, ma anche molto limitato. Per fortuna abbiamo più possibilità di manovra con infobox.js (questa la documentazione)
In questo caso come prima cosa dovremo richiamare il file infobox.js appena dopo la chiamata alle API di Google Maps e come secondo punto dovremo creare il nostro box, questo il codice usato:
var boxText = document.createElement(“div”);
boxText.style.cssText = “background: url(‘c1.png’);”;
boxText.innerHTML = “<img src=’image.jpg’ class=’imageinfo’ /><div class=’info’><strong>City Hall</strong><br>British Columbia<br>Canada</div><a href=’#’ class=’linkinfo’></a>”;
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-132, -143),
zIndex: null,
boxStyle: {
background: “url(‘c1.png’) no-repeat”,
opacity: 1,
width: “261px”,
height:’104px’
},
closeBoxMargin: “10px 10px 10px 10px”,
closeBoxURL: “close.png”,
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: “floatPane”,
enableEventPropagation: false
};
Dopo aver creato il nostro box con “var boxText” aggiungiamo un’immagine di sfondo con i css attraverso il codice “boxText.style.cssText ”. Successivamente inseriremo l’html e quindi il vero e proprio contenuto che a noi interessa.
Le ultime informazioni le mettiamo nelle opzioni e precisamente:
pixelOffset: new google.maps.Size(-132, -143), //posizione del box rispetto al marker
boxStyle: {
background: “url(‘c1.png’) no-repeat”, //sfondo
opacity: 1,
width: “261px”,
height:’104px’
},
closeBoxMargin: “10px 10px 10px 10px”, //posizione della x
closeBoxURL: “close.png”, //immagine della x di chiusura
Sicuramente il secondo esempio sarà più utile in quanto consente di sostituire interamente il contenuto del box con quello che vogliamo e si presenta quindi più personalizzabile.
Ovviamente non è finita qui, abbiamo altre 2 sorprese per voi.
Una mappa personalizzata che sfrutta gli overlay delle api di Google Maps con popup al click.
E una mappa stile “carta topografica” fatta con un po’ di css.
