Google Maps, PHP – Trasformare un indirizzo in coordinate (latitudine e longitudine)

Ecco come apparirà la nostra google maps una volta caricato l’indirizzo di un utente

Nell’articolo precedente abbiamo visto come è possibile aggiornare latitudine e longitudine semplicemente cliccando su un punto della mappa o trascinando il marker alla posizione voluta.

Oggi vi presento uno script più completo che, oltre a quanto detto sopra, ci darà la possibilità di convertire un indirizzo fisico in coordinate con la semplice pressione di un tasto. Una volta recuperate le coordinate in questo modo, saranno aggiornati anche gli input che contengono le nuove latitudine e longitudine. Trattandosi di un semplice form, potrete poi gestirlo a vostro piacimento (per esempio salvarlo nel database).

Per lo scopo sarà utile aver letto l’articolo precedente, perché le nozioni spiegate non saranno ripetute qui ma soltanto riprese: si darà quindi per assodato il fatto di aver compreso il funzionamento del javascript per creare l’evento “aggiorna coordinate in caso di click sulla mappa o di trascinamento del marker”. Si tratta comunque di un codice fisso e se non avete necessità di personalizzarlo, anche in questo caso potete limitarvi a scaricare lo script e a modificarne solo la struttura grafica.

Funzionamento dello script

Lo script è commentato dove serve. Nel codice sarà adoperato un misto di html, javascript, jquery, php e mysql.
Per quanto riguarda il php e il mysql, sono richieste soltanto conoscenze di base: uso delle variabili, come connettarsi a un database di tipo mysql e recuperare i dati da una tabella. Per chi avesse poca dimestichezza con l’interazione php-mysql, è a disposizione un articolo di base dettagliato.

La completa comprensione dello script richiede, naturalmente, una conoscenza approfondita del javascript e delle api di Google Maps, ma se quello che cercate è un codice pronto da usare vi basterà prenderlo così com’è e cambiare la grafica per adattarla al vostro sito.

Vediamo in breve le funzionalità che lo script vi metterà a disposizione:
– possibilità di caricare la pagina con una mappa predefinita
– possibilità di cambiare le coordinate (latitudine e longitudine) con un click sulla mappa o trascinando il marker; gli input saranno di conseguenza aggiornati
– possibilità di scrivere un indirizzo e di trasformarlo in coordinate alla pressione di un tasto, aggiornando la mappa

All’interno dello zip troveremo sei file:
– index.php : la pagina principale, che richiamerà tutti gli altri file. Al suo interno troveremo dunque il form, la mappa stampata e i campi di input.
– config.inc.php: contiene i dati per la connessione al database.
– jquery.js: include le librerie JQuery, necessarie per gli aggiornamenti in tempo reale degli input.
– google_maps.js: contiene le funzioni javascript che si preoccupano di interagire con la Google Maps. E’ il cuore dello script.
– style.css: il foglio di stile per formattare l’aspetto del form e della mappa.
– utenti.sql: è la tabella degli utenti, che potete importare nel vostro database.

Download script

Pagina diretta alla scheda e al download del codice

Le basi: inclusioni e database

Nel file index.php dobbiamo prima di tutto includere i file di base e cioè i file config.inc.php, jquery.js, style.css e google_maps.js. Dell’ultimo ci occuperemo in seguito: per adesso ci basta sapere che contiene il javascript che abbiamo visto nell’articolo precedente (messo per l’appunto in questo js a parte per comodità), con l’aggiunta di una funzione.
Dobbiamo inoltre richiamare le api di Google Maps, sempre come javascript. Nel complesso sarà qualcosa di questo tipo:

1
2
3
4

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="google_maps.js"></script>

L’unica considerazione va fatta per il database. Dovete creare una semplice tabella chiamata “utenti”, il cui scopo sarà di elencare gli utenti che hanno accesso al sito. A ogni utente sarà associato un indirizzo fisico e le coordinate latitudine e longitudine per trovare quell’indirizzo sulla mappa.
Nello specifico, la tabella avrà almeno questi campi:
– id (autoincrementale e univoco)
– indirizzo
– citta
– cap
– provincia
– lat : conterrà la latitudine dell’indirizzo
– lng : conterrà la longitudine dell’indirizzo
Da notare che i quattro campi dell’indirizzo potrebbero essere riuniti in un unico campo (va modificato di conseguenza lo script). Qui sono distinti per questione di efficienza: spesso, infatti, nei siti si richiede di specificare ogni singolo campo.

Assumiamo di prendere il primo utente (id=1) e di estrarre inizialmente i suoi dati dal database.

Index.php

Il form della pagina conterrà i due campi input destinati a mostrare la latitudine e la longitudine. Inoltre, saranno presenti i quattro campi input visti sopra (indirizzo, città, cap e provincia). Tutti questi input dovranno avere associato un id, grazie al quale potremmo aggiornare i loro valori. Saranno cioè di questa forma:

