Google Maps Geocoding API

Google Maps Geocoding API

In questo articolo vedremo un servizio web di traduzione degli indirizzi di località in coordinate geografiche denominato Google Maps Geocoding API.

Tutorial GWT: creiamo un servizio GWT RPC
GWT Designer: un Gui Designer per Google Web Toolkit
Creare interfacce grafiche Java con Google WindowBuilder Pro

In questo articolo vedremo un servizio web di traduzione degli indirizzi di una località (human readable, come ad esempio via Garibaldi Roma) in coordinate geografiche (in termini di latitudine: 41.890066, e longitudine: 12.465884) messo a disposizione da Google tramite le Api di Google Maps.

Questo servizio denominato Google Maps Geocoding API è utile per poter posizionare un marker sulla mappa o per individuare una posizione.

Esiste inoltre il servizio di Reverse Geocoding che è il processo di conversione delle coordinate geografiche in un indirizzo di località. Le Google Maps Geocoding API consentono inoltre di trovare l’indirizzo di un dato luogo dato il suo place ID (il place id è l’identificativo univoco di un dato luogo sulle Google Maps).

Prima di iniziare ci sono due cose da tenere a mente:

  • il Geocoding richiede tempo e risorse di calcolo. Quando è possibile conviene memorizzare i risultati in una cache temporanea delle località di cui si sono già ottenute le coordinate;
  • per utilizzare l’API di Google Maps per il Geocoding, è necessario avere una API key (vedi questo articolo per sapere come ottenerla).

Una richiesta al servizio di Google Maps Geocoding assume la seguente forma:

https://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

o su protocollo non protetto:

http://maps.googleapis.com/maps/api/geocode/outputFormat?parameters

dove OutputFormat può essere uno dei seguenti valori:

  • JSON (consigliato): indica l’output in JavaScript Object Notation (JSON);
  • xml: indica l’output in XML.

I parameters obbligatori in una richiesta di geocoding sono:

  • address:  l’indirizzo di cui si desidera effettuare il geocoding, nel formato utilizzato dal servizio postale nazionale del paese interessato.;
    key: la chiave API della propria applicazione. Questa chiave identifica l’applicazione ai fini della gestione delle quote.

Piuttosto che effettuare una chiamata Http o Https diretta al servizio di Geocoding è possibile utilizzare l’oggetto google.maps.Geocoder.

Il metodo Geocoder.geocode() avvia una richiesta al servizio di geodecodifica, passandogli un oggetto GeocoderRequest contenente i parametri di input e un metodo di callback da eseguire al momento della ricezione della risposta (poichè l’accesso al servizio di Geocoding è asincrono).

Un esempio di utilizzo dell’oggetto Geocoder è il seguente:

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == 'OK') {
  map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
  map: map,
  position: results[0].geometry.location
 });
 } else {
  alert('Geocode was not successful for the following reason: ' + status);
 }
});

Il risultato è un oggetto di tipo GeocoderResult e contiene i seguenti elementi:

  • formatted_address: è una stringa contenente l’indirizzo formattato dell’indirizzo fornito nella richiesta. Spesso questo indirizzo è equivalente al “recapito postale”, che a volte è diverso da paese a paese.  Questo indirizzo è generalmente composto da uno o più componenti. Ad esempio, l’indirizzo “111 8th Avenue, New York, NY” contiene componenti di indirizzi separati per “111” (il numero civico), “8th Avenue” (la strafa), “New York” (la città) e “NY” (stato americano). Questi componenti di indirizzi contengono informazioni aggiuntive, come indicato di seguito;
  • geometry: la quale a sua volta contiene le seguenti informazioni:
    • location: contiene la latitudine e la longitudine. Per le normali ricerche di indirizzi, il campo è in genere il più importante.
  • partial_match: indica che il servizio di geocoding non ha restituito una corrispondenza esatta per la richiesta originale, anche se era in grado di matchare parte dell’indirizzo richiesto. Si dovrebbe esaminare la richiesta originale per errori ortografici e/o un indirizzo incompleto;
  • place_id: è un identificatore univoco che può essere utilizzato con altri servizi messi a disposizione dalle API di Google.

Il valore invece contenuto nella variabile status, che è un oggetto di tipo GeocoderStatus, ci permette di valutare se la risposta ottenuta dal servizio è corretta o meno.

