sidebar

Nightly

search

User Tracking

Nightly in version 2.0 comes with great feature that will make your web applications stand out! The feature is location tracking via browser for computers or GPS location tracking for mobiles.

How does it work?

Browser's location (it will probably ask you to accept or deny the request) provides information about the latitude and longitude. Then the AJAX call to Google API retrieves the address for our geolocation.

What can it do?

Retrieves user's exact location (latitude/longtitude) or pharse user's address, city, state, district and more.

Show me the MAGIC!

Address
City
State
GPS Latitude
GPS Longtitude

Address reading is for demonstration purposes only. Your address will not be stored in any way.

Show me the CODE!

Usage is very simple and easy to understand. Use geolocation code provided with nightly (located in location.html) alongside with this simple jQuery code:

var geocoder;

function readLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
    } 
}

function successFunction(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    codeLatLng(lat, lng)
}
            
function errorFunction(){ alert("Geocoder failed"); }
            
function codeLatLng(lat, lng) {  
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                interpretation(results, lat, lng);
            } else {
                alert("No results found");
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });           
}    

function interpretation(results, lat, lng) {
    $("#address").append(results[0].address_components[2].short_name + " "
    + results[0].address_components[1].short_name + "/"
    + results[0].address_components[0].short_name);
    $("#city").append(results[0].address_components[3].short_name);
    $("#state").append(results[0].address_components[7].short_name);
    $("#lat").append(lat);
    $("#lng").append(lng);
}
                
$("#show-address").click(function(event){
    readLocation();
    geocoder = new google.maps.Geocoder();
});

That's it! What this code does?
1. Click the button.
2. Read user's geolocation via browser.
3. Interpret the results.

List of used variables

results[0].address_components[0].short_name - Address (house) number
results[0].address_components[1].short_name - Address (house) number
results[0].address_components[2].short_name - Address (street)
results[0].address_components[3].short_name - City
results[0].address_components[4].short_name - City (other)
results[0].address_components[5].short_name - Locality (big town)
results[0].address_components[6].short_name - Locality (district)
results[0].address_components[7].short_name - State
results[0].address_components[8].short_name - Postal code
lat - Latitude
lng - Longtitude

There are even more variables available. Read Google Geolocation API for futher informations.

Note at the end

This function is purely experimental and cannot give you the exact location. However the geolocation can be very precise. From my experience the results may vary depending on the browser. Google Chrome for example is very lame at this. In Safari is the result extraordinary accurate.

NIGHTLY 2015. All rights reserved.