CSS e Google Maps InfoWindow

Nella terminologia delle Google Maps, una InfoWindow è un oggetto JavaScript che fornisce delle informazioni su un luogo. Questo oggetto assume la forma di un tooltip statico con un'ombra che copre una porzione della mappa. Il dato interessante è che un oggetto InfoWindow accetta qualsiasi tipo di contenuto (per esempio marcatura) definito dall'autore della mappa. In altre parole, è possibile inserire immagini, oggetti esterni, testo e qualsiasi altro tipo di marcatura. In questo articolo vedremo come assegnare degli stili CSS a questo tipo di contenuto. L'articolo non spiega come creare una mappa con la versione 3 delle API di Google Maps. A questo riguardo vi consiglio invece il libro Beginning Google Maps API 3, davvero esauriente.

Un oggetto InfoWindow viene così definito dalla documentazione ufficiale delle Google Maps:

Una InfoWindow visualizza del contenuto in una finestra flottante sulla mappa. Assomiglia a una nuvoletta dei fumetti: ha del contenuto al suo interno e una base situata su un punto preciso della mappa. Tali oggetti sono visibili cliccando sui marcatori della mappa.

Vogliamo inserire un'immagine e una didascalia in questo oggetto. Useremo quindi il seguente codice JavaScript:

var img = '<div id="pic"><img/><p>...</p></div>';

La prima cosa da fare per visualizzare la nostra mappa, tuttavia, è assegnare degli stili all'elemento HTML che la contiene. Se l'elemento non ha delle dimensioni definite, la mappa non verrà visualizzata. Inoltre una Google Map è elastica, nel senso che si adatta perfettamente alle dimensioni dell'elemento HTML scelto come contenitore:

#map {
  width: 600px;
  height: 500px;
  margin: 2em auto;
}

La mappa verrà centrata nella finestra del browser. Passiamo alla InfoWindow. Le dimensioni di questo oggetto sulla pagina sono determinate dalle dimensioni (specificate o intrinseche) del contenuto al suo interno. Se si specificano delle dimensioni maggiori della mappa stessa, il contenuto verrà ridimensionato per essere adattato alla mappa. In altri casi verranno aggiunte delle barre di scorrimento per permettere di visualizzare il contenuto di tale oggetto.

#pic {
  width: 400px;
  height: 190px;
  padding: 5px;
}

#pic p {
  margin: 0;
  text-align: center;
  font: italic small Arial, sans-serif;
  float: left;
}

#pic img {
  display: block;
  width: 268px;
  height: 188px;
  float: left;
  padding-right: 5px;
}

Si tratta semplicemente di due elementi flottati all'interno di un contenitore. Abbiamo anche specificato un'altezza per il contenitore per essere sicuri che l'immagine avesse abbastanza spazio verticale per essere visualizzata correttamente.

Potete visionare l'esempio finale in questa pagina.