Il lightbox è uno strumento molto utilizzato. Di recente mi è capitato di dover utilizzare il lightbox su immagini caricate dinamicamente all’interno di un div; dopo svariate prove sono giunto a utilizzare la seguente funzione javascript:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("id_div");
 obj.innerHTML="";
 obj.innerHTML+="<a href='"+image+"' rel='lightbox'><img src='"+image+"' width='"+w+"' height='"+h+"'></a>";
 initLightbox();
 }
</script>

<div id="id_div">
</div>

La funzione showImage() va a scrivere all’interno del div con id uguale a “id_div” inserendo sia il tag <a> che il tag <img> con il metodo innerHTML, passando anche l’altezza e la larghezza che dovrà avere l’immagine. Ovviamente per poter far funzionare il lightbox bisogna inserire all’interno del tag <a> l’attributo rel=”lightbox”.
Dopodiché bisogna reinizializzare il lightbox tramite la funzione initLightbox(), questo accade perché ogni variazione dinamica dell’HTML sul codice delle immagini richiede la reinizializzazione del lightbox.
Nota: il primo innerHTML con argomento vuoto serve a evitare che le chiamate della funzione successive alla prima abbiano come effetto la sovrapposizione delle immagini precedentemente caricate.

Un’altra soluzione molto simile alla prima è la seguente:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("linkID");
 var objIMG=document.getElementById("imgID");
 obj.href=image;
 objIMG.src=image;
 objIMG.width=w;
 objIMG.height=h;
 initLightbox();
 }
</script>

<div id="id_div">
<a id="linkID" rel="lightbox"><img id="imgID"  /></a>
</div>

La differenza rispetto al caso precedente sta nell’inserire a priori all’interno del div i tag <a> e <img> e nell’inserire dinamicamente i contenuti degli attributi.
L’utilizzo della funzione è molto semplice, basta richiamarla in un qualsiasi punto della pagina web, ad esempio tramite onclick dentro un tag.

Entrambe le soluzioni proposte sono state testate su firefox 4/5 e su IE9.

Per prima cosa vediamo come fare l’inserimento di un indirizzo nel DB utilizzando la classe geocoder5 che ho trovato al questo indirizzo.  Supponiamo di aver inserito i valori che ci interessano (via, cap, città, proviancia ed, eventualmente, nazione) in un form e di riprenderli in un file che li elabora.

require("geocoder5.class.php");

//inseriamo la nostra apiKey
$gmpKey = "tua apiKey";
$data = array();

//la variabile sede contiene tutti i campi sopra citati
array_push($data, addslashes($sede));
$test = & new geocodeaddr($data,$gmpKey); //istanzio il nuovo oggetto
$geocodeResults = $test->getAddress(); //richiamo la funzione
$a=0;

//controllo che l'indirizzo sia stato trovato altrimenti visualizzo l'errore
$controlla=$test->errorMsg1;
if ($controlla=='')
foreach ($geocodeResults as $rowResult){

//prendo i valori solo alla prima iterazione
if($a==0){
$query="INSERT INTO mappa (sede, latitudine, longitudine) VALUES( '$sede', '".$rowResult['lat']."', '".$rowResult['lng']."');";
mysql_query($query) or die(mysql_error());
}

$a++;
}
else
echo $test->errorMsg1;
} ?>

Il codice fin qua è molto semplice, stiamo solamente utilizzando la classe per tradurre l’indirizzo (che ricordo deve essere possibilmente nella forma via, cap, città, proviancia ed, eventualmente, nazione) in coordinate geografiche e inseriamo tali dati in una tabella del DB. Inoltre vi è la possibilità di gestire l’eventuale errore (indirizzo non trovato) personalizzandolo a vostro piacimento .

Passiamo adesso alla visualizzazione della mappa. Per prima cosa bisogna recuperare i dati dal database e inserirli in un vettore; avremo tre vettori: uno per l’indirizzo (lo useremo come descrizione nella nuvoletta che compare cliccando sopra un punto ben preciso), uno per la latitudine e uno per la longitudine. Salto questa parte che è abbastanza semplice e passiamo al resto del codice.

