16 commenti my script, jquery, php

Utilizzando le API di Google Maps ed in particolare Geocoding sarà molto semplice ottenere la latitudine e la longitudine (e non solo) di un luogo geografico.

 

All'interno della nostra pagina dovremo includere la libreria Jquery e le Google Maps Javascript API V3; avremo poi un input per consentire l'indicazione dell'indirizzo (con id=address) e un link (con id=GetMaps) al cui click effettuaremo la richiesta AJAX:

<!doctype html>
<html>
<head>
	<title>Get latitude and longitude with Jquery and Google Maps</title>
	<!-- INCLUSIONE DELLE LIBRERIE NECESSARIE -->	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=IT"></script> 
	<script>
	$(document).ready(function() {
		$("#GetMaps").click(function(){
			var input_address = $("#address").val();
			var geocoder = new google.maps.Geocoder();
			geocoder.geocode( { address: input_address }, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					var lat = results[0].geometry.location.lat();
					var lng = results[0].geometry.location.lng();
					alert(lat + ' ' + lng);
					}
				else {
					alert("Google Maps not found address!");
					}
				});
		});
	});
	</script>
</head>
<body>
<form>
<label for="address">Address*</label>
<!-- INPUT CON ID ADDRESS IN CUI L'UTENTE INSERIRIRA' L'INDIRIZZO -->
<input type="text" name="address" id="address" />

</form>

<!-- UN LINK AL CUI CLICK EFFETTUEREMO LA RICHIESTA --> 	
<a href="#" id="GetMaps">Set maps</a>

</body>
</html>

 

Individuazione della latitudine e della longitudine con Php

La procedura eseguita con Jquery e Geocoding (lato client) può essere eseguita (in alternativa o in aggiunta) anche lato server con php.

Ecco di seguito un breve codice di esempio:

<?php
$address = 'Piazza di Spagna, Roma';
$encoding_address = urlencode($address);
$GoogleAPI = 'http://maps.google.com/maps/api/geocode/xml?address='.$encoding_address.'&sensor=false';
$XMLresult = file_get_contents($GoogleAPI);
$XMLobject = new SimpleXMLElement($XMLresult);
if($XMLobject->status=='OK'){
	echo 'Latitude: '. $XMLobject->result->geometry->location->lat;
	echo '<br />Longigude: '.$XMLobject->result->geometry->location->lng;
	}
else{	
	echo 'not found';
	}
?>

 

Le API di Google Maps

Il contenuto delle api di Google Maps presenta oltre che le coordinate anche altri dati. Ad esempio nel caso di "Piazza di Spagna, Roma" l'XML ottenuto avrà la seguente struttura:

<?xml version="1.0" encoding="UTF-8"?> 
<GeocodeResponse> 
 <status>OK</status> 
 <result> 
  <type>route</type> 
  <formatted_address>Piazza di Spagna, 00187 Rome, Italy</formatted_address> 
  <address_component> 
   <long_name>Piazza di Spagna</long_name> 
   <short_name>Piazza di Spagna</short_name> 
   <type>route</type> 
  </address_component> 
  <address_component> 
   <long_name>Rome</long_name> 
   <short_name>Rome</short_name> 
   <type>locality</type> 
   <type>political</type> 
  </address_component> 
  <address_component> 
   <long_name>Rome</long_name> 
   <short_name>RM</short_name> 
   <type>administrative_area_level_2</type> 
   <type>political</type> 
  </address_component> 
  <address_component> 
   <long_name>Lazio</long_name> 
   <short_name>Lazio</short_name> 
   <type>administrative_area_level_1</type> 
   <type>political</type> 
  </address_component> 
  <address_component> 
   <long_name>Italy</long_name> 
   <short_name>IT</short_name> 
   <type>country</type> 
   <type>political</type> 
  </address_component> 
  <address_component> 
   <long_name>00187</long_name> 
   <short_name>00187</short_name> 
   <type>postal_code</type> 
  </address_component> 
  <geometry> 
   <location> 
    <lat>41.9056841</lat> 
    <lng>12.4823112</lng> 
   </location> 
   <location_type>GEOMETRIC_CENTER</location_type> 
   <viewport> 
    <southwest> 
     <lat>41.9025311</lat> 
     <lng>12.4791473</lng> 
    </southwest> 
    <northeast> 
     <lat>41.9088263</lat> 
     <lng>12.4854426</lng> 
    </northeast> 
   </viewport> 
   <bounds> 
    <southwest> 
     <lat>41.9046324</lat> 
     <lng>12.4812168</lng> 
    </southwest> 
    <northeast> 
     <lat>41.9067250</lat> 
     <lng>12.4833731</lng> 
    </northeast> 
   </bounds> 
  </geometry> 
 </result> 
</GeocodeResponse>

 

