August 18, 2019

Get Current Location Latitude and Longitude using JavaScript

get map current location latitude and longitude jquery

The geolocation API is one of the most important features in modern web browsers. In this article, we going to show you how to get the current location using the Geolocation API. Geolocation API allows javascript or web content to access the user current location on browsers or devices. This allows us to request to get the current location of the user using JavaScript or jQuery, the location information is described by latitude and longitude coordinates. Since publishing your location can compromise your privacy, web browsers will need your permission to access your location information.

Get Current Location Latitude and Longitude Using JavaScript

In the JavaScript, here we going to use getCurrentPosition() method to get user’s current location latitude and longitude, but first, we require to know whether web browser support to Geolocation API or not.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Get Current Location Latitude and Longitude Using JavaScript</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div id="get_it">
                <h1>Get Current Location Latitude and Longitude Using JavaScript</h1>
                <button id="get_location" class="btn btn-primary" onclick="getLoc()">Find Location</button>
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-md-6 card p-2">
                <p>Latitude: <span id="get_lat"></span></p>
            </div>
            <div class="col-md-6 card p-2">
                <p>Longitude: <span id="get_lon"></span></p>
            </div>
        </div>
    </div>
    <script>
        var button = document.getElementById('get_location');
        var get_it = document.getElementById("get_it");
        var latitude = document.getElementById('get_lat');
        var longitude = document.getElementById('get_lon');

        function getLoc() {
            var startLoc;
            var show_location = function() {
                get_it.style.display = "block";
            };
            var hide_location = function() {
                get_it.style.display = "none";
            };
            var getTime_value = setTimeout(show_location, 5000);

            var successMes = function(position) {
                hide_location();
                clearTimeout(getTime_value);
                startLoc = position;
                latitude.innerHTML = startLoc.coords.latitude;
                longitude.innerHTML = startLoc.coords.longitude;
            };

            var geoFail = function(error) {
                switch (error.code) {
                    case error.TIMEOUT:
                        show_location();
                        break;
                }
            };
            navigator.geolocation.getCurrentPosition(successMes, geoFail);
        };
    </script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Get Current Location Latitude and Longitude Using JavaScript</title>

</head>

<body>

<h1>Get Current Location Latitude and Longitude Using JavaScript</h1>

<button id="get_location" class="btn btn-primary" onclick="getLoc()">Find Location</button>

</div>

<br/>

<p>Latitude: <span id="get_lat"></span></p>

</div>

<p>Longitude: <span id="get_lon"></span></p>

</div>

var button = document.getElementById('get_location');

var get_it = document.getElementById("get_it");

var latitude = document.getElementById('get_lat');

var longitude = document.getElementById('get_lon');

function getLoc() {

var startLoc;

var show_location = function() {

get_it.style.display = "block";

};

var hide_location = function() {

get_it.style.display = "none";

};

var getTime_value = setTimeout(show_location, 5000);

var successMes = function(position) {

hide_location();

clearTimeout(getTime_value);

startLoc = position;

latitude.innerHTML = startLoc.coords.latitude;

longitude.innerHTML = startLoc.coords.longitude;

};

var geoFail = function(error) {

switch (error.code) {

case error.TIMEOUT:

show_location();

break;

}

};

navigator.geolocation.getCurrentPosition(successMes, geoFail);

};

</script>

</body>

</html>

Preview

Get Current Location Latitude and Longitude Using jQuery

In this below code, you can get the current location of the user with implement this JavaScript code in our jQuery click method.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Get Current Location Latitude and Longitude Using jQuery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <h1>Get Current Location Latitude and Longitude Using jQuery</h1>
        </div>
        <div class="row">

            <button id="get_location" class="btn btn-primary">Find Location</button>
        </div>

        <br/>
        <div class="row">
            <div class="card p-3">
                <h3>Your location</h3>
                <p id="show_location"></p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $("#get_location").click(function() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    $("#show_location").html("Latitude: " + position.coords.latitude + " </br>Longitude:" + position.coords.longitude);
                });
            } else {
                console.log("Geolocation does not work in this browser");
            }
        });
    </script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Get Current Location Latitude and Longitude Using jQuery</title>

</head>

<body>

<h1>Get Current Location Latitude and Longitude Using jQuery</h1>

</div>

<button id="get_location" class="btn btn-primary">Find Location</button>

</div>

<br/>

<h3>Your location</h3>

</div>

$("#get_location").click(function() {

if ("geolocation" in navigator) {

navigator.geolocation.getCurrentPosition(function(position) {

$("#show_location").html("Latitude: " + position.coords.latitude + " </br>Longitude:" + position.coords.longitude);

});

} else {

console.log("Geolocation does not work in this browser");

}

});

</script>

</body>

</html>

Preview

Google Map API Get Current Location Latitude & Longitude Using jQuery

This below code helps you integrate your current latitude and longitude with Google map. Using Google map JavaScript code here we going to show your current latitude and longitude coordinates. With the help of Google API, you can get the correct location latitude and longitude.

Get API from Google Developers Console

