Script ajax: Trovare la posizione di un IP su google maps

   difficoltà:  script script script script script

Script simili
29/9/2008


Utilizzando le API di Google maps, versione 2, potremo trovare la posizione corrente dell'utente attraverso l'uso della nuova proprietà ClientLocation (google.loader.ClientLocation) che ci permette di localizzare l'IP dell'utente.

Per prima cosa ricordiamoci di ottenere una API Key che possiamo prelevare da qui:

http://www.google.com/apis/maps/signup.html

ogni key potrà essere usata per una directory sola del nostro sito. [Per info vedere articolo: Script ajax: Inserire una mappa di google maps nel proprio sito]

A inizio script dovremo caricare le api con il nuovo metodo, indicando la versione da caricare:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERIRE_QUI_LA_API_KEY"></script>
<script>
google.load("maps", "2");
</script>

Vediamo lo script per inserire una mappa google maps nel nostro sito centrata in una posizione di default, scelta dall'utente:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERIRE_QUI_LA_API_KEY"></script>
<script>
google.load("maps", "2");

function initialize() {
// IValori di default
var zoom = 3;
var latlng = new google.maps.LatLng(37.4419, -100.1419);
var location = "Sto visualizzando la posizione di default";

document.getElementById("location").innerHTML = location;
var map = new google.maps.Map2(document.getElementById('map'));
map.setCenter(latlng, zoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

map.addOverlay(new GMarker(latlng));
}

google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div style="width:500;height:300" id="map"></div>
<div id="location"></div>
</body>
</html>

Al caricamento della pagina viene richiamata la funzione initialize() che da valori de default alla mappa: zoom, posizione(latitudine,longitudine), e testo da visualizzare per la posizione di default, che sarà in seguito visualizzato in caso che le API non riescano a calcolare la posizione corretta. E infine aggiungeremo un segnalibro in quella posizione.
Per maggiori info sui comandi usati vedere i precedenti script su google maps.

Ora dovremo far calcolare la posizione dell'utente sulla mappa prendendo il dato da google.loader.ClientLocation e utilizzare la posizione trovata al posto di quella di default nel caso la proprietà sia valorizzata:
if (google.loader.ClientLocation) {
zoom = 13;
latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
location = "Visualizzo la posizione trovata in base all'IP: <b>" + getFormattedLocation() + "</b>. Lat: "+google.loader.ClientLocation.latitude+", Long: "+google.loader.ClientLocation.longitude;
}

Quindi se google.loader.ClientLocation è valorizzato faccio uno zoom maggiore sulla posizione e ricavo la nuova posizione prelevando la latitudine e longitudine corrente:
google.loader.ClientLocation.latitude
google.loader.ClientLocation.longitude

Cambio anche il testo da visualizzare indicando che sto visualizzando la posizione trovata in base all'IP, mostro la latitudine e longitudine e con la funzione getFormattedLocation() formatto la posizione trovata per restituirla come testo:
function getFormattedLocation() {
if (google.loader.ClientLocation.address.country_code == "US" &&
google.loader.ClientLocation.address.region) {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.region.toUpperCase();
} else {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.country_code;
}
}

In questo caso prendo la città e stato:
google.loader.ClientLocation.address.city
google.loader.ClientLocation.address.country_code

La ricerca è abbastanza accurata ma non precisissima, per cui conviene tenere lo zoom non troppo vicino, poichè la via non sarà precisa. Peccato che questa funzione non sia utilizzabile da dispositivi mobile connessi senza l'utilizzo del wi-fi.

Vediamo ora lo script completo da utilizzare:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERIRE_QUI_LA_API_KEY"></script>
<script>
google.load("maps", "2");

function initialize() {
//Valori de default
var zoom = 3;
var latlng = new google.maps.LatLng(37.4419, -100.1419);
var location = "Sto visualizzando la posizione di default";

//Se ClientLocation è valorizzato allora prendo i valori della posizione attuale
if (google.loader.ClientLocation) {
zoom = 13;
latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
location = "Visualizzo la posizione trovata in base all'IP: <b>" + getFormattedLocation() + "</b>. Lat: "+google.loader.ClientLocation.latitude+", Long: "+google.loader.ClientLocation.longitude;
}

document.getElementById("location").innerHTML = location;
var map = new google.maps.Map2(document.getElementById('map'));
map.setCenter(latlng, zoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

//Aggiungo segnaposto
map.addOverlay(new GMarker(latlng));
}

//Posizione trovata scritta con città e stato
function getFormattedLocation() {
if (google.loader.ClientLocation.address.country_code == "US" &&
google.loader.ClientLocation.address.region) {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.region.toUpperCase();
} else {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.country_code;
}
}

google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div style="width:500;height:300" id="map"></div>
<div id="location"></div>
</body>
</html>





Commenti


  Pietro

13/2/2009 14:58:09

Non riesco a localizzare la mia posizione sulla mappa...

  Luca

18/2/2009 11:24:36

Fantastico!
Grazie mille per questa news è proprio quello che cercavo!

  Marco

11/5/2009 15:02:14

Carino però senti non è che potresti mettere un text-plain per la copia del codice? thx

  auron

28/7/2009 2:18:41

secondo lui sono a ct in via xxxx >.< ma non sono in qlla citta non è preciso al 100% ma credo sia normale

  Alby-Rm

11/11/2009 11:24:38

penso che ti dica la centrale dove sei collegato...

  tonyno

9/4/2010 14:22:48

ma se volessi passargli l'ip tramite php?
( vorrei visualizzare la località di provenienza dei miei utenti )

  Marco

15/2/2011 17:20:31

Dalla data in cui è stato pubblicato l'articolo sono uscite le API di Google maps versione 3.
C'è una versione aggiornata anche dello script?
Questo continua a funzionare?

  Gianni

6/4/2011 0:03:24

Come faccio a stampare con response.write la lat e la long? come estraggo dallo script il valore per metterlo in response.write



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.