Come spesso facciamo vi ricordiamo che per effettuare le prove del codice c’è bisogno di un minimo di conoscenza della teoria della programmazione per il web. Inoltre avrete bisogno di strumenti e programmi software. A tale proposito ricordiamo che per provare queste semplici righe di codice sono necessari i seguenti programmi software:
- Browser che utilizzate per navigare (Firefox, Chrome, Opera, Safati, … fate voi)
- Editor per la scrittura del codice (ad esempio Sublime Text)
- Web Server installato in locale (ad esempio XAMPP) o servizio web con file da salvare con l’FTP
Il codice contenuto nell’esempio contiene la funzione geoFindMe() il cui risultato sara visualizzato nel <div>. Puoi testare il codice che segue sul tuo web server creando una pagina HTML. In un progetto più ampio potrai riutilizzare il codice per gestire eventi simili.
Indice
Jquery effetto toggle semplice simply toggle effect
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Geolocalizzazione</title>
<style type="text/css">
p{
padding: 15px;
background: #F0E68C;
}
</style>
<script type="text/javascript">
function geoFindMe() {
var output = document.getElementById("out");
if (!navigator.geolocation){
output.innerHTML = "La geolocalizzazione non è supportata dal tuo browser";
return; }
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = 'Latitudine: ' + latitude + '°Longitudine: ' + longitude + '';
var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center="
+ latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
output.appendChild(img);
}
function error() {
output.innerHTML = "Impossibile calcolare la tua posizione";
}
output.innerHTML = "<p>Locating…</p>";
navigator.geolocation.getCurrentPosition(success, error);
}
</script>
</head>
<body>
<p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p>
<div id="out"></div>
</body>
</html>
Conclusioni
Abbiamo visto in questo articolo come realizzare la geolocalizzazione su cellulari Android e iPhone con HTML e Javascript. Si osservi che la funzione Javascript geoFindMe() può essere avviata anche in automatico nel tag <body> sfruttando l’evento onload=””. Lo script restituisce latitudine e longitudine, se volete in automatico il segnaposto sulla mappa di google dovete completare il codice con quello contenuto nell’articolo Geocoding esempio di codice php geolocalizzazione con Google Maps. Verifica il codice nella nostra pagina di Esempio html5 javascript Geolocalizzazione.