1
2
3
4

<div class="blocco">
    <div class="nome_campo">Indirizzo</div>
    <input type="text" name="indirizzo" id="indirizzo" value="<?php if(isset($row['indirizzo'])) echo $row['indirizzo'];?>" class="input" />
</div>

Il valore $row['indirizzo'] deriverà dai dati dell’utente che abbiamo estratto da database (se non è vuoto).
Come potete vedere nello script, sotto agli input per l’indirizzo e prima di stampare la Google Maps, si trova un pulsante:

1

<input type="button" value="Ricarica la mappa" class="input" onclick="codeAddress( $('#indirizzo').val()+', '+$('#citta').val()+' '+$('#cap').val()+' '+$('#provincia').val())">

A questo è associato un evento JQuery, che sarà richiamato alla pressione del pulsante stesso. In pratica, al click, recupereremo i valori dei quattro campi input e la funzione codeAddress() si occuperà di convertirli in latitudine e longitudine (esamineremo dopo questa funzione).

Ci resta da analizzare le varie condizioni che stabiliscono, di volta in volta, i valori della latitudine e longitudine, necessarie per aggiornare la mappa. Il codice è il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?php
// se lat e lng sono state salvate su db, vengono prese di default;
if($row['lat']!="" and $row['lng']!=""){?>
	<script type="text/javascript">
	var lat='<?php echo $row['lat']?>';
	var lng='<?php echo $row['lng']?>';
	$(window).load(function(){
		initialize();
	});
	</script>
<?php

// se non esistono, centro la mappa in base all'indirizzo
}elseif(isset($row['citta']) and $row['citta']!=''){?>
	<script type="text/javascript">
		var address="<?php echo $row['indirizzo'].", ".$row['citta']." ".$row['provincia']?>";
		$(window).load(function(){
			initialize();
			codeAddress(address);
		});
	</script>
<?php

// se non esiste nemmeno l'indirizzo, setto la mappa in un indirizzo di default
}else{?>
	<script type="text/javascript">
		var lat='0';
		var lng='0';
		var address="verona, italia";
		$(window).load(function(){
			initialize();
			codeAddress(address);
		});
	</script>
<?php }?>

1) La prima condizione si verifica se nei dati estratti dal database troviamo i campi lat e lng non vuoti, cioè se all’utente sono già state salvate in precedenza delle coordinate. In questo caso le coordinate per inizializzare la mappa all’apertura della pagina risultano essere esattamente quelle del database.

2) La seconda condizione si verifica nel caso in cui si è premuto sul pulsante Ricarica la mappa: in questo caso viene preso l’indirizzo fisico dei quattro input, che viene passato nella funzione codeAddress(), la quale lo convertirà in nuove coordinate (la mappa sarà aggiornata in base a queste).

3) Infine, la condizione di default prende un indirizzo di base da noi stabilito: nel nostro caso “Verona”. Sarà passato nello stesso modo del punto 2. Questa condizione, quindi, si verificherà anche all’apertura della pagina nel caso in cui l’utente estratto dal database abbia i campi lat e lng vuoti.

Google_maps.js

Le funzioni presenti nel javascript sono fondamentalmente quelle che abbiamo visto nell’articolo precedente. Come noterete, però, nella funzione initialize() (che sarà richiamata in index.php) è stata aggiunta questa riga:

1

geocoder = new google.maps.Geocoder();

Il Geocoder è la chiave che ci permette di convertire un indirizzo civico in latitudine e longitudine, richiamando le api di Google Maps. Senza di questa, otterremo un errore nel codice del browser che ci impedirà di caricare la mappa.
Con questa riga, dunque, inizializzeremo l’oggetto geocoder e potremmo richiamare dove serve la funzione codeAddress() (punti 2 e 3 delle condizioni nell’index.php). Il codice:

1
2
3
4
5
6
7
8
9
10
11
12
13

// funzione che trasforma un indirizzo in coordinate, e le imposta sulla mappa e negli input
function codeAddress(address) {
	geocoder.geocode( { 'address': address}, function(results, status){
		if(status == google.maps.GeocoderStatus.OK){
			map.setCenter(results[0].geometry.location);
			marker.setPosition(results[0].geometry.location);
			$('#coord_lat').val(results[0].geometry.location.lat());
			$('#coord_lng').val(results[0].geometry.location.lng());
		}else{
			alert("Geocode ha rilevato questo errore: " + status);
		}
	});
}

Il metodo usato è molto simile al solito settaggio delle coordinate: cambia soltanto l’uso di funzioni adatte per convertire l’indirizzo in coordinate.
Oltre a centrare la mappa con le nuove coordinate, notiamo anche come aggiorniamo gli input che hanno l’id coord_lat e coord_lng tramite JQuery: assumeranno, infatti, i valori delle nuove latitudini e longitudini.

Documentazione ufficiale di Google Maps