Attraverso analogo meccanismo visto per la latitudine e la longitudine sarà possibile, pertanto, ottenere tutti i dati che compongono l'indirizzo: il CAP (postal_code), la provincia (administrative_area_level_2) disponibile sia nel formato esteso che nella sigla, la regione (administrative_area_level_1), la nazione (country), nonchè l'indirizzo completo nella versione formattata esattamente (formatted_address).

 

Un utilizzo concreto

L'utilizzo potrebbe essere quello di agevolare la compilazione di un form per l'inserimento di una determinata località: tramite Google Maps potremo verificare che la località esiste (una sorta di validazione) e completare l'indirizzo in tutte le sue componenti.

Nella demo che segue basterà inserire il nome della città e tramite geocode si avrà l'autocompilazione di tutti i dati del form, nonchè si potrà visualizzare la sua localizzazione mappa (statica).

DEMO DOWNLOAD

 

L'utilità delle coordinate geografiche

Ottenere le coordinate geografiche non è un esercizio di stile. Infatti, l'identificazione di località è sempre opportuno eseguirla attraverso le coordinate geografiche per molteplici ragioni: 

  • identificare in maniera univoca la località;
  • generare la Google Maps con uno o più makers;
  • eseguire calcoli sulle distanze: ad esempio calcolare distanze fra località o ottenere le località "vicine".

Potete ben comprendere quindi come il form realizzato può tornarci utile in tutte le circostanze in cui abbiamo a che fare con luoghi geografici.

Olimpio Romanella

Sono un appassionato di Web Developing con un particolare debole per php. Mi dedico principalmente dello sviluppo back-end ed in particolare programmazione lato server con php, sviluppo di database relazionali MySql e progettazione di CMS di piccole e medie dimensioni.

Mi avvalgo del framework javascript Jquery, utilizzando molti dei suoi plugin e nei dei miei progetti utilizzo spesso il framework MVC Codeigniter.

16 Commenti presenti

avatar Diego

Diego

20 September 2014 ore 12:29

Fantastico! Grazie.

avatar Riccardo

Riccardo

03 December 2013 ore 16:37

@Olimpio Romanella:
peccato :(

avatar Olimpio Romanella

Olimpio Romanella

30 November 2013 ore 15:06

@Riccardo: quando scrissi lo script lo evitai per non crearmi complicazioni.

avatar Riccardo

Riccardo

29 November 2013 ore 20:32

come è possibile avere una mappa dinamica invece di una mappa statica?

Grazie ;)

avatar oly1982

oly1982

05 August 2012 ore 02:04

@gluca: il semplice codice php presente nell'articolo l'ho testato nuovamente e funziona alla perfezione. Fra le ipotesi probabili vi può essere che hai una versione datata di php.

avatar gluca siti web

gluca siti web

02 August 2012 ore 23:31

Mi dice Cannot instantiate non-existent class ... in php cosa ho mancato, devo importare una libreria o cosa?e quale?

avatar Girolamo

Girolamo

02 April 2012 ore 17:41

Ottimo tutorial, sei grandioso!! cercavo da più di un'ora qualcosa del genere!
grazie!

avatar Matteo

Matteo

22 November 2011 ore 21:23

Complimenti, veramente ottimo.

avatar Leonardo

Leonardo

21 October 2011 ore 01:12

Veramente un ottimo lavoro, sritto chiaro e senza fronzoli. Molto apprezzabile il geocoding in php.
Interessante sarebbe anche il geocoding inverso, sempre in PHP, ma forse ti chiedo troppo.
Comunque i miei complimenti
Leonardo

avatar Mary

Mary

02 September 2011 ore 15:20

Funziona perfettamente! Grazie! :)

avatar oly1982

oly1982

02 September 2011 ore 14:29

ciao Mary e grazie per i complimenti.

Si potrebbe risalire anche al numero civico. Nel caso sia presente nell'xml troverai:
<address_component>
<long_name>18</long_name>
<short_name>18</short_name>
<type>street_number</type>
</address_component>


Pertanto nel nostro script dovremo:
1) aggiungere nel form un ulteriore input in cui verrà inserito il civico

<input type="text" name="civico" id="civico" />


2) nel codice jquery troverai una serie else if... a cui aggiungerai

else if(value.types[0] == 'street_number'){$("#civico").val(value.long_name);}


Dovrebbe funzionare... fammi sapere!!

avatar Mary

Mary

02 September 2011 ore 11:45

Veramente un ottimo lavoro! Complimenti!
C'è modo di avere nel dettaglio (street,country ecc...) anche il numero civico?

avatar oly1982

oly1982

19 June 2011 ore 18:14

Grazie Davide ;)

avatar Davide

Davide

19 June 2011 ore 18:03

Chiaro e utile. Bel lavoro. Mi piacerebbe chiederti un paio di cose magari per mail, magari mi salvi la tesi =)

avatar oly1982

oly1982

02 June 2011 ore 08:35

@Daniele: troppo gentile!! grazie.

avatar Daniele

Daniele

01 June 2011 ore 22:17

Scaricato! Ottima risorsa, complimenti! ;-)