Usare jQuery con le Google Maps

Usare jQuery con le API di Google Maps (versione 3) non solo è possibile, ma aggiunge un tocco di dinamismo in più alle nostre mappe. In questo articolo vedremo come aggiungere un effetto lightbox ad una mappa di Google. L'utente clicca su un link presente all'interno di una finestra informativa della mappa e appare un'immagine con effetto lightbox. Il segreto è usare il metodo live() di jQuery per gestire l'evento click. Vediamo i dettagli.

Funzione del metodo live()

Questo metodo ha un unico scopo: gestire gli eventi sugli elementi che vengono creati dinamicamente da JavaScript e quindi non presenti originariamente nella struttura DOM della pagina.

Nelle Google Maps i contenuti delle finestre informative (chiamate InfoWindow) sono interamente generati da JavaScript. Se non usassimo il metodo live() non potremmo gestire gli eventi su questi elementi.

Il metodo ha la seguente sintassi:

$(elemento).live('evento', callback);

callback è la funzione che useremo per gestire l'evento.

La marcatura

La nostra marcatura è costituita da due componenti: il contenitore della mappa e gli elementi costituenti del lightbox:

<div id="map"></div>

<div id="overlay"></div>

<div id="lightbox">
	
  <img src="castello.jpg" alt="" />
		
  <div id="content">
    <p>Il Castello di Formigine</p>
    <a href="#" id="close">X</a>
  </div>
	
</div>

Il CSS

Usiamo il posizionamento assoluto per posizionare la mappa e il lightbox. Quest'ultimo dovrà essere nascosto all'inizio:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
}

body {
	position: relative;
}

#map {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -250px 0 0 -300px;
}

#pic {
  width: 200px;
  height: 135px;
  padding: 5px;
}

#pic p {
  margin: 0;
  text-align: center;
  font: small Arial, sans-serif;
  padding-top: 5px;
}

#pic img {
  display: block;
  width: 100px;
  height: 114px;
  margin: 0 auto;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #333;
	display: none;
}

#lightbox {
	width: 500px;
	height: 470px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -235px 0 0 -250px;
	background: #fff;
	font: 100% Arial, sans-serif;
	display: none;
}

#lightbox img {
	width: 400px;
	height: 420px;
	display: block;
	margin: 0 auto;
	padding-top: 10px;
}

#content {
	width: 400px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 10px;
}

#content p {
	margin: 0;
	float: left;
	text-transform: uppercase;
}

#content a {
	color: #d34545;
	font-weight: bold;
	text-decoration: none;
	float: right;
}

Il posizionamento assoluto farà in modo che l'elemento overlay coprirà la mappa. A sua volta a tale elemento si sovrapporrà il box che contiene l'immagine con la didascalia.

Il codice jQuery

Dobbiamo tenere il nostro codice jQuery separato dalle routine delle API di Google Maps, quindi lo eseguiamo prima del resto dello script:

(function() {

    var map, infoWindow, gMap = google.maps;


    window.onload = function() {
    
        $('#overlay').css('opacity', '0.7');
        
        $('#open').live('click', function(event) {
        
          $('#overlay').show();
          $('#lightbox').show();
        
          event.preventDefault();
        
        });
        
        $('#close').live('click', function(event) {
        
          $('#overlay, #lightbox').hide();
    
        
          event.preventDefault();
        
        });
    
      // codice delle API di Google Maps
      
   };
})();

Per prima cosa dobbiamo impostare l'opacità dell'elemento overlay per creare l'effetto di patinatura sulla pagina. Poi usiamo il metodo live() per gestire due eventi click: il primo mostra l'elemento di overlay e il box con l'immagine, il secondo li nasconde.

Entrambi i link che andremo a gestire sono generati dinamicamente. Notate che anche se eseguiamo il nostro codice prima che i link vengano creati, jQuery tiene traccia della creazione (anche futura) di questi elementi e gli associa un gestore di eventi.

Potete visionare l'esempio finale in questa pagina.