Blog

Uncategorized Detect user current location using html5 geo location jquery

Detect current user location or device position using jquery with help of HTML 5 Geo location API.HTML 5 geo location api provide user current  latitude, longitude and current address.This topic is very helpful to understand to get current user location on window load or DOM load. User location can be use in mobile device or you can use this feature when you creating or using a application that need current location latitude and longitude.

So now let me explain you some basic and very easy steps that you can you use in your project or application or script.

Example

geolocation

Step 1) First of all you need to add google map places library api cdn link and another is jquery api cdn link.

You can add these two link inside the head tag . in script tag.

 
<script src="http://code.jquery.com/jquery-1.11.1.js">

<script src="https://maps.google.com/maps/api/js?key='YOUR API KEY '&libraries=places">

Step2) Now i taking input field and a output div where current address and latitude and longitude values.

<!-- Result div where we put address, latitude and longitude -- >

<form> <input id="address" name="address" type="text" value="" placeholder="location here" /> </form >
<div id="geo_output"> </div>

Step3) Last step but not least , now i am adding some java-script code that will handle all the control to get geo location.

    $(document).ready(function() {
        var currgeocoder;
        navigator.geolocation.getCurrentPosition(function(position, html5Error) {
            geo_loc = processGeolocationResult(position);
            currLatLong = geo_loc.split(",");
            initializeCurrent(currLatLong[0], currLatLong[1]);
        }, failFnc);

        function failFnc() {
            $.get("https://ipinfo.io", function(response) {
                $("#list_location").val(response.city + ", " + response.region);
                $("#list_location1").val(response.city + ", " + response.region);
            }, "jsonp");
        };

        function processGeolocationResult(position) {
            html5Lat = position.coords.latitude;
            html5Lon = position.coords.longitude;
            html5TimeStamp = position.timestamp;
            html5Accuracy = position.coords.accuracy;
            return (html5Lat).toFixed(8) + ", " + (html5Lon).toFixed(8);
        }

        function initializeCurrent(latcurr, longcurr) {
            currgeocoder = new google.maps.Geocoder();
            if (latcurr != '' && longcurr != '') {
                var myLatlng = new google.maps.LatLng(latcurr, longcurr);
                return getCurrentAddress(myLatlng);
            }
        }

        function getCurrentAddress(location) {
            currgeocoder.geocode({
                'location': location
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    console.log("I am here");
                    $("#list_location").val(results[0].formatted_address);
                    $("#list_location1").val(results[0].formatted_address);
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
    });
    if ("geolocation" in navigator) {
        console.log('geolocation is available');
    } else {
        console.log('geolocation IS NOT available');
    }

Author Details