Note: Replace YOUR_API_KEY to your API code where you generated from Google Developers Console.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Get Current Location Latitude and Longitude Using Google Map</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <h1>jQuery Get Current Location Latitude and Longitude Using Google Map</h1>
        </div>
        <div class="row">

            <button id="get_location" class="btn btn-primary">Find Location</button>
        </div>

        <br/>
        <div class="row">
            <div class="col-md-12">
                <div class="card p-3">
                    <h3>Your location</h3>

                    <div id="show_location"></div>

                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript">
        var map;

        function initMap() {
            var mapCenter = new google.maps.LatLng(60.4720, 8.4689);
            map = new google.maps.Map($("#show_location")[0], {
                center: mapCenter,
                zoom: 8
            });
        }

        $("#get_location").click(function() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    infoWindow = new google.maps.InfoWindow({
                        map: map
                    });
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    infoWindow.setPosition(pos);
                    infoWindow.setContent("Latitude : " + position.coords.latitude + " </br>Longitude :" + position.coords.longitude);
                    map.panTo(pos);
                });
            } else {
                console.log("Geolocation does not work in this browser");
            }
        });
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Get Current Location Latitude and Longitude Using Google Map</title>

</head>

<body>

<h1>jQuery Get Current Location Latitude and Longitude Using Google Map</h1>

</div>

<button id="get_location" class="btn btn-primary">Find Location</button>

</div>

<br/>

<h3>Your location</h3>

</div>

var map;

function initMap() {

var mapCenter = new google.maps.LatLng(60.4720, 8.4689);

map = new google.maps.Map($("#show_location")[0], {

center: mapCenter,

zoom: 8

});

}

$("#get_location").click(function() {

if ("geolocation" in navigator) {

navigator.geolocation.getCurrentPosition(function(position) {

infoWindow = new google.maps.InfoWindow({

map: map

});

var pos = {

lat: position.coords.latitude,

lng: position.coords.longitude

};

infoWindow.setPosition(pos);

infoWindow.setContent("Latitude : " + position.coords.latitude + " </br>Longitude :" + position.coords.longitude);

map.panTo(pos);

});

} else {

console.log("Geolocation does not work in this browser");

}

});

</script>

</body>

</html>

Error Handling – Google Map API Get Current Location Latitude & Longitude Using jQuery

Error handle is the main part for users & developers because this can help to identify the exact error while we have trouble with the code. If anything fails the error callback giving us update the user with a corresponding error message.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Error Handling - Get Current Location Latitude and Longitude Using Google Map</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <h1>Error Handling - jQuery Get Current Location Latitude and Longitude Using Google Map</h1>
        </div>
        <div class="row">

            <button id="get_location" class="btn btn-primary">Find Location</button>
        </div>

        <br/>

        <div class="row">
            <div class="col-md-12">
                <div class="card p-3">

                    <h3>Your location</h3>
                    <p id="map_location"></p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript">
        var map;

        function initMap() {
            map = new google.maps.Map($("#map_location")[0], {
                center: {
                    lat: 60.4720,
                    lng: 8.4689
                },
                zoom: 8
            });
        }

        $("#get_location").click(function() {
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(show_location, show_error, {
                    timeout: 1000,
                    enableHighAccuracy: true
                });
            } else {
                console.log("Geolocation does not work in this browser");
            }
        });

        function show_location(position) {
            infoWindow = new google.maps.InfoWindow({
                map: map
            });
            var pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            infoWindow.setPosition(pos);
            infoWindow.setContent('Your location found.');
            map.setCenter(pos);
        }

        function show_error(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location data is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("Request timeout.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Error Handling - Get Current Location Latitude and Longitude Using Google Map</title>

</head>

<body>

<h1>Error Handling - jQuery Get Current Location Latitude and Longitude Using Google Map</h1>

</div>

<button id="get_location" class="btn btn-primary">Find Location</button>

</div>

<br/>

<h3>Your location</h3>

</div>

var map;

function initMap() {

map = new google.maps.Map($("#map_location")[0], {

center: {

lat: 60.4720,

lng: 8.4689

zoom: 8

});

}

$("#get_location").click(function() {

if ("geolocation" in navigator) {

navigator.geolocation.getCurrentPosition(show_location, show_error, {

timeout: 1000,

enableHighAccuracy: true

});

} else {

console.log("Geolocation does not work in this browser");

}

});

function show_location(position) {

infoWindow = new google.maps.InfoWindow({

map: map

});

var pos = {

lat: position.coords.latitude,

lng: position.coords.longitude

};

infoWindow.setPosition(pos);

infoWindow.setContent('Your location found.');

map.setCenter(pos);

}

function show_error(error) {

switch (error.code) {

case error.PERMISSION_DENIED:

alert("User denied the request for Geolocation.");

break;

case error.POSITION_UNAVAILABLE:

alert("Location data is unavailable.");

break;

case error.TIMEOUT:

alert("Request timeout.");

break;

case error.UNKNOWN_ERROR:

alert("An unknown error occurred.");

break;

}

</script>

</body>

</html>

Download

Get Current Location Google Map API Latitude and Longitude

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]

Get Current Location Latitude and Longitude using JavaScript

Share:

Get Current Location Latitude and Longitude Using JavaScript

Preview

Get Current Location Latitude and Longitude Using jQuery

Preview

Google Map API Get Current Location Latitude & Longitude Using jQuery

Error Handling – Google Map API Get Current Location Latitude & Longitude Using jQuery

Download

Mraj

Don't miss on latest updates