Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Google Maps: le API v.3

di: Filippo Buratti 11 Gennaio 2010

Geocoding e ricerca degli indirizzi delle località

Geocoding è il processo di conversione di un indirizzo testuale (Viale Franco Angeli, 5 - Roma) in coordinate geografiche (latitudine, come 41.8963364 e longitudine 12.5777451), che è possibile utilizzare per varie operazioni come posizionare i marcatori o specificare il centro della stessa mappa.

L'API di Google Maps V.3 fornisce una classe geocoder per la geocodifica di indirizzi dinamici derivanti dall'input dell'utente: l'accesso al servizio di geocoding avviene istanziando l'oggetto google.maps.Geocoder, il quale dispone del metodo geocode() che avvia una richiesta passando due argomenti, il letterale GeocodeRequest e una funzione di callback da eseguire una volta completata la richiesta. L'oggetto GeocodeRequest può contenere diverse proprietà; una obbligatoria, address, che permette di specificare l'indirizzo testuale della ricerca, o in alternativa latLng, qualora si volessero passare le coordinate per effettuare un reverse geocoding. La risposta ottenuta dalla richiesta (GeocodeResults) è un oggetto JSON che con Javascript possiamo facilmente percorrere per ottenere le proprietà e le informazioni che ci interessano:

formatted_address è una stringa contenente la versione formattata dell'indirizzo della posizione richiesta.
address_component [] è un array contenente varie voci testuali con informazioni sull'indirizzo specificato.
geometry contiene verie informazioni riguardo le coordinate: a fini pratici ricordiamo la proprietà position che rappresenta l'oggetto latLng con la latitudine e longitudine dell'indirizzo richiesto.

Attraverso il valore restiuito GeocoderStatus possiamo monitorare l'esito della richiesta: prima di utilizzare le informazioni contenute nelle risposta del geocoder e di creare la mappa, è bene infatti verificare che la richiesta abbia avuto successo e siano disponibili dei risultati verificando l'esistenza di Google.maps.GeocoderStatus.OK.

Non rimane che controllare il codice necessario e vedere l'esempio del geocoding.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3: geocoding</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var createMap = function() {
   searchAddress();
	var address = document.getElementById("address").value;
	var geocoder = new google.maps.Geocoder();
	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('map'), options);
		var marker = new google.maps.Marker({position: results[0].geometry.location, map: map});
		} else {
			alert("Problema nella ricerca dell'indirizzo: " + status);
  		}
	});
}
var searchAddress = function(){
	document.getElementById("submit").onclick = function() {
		createMap();
	}
}
window.onload = createMap;
</script>
</head>
<body>
<div>
<input id="address" type="textbox" value="Viale Franco Angeli, 5 - Roma">
<input id="submit" type="button" value="trova indirizzo sulla mappa">
</div>
<div id="map"></div>
</body>
</html>

Pagina successiva

Pagine: