Posto questo articolo per un problema che mi ha fatto dannare per qualche sera. Avevo degli indirizzi in un database da convertire tramite geocoding in coordinate e quindi visualizzarli in google maps. Problema: non riuscivo ad avere un comportamento coerente delle visualizzazioni a ogni caricamento della pagina… Perciò ho cambiato il codice inserendo nel DB non solo l’indirizzo ma direttamente le coordinate. Lo script proposto avrà una parte php per l’inserimento delle coordinate nel DB e una parte javascript per la visualizzazione della mappa.
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&dev=2&hl=it&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.
Loading...