Essa può restituire i seguenti valori:

  • OK: indica che non si sono verificati errori; l’indirizzo è stato analizzato con successo e almeno un geocodifica è stata restituita;
  • ZERO_RESULTS: indica che la geocodifica ha avuto successo, ma non ha restituito alcun risultato. Ciò può verificarsi se al geocoder è stato passato un indirizzo inesistente;
  • OVER_QUERY_LIMIT: indica che si è superata la quota di query assegnata;
  • REQUEST_DENIED: indica che la richiesta è stata negata;
  • Invalid_request: indica che la query (indirizzi, componenti o LatLng) è mancante in qualche parte;
  • UNKNOWN_ERROR: indica che la richiesta non può essere elaborato a causa di un errore del server. La richiesta può riuscire se si tenta di nuovo.

Creiamo un esempio con le Google Maps Geocoding API

Riportiamo ora il codice di una pagina HTML di esempio:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { 
	height: 100% 
} 
body { 
	height: 100%; margin: 0; padding: 0 
} 
#canvas_mappa { 
	height: 100% 
} 
.control-ui {
    padding: 7px;font-family: Roboto;
}
#search-control-ui, #results-control-ui {
    background-color: white;
    font-size: 12px;
    margin: 5px;
    max-height: 200px;
    overflow: auto;
    width: 380px;
    -webkit-user-select: none;
    padding: 8px;
    border-radius: 2px;
    -webkit-background-clip: padding-box;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
    min-width: 40px;
    background-clip: padding-box;
}
</style> 
<script type="text/javascript"> 
function initializza() { 
	document.getElementById("geocode-button").addEventListener('click', function() {
        searchAddress();
    });
	var latLngRoma = new google.maps.LatLng(41.8905198, 12.4942486); 
	var opzioni = { 
		center: latLngRoma, 
		zoom: 8, 
		mapTypeId: google.maps.MapTypeId.ROADMAP 
	}; 
	var map = new google.maps.Map(document.getElementById("canvas_mappa"), opzioni); 
	var marker = new google.maps.Marker({position: latLngRoma, map: map, title: "Roma" }); 
} 

var searchAddress = function() {
	var address = document.getElementById("query-input").value;
    var geocoder = new google.maps.Geocoder();
	var infowindow = new google.maps.InfoWindow;
    geocoder.geocode( {'address': address}, function(results,status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var options = {
                zoom: 12,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
			var map = new google.maps.Map(document.getElementById('canvas_mappa'), options);
			var marker = new google.maps.Marker({position: results[0].geometry.location, map: map});
			infowindow.setContent(results[0].formatted_address);
			infowindow.open(map, marker);
			var rectangle = new google.maps.Rectangle({
			  strokeColor: '#FF0000',
			  strokeOpacity: 0.8,
			  strokeWeight: 2,
			  fillColor: '#FF0000',
			  fillOpacity: 0.0,
			  map: map,
			  bounds: {
				north: results[0].geometry.location.lat()+0.01,
				south: results[0].geometry.location.lat()-0.01,
				east: results[0].geometry.location.lng()+0.02,
				west: results[0].geometry.location.lng()-0.02
			  }
			});
        } else {
            alert("Problema nella ricerca dell'indirizzo: " + status);
        }
    });
	}
</script> 
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBtcTpsK4cQVIQ6CjvSLrQLS9cWND3vDgY&callback=initializza">
</script>
</head> 
<body > 
<div id="canvas_mappa" style="width:100%; height:100%"></div> 
<div class="control-ui" style="z-index: 0; position: absolute; right: 0px; top: 0px;">
	<div id="search-control-ui">
        <p>Inserisci una località per provare le funzionalità di Geocoding</p>
        <input id="query-input" autofocus="">
        <input id="geocode-button" type="button" value="Geocode">
    </div>
</div>
</body> 
</html> 

L’esempio può essere provato a questo indirizzo:

https://www.appuntisoftware.it/codeexamples/gmaps/geocoding.html

Al seguente indirizzo è possibile valutare un esempio più evoluto dove viene mostrato il recupero di più record in quanto l’indirizzo immesso è presente in più stati o regioni geografiche (ad esempio la località Orlando, la quale è presente in quattro stati differenti all’interno del suolo americano):

https://www.appuntisoftware.it/codeexamples/gmaps/geocoding2.html

COMMENTS

WORDPRESS: 2
  • comment-avatar

    Bene, ottimi e utili consigli

  • comment-avatar

    Molto interessante, grazie