Il Geocoding è un tecnica che consente di convertire l'indirizzo di una via, una piazza o più semplicemente del centro città, nelle corrispondenti coordinate geografiche di latitudine e longitudine. Per mettere appunto il geocoding anche questa volta le API di Google Maps ci vengono in aiuto fornendoci la classe geocoder che con facilità ci permette d'implementare questa funzionalità.
L'implementazione del Geocoding in Javascript non è difficile sfruttando le google geocoding API, andiamo a vedere come fare.
Per prima cosa dobbiamo instanziare la classe geocoder che google maps ci mette a disposizione, con questo codice:
var geocoder = new google.maps.Geocoder();
una volta ottenuto l'oggetto ne invochiamo il metodo geocode(), il quale accetta due parametri, il primo l'indirizzo di cui si desidera calcolare le coordinate, ed il secondo una funzione, detta di callback, il cui codice verrà eseguito non appena termina l'invocazione di geocode(). Guardiamo un po di codice per renderci meglio conto di quello che stiamo dicendo:
geocoder.geocode({ 'address': "Mazara del Vallo, Via Caravaglios, 18"}, function (results, status) { ... } );
all'interno della funzione di callback andremo a porre il codice per creare la mappa ed il segnaposto (marker), ma questo lo vedremo tra un attimo, prima è importante notare che la funzione di callback accetta due parametri, results e status, il primo è un array contenente le informazioni relative alla richiesta dell'indirizzo passato, mentre status indica lo stato della richiesta, se questa ha avuto esito positivo o negativo se magari l'indirizzo passato era inesistente.
Quindi prima di sfruttare i dati restituiti per creare la nostra mappa, è necessario effettuare un controllo sullo status, osserviamo il codice intero:
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var options = { zoom: 14, center: results[0].geometry.location, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({ position: results[0].geometry.location, draggable: true, map: map, title: address });
google.maps.event.addListener(marker, "dragend", function () { ... }
});
}
else {
alert("Problema nella ricerca o indirizzo non trovato");
document.getElementById('indirizzo').value = "indirizzo non trovato"
}
il Google.maps.GeocoderStatus non è altro che un tipo enumerato che può assumere i seguenti valori:
- OK: la richieta è andata a buon fine
- REQUEST_DENIED: la pagina non possiede gli appropriati permessi per invocare il geocode()
- ZERO_RESULTS: non ci sono risultati per la ricerca effettuata, l'indirizzo non è stato trovato
- INVALID_REQUEST: richiesta non valida
essendo pertanto il parametro status di tipo GeocoderStatus, esso conterrà l'esito della nostra richiesta, se è OK, vuol dire che tutto è andato a buon fine e possiamo entrare nel corpo per eseguire il codice necessario a creare la nostra mappa, diversamente mostriamo un messaggio inerente il cattivo esito della ricerca dell'indirizzo.
Una volta effettuato il controllo, il resto del codice è quello necessario alla creazione della mappa, per prima cosa creiamo l'oggetto opzioni della mappa, il quale vuole specificate la latitudine e la longitudine sul quale centrare la mappa, a questo punto sfruttiamo il parametro results, che non è altro che un array di oggetti contenenti le informazioni della richiesta, all'indice "0" otteniamo l'oggetto delle API LatLng che rappresenta le nostre coordinate geografiche.
Dopodiché creiamo la mappa con le opzioni, ancora a seguire creiamo il segnaposto (marker), ed anche qui sfruttiamo l'oggetto results per indicarne la posizione, ed infine aggiungiamo un evento alla mappa inerente il trascinamento del marker. Con questo codice la nostra mappa ed il marker saranno centrati e posizionati al valore di latitudine e longitudine corrispondenti all'indirizzo cercato, ovviamente un indirizzo statico così passato ha poco senso, ma adattare il codice per renderlo dinamico ed interattivo è semplice, ad es l'indirizzo potrebbe essere semplicemente ricavato dall'input dell'utente su una textbox tramite il comando getElementbyId("...").value di javascript, insomma potete personalizzarlo come meglio credete.
N.B.: prima di concludere desidero farvi notare un aspetto importante, quando si invoca la funzione geocode(), questa si aspetta due parametri, il secondo è la funzione di callback di cui abbiamo parlato abbondantemente, il primo parametro di tipo stringa rappresenta l'indirizzo della richiesta per fare il Geocoding, bene, è doveroso dire che è possibile passare come parametro anche le coordinate di latitudine e longitudine o direttamente un oggetto Point (classe di Google Maps V3 indicante un punto), ad es. in questo modo:
geocoder.geocode({ 'latLng': point}, function (results, status) { ... } );
a differenza di prima invece di specificare la chiave 'address' e l'indirizzo testuale per il primo parametro, indichiamo 'latLng' ed un punto spaziale, in tal modo è possibile fare il reverse Geocoding, ovvero ricavare l'indirizzo testuale dalle coordinate geofrafiche di latitudine e longitudine, come vedremo prossimamente in un nuovo articolo.
Per chii volesse dare un'occhiata agli articoli precedenti inerenti Google Maps può visionare i seguenti link:
Infine, come sempre, per chi volesse studiare o approfondire il mondo delle Google Maps, vi indico il link da cui partire:
Google Maps Javascript API V3 Reference
Chiunque voglia aggiungere qualcosa, chiedere chiarimenti, su "Come effettuare il Geocoding con Google Maps" può farlo tramite i commenti.