<script src="http://maps.google.com/maps?file=api&amp;dev=2&amp;hl=it&amp;key="<span style="color: #888888;">tuaKey" type="text/javascript"></script>
<script type="text/javascript">
//< ![CDATA[</code>

var map = null;

<span style="color: #ccffcc;"><span style="color: #333399;">function load()</span> </span>{
if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());   /* pannellino in alto a sx x ingrandire o diminuire lo zoom */
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.90, 12.49), 5);  /* centro la mappa sull'italia */
geocoder = new GClientGeocoder();    /* oggetto che mi consente di comunicare col server gg x ottenere lat e log degli indirizzi*/

}
}//load

<span style="color: #333399;">function createMaker</span>(infos, lat, lon){

var point;
point = new GLatLng(lat,lon); //creo il punto
map.addOverlay(createMarker(point, infos)); //aggiunge il punto alla mappa

}

<span style="color: #333399;">function createMarker</span>(point, infos)
{
var icona = new GIcon();
icona.image = "img/marker.png"; //scelgo il puntatore
icona.iconSize = new GSize(12, 20);
icona.iconAnchor = new GPoint(6, 20);
icona.infoWindowAnchor = new GPoint(6, 20);
icona.shadowSize = new GSize(24, 20);

// Variabile marker
var marker = new GMarker(point, icona);

// Crea listener per il click sull'oggetto
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(infos);
});

return marker;
}

<span style="color: #333399;">function showAll()</span>{

var infos=Array(
< ?php
$b=0;
while($b<(count($x)-1)){
echo "$indirizzi[$b]";
if($b!=(count($indirizzi)-2)) echo ",";
$b++;
}//while1
?>
);

var latitudine=Array(
< ?php
$c=0;
while($c<(count($latitudine)-1)){
echo "$latitudine[$c]";
if($c!=(count($latitudine)-2)) echo ",";
$c++;
}//while2
?>
);

var longitudine=Array(
< ?php
$d=0;
while($d<(count($longitudine)-1)){
echo "$longitudine[$d]";
if($d!=(count($longitudine)-2)) echo ",";
$d++;
}//while3
?>
);

for(var i=0; i<indirizzi .length; i++) createMaker(infos[i], latitudine[i], longitudine[i]);

}//showAll
//]]>
</indirizzi></script>

La funzione load() ha il compito di istanziare un oggetto del tipo GMap2 che è quello che ci permette di comunicare con il server di google per ottenere i servizi necessari al nostro scopo. Successivamente verrà richiamata la funzione showAll() che ha il compito di trasformare gli array php in array javascript per passarli alla funzione createMaker. Quest’ultima funzione verrà richiamata più volte per quante sono le località da visualizzare nella mappa.

La funzione createMaker deve creare, per ogni coppia di coordinate geografiche, un punto per la mappa che verrà aggiunto dalla funzione addOverlay della classe GMap2 . Tale funzione accetta in ingresso, però, un oggetto di tipo GMarker e, per ottenere tale oggetto, richiamiamo la funzione createMarker. All’interno di tale funzione possiamo definire l’icona (un’immagine a nostra scelta) da utilizzare e le sue proprietà, ma lo scopo principale è quello di creare il marker passandogli il punto e le informazioni da visualizzare nella relativa nuvoletta. Nell’esempio riportato la nuvoletta delle informazioni viene visualizzata al click del mouse sull’icona ed è gestita da GEvent.addListener.

Supponiamo di inserire il codice appena visto in un file chiamato mappa.php, per terminare il nostro script non ci resta che richiamare le funzioni al caricamento della pagina:

<body onLoad="load(); showAll();" onUnload="GUnload()">

Se volessimo integrare la mappa in una nostra pagina web a parte basta inserire il codice:

<iframe align="middle" width="430" height="450" frameborder="0" src="mappa.php">

nel punto della pagina in cui vogliamo visualizzare la mappa e il gioco è fatto.