Geolocation API

Se l'oggetto navigator della window ha la proprietà geolocation allora il servizio di geolocalizzazione è disponibile.

getCurrentPosition()

Il metodo getCurrentPosition() restituisce un oggetto di tipo GeolocationPosition con tutte le informazioni disponibili sulla posizione dell'utente (se quest'ultimo ha acconsentito ad essere geolocalizzato). Accetta tre parametri: una funzione di success, una funzione di error, un oggetto di opzioni.

L'oggetto GeolocationPosition ha la proprietà timestamp e la proprietà coords, la quale è di tipo GeolocationCoordinates e ha le seguenti proprietà:

• accuracy (accuratezza in metri)
• altitude
• altitudeAccuracy
• heading (rotta in gradi)
• latitude
• longitude
• speed

Le opzioni che si possono passare sono enableHighAccuracy (per indicare se si vuole una misurazione più precisa ma a scapito delle performance), timeout (dopo quanti millisecondi interrompere il tentativo di geolocalizzazione) e maximumAge (per quanto tempo è utilizzabile una posizione nella cache)

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition( //l'esecuzione della funziona causa la notifica di richiesta di consenso all'utente
        function (position) { //se l'utente da il consenso
            console.log(position); //GeolocationPosition
        }, function (error) { //se l'utente nega il consenso
            console.log(error); //GeolocationPositionError {code: 1, message: "User denied Geolocation"}
            switch (error.code) {
                case error.TIMEOUT:
                    console.log("Il tentativo di geolocalizzazione è durato troppo");
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log("Informazioni sulla posizione non disponibili");
                    break;
                case error.PERMISSION_DENIED:
                    console.log("L'utente ha negato il consenso alla geolocalizzazione");
                    break;
                default:
                    console.log("Si è verificato un erore");
            }
        }, {
        enableHighAccuracy: true
    });
} else {
    console.log("geolocalizzazione non disponibile");
}

watchPosition() / clearWatch()

Se invece si vuole aggiornare la posizione dell'utente mentre questo si muove basta usare il metodo watchPosition() del tutto analogo al precedente. Per stoppare il watch usare il metodo clearWatch().

var watchID;
if ("geolocation" in navigator) {
    watchID = navigator.geolocation.watchPosition( 
        function (position) { 
            console.log(position); 
        }, function (error) { 
            console.log(error); 
        }, {
        enableHighAccuracy: true
    });

    //quando si vuole stoppare la geolocalizzazione chiamare il metodo navigator.geolocation.clearWatch(watchID);
} else {
    console.log("geolocalizzazione non disponibile");
}

Per vedere la mappa procurati una Google Maps API key, apri l'esempio su codepen e mettila nella sezione delle risorse esterne.

<div id="map"></div>

#map {
  width: 100%;
  height: 300px;
}

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition( 
        function (position) { 
            console.log(position); 
            // Google map
            var mapOptions = {
                zoom: 12,
                disableDefaultUI: true,
                center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);
            
        }, function (error) { //se l'utente nega il consenso
            console.log(error); //GeolocationPositionError {code: 1, message: "User denied Geolocation"}
        }, {
        enableHighAccuracy: true
    });
} else {
    console.log("geolocalizzazione non disponibile");
}