If you are building an eCommerce app or delivery app you will need to get user location to get their address. JavaScript provides us feature to get user location using GeoLocation API.

For privacy purposes, it asks the user permission to allow the browser to access the location.

navigator.geolocation is accessed via navigator.geolocation will cause user browsers to ask for permission. If they accept, then the browser will use the best available functionality on the device to access this information(for Example GPS)

We can access user location using 2 ways:

Geolocation.getCurrentPosition() : To get user current location
Geolocation.watchPosition(): Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location. For example, when the delivery boy delivers the food we can get his real-time location.

Here we are using getCurrentPosition() to get user location

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Get User Location</title>
</head><body><div><h1>Current Position</h1></div><div><h2>Latitude: <span id="latitude"></span></h2></div><div><h2>Longitude: <span id="longitude"></span></h2></div><div><h2>Range: <span id="range"></span> meters.</h2></div></body><script>const options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };

        function success(pos) {
            const coords = pos.coords;

            document.querySelector("#latitude").innerHTML = coords.latitude;
            document.querySelector("#longitude").innerHTML = coords.longitude;
            document.querySelector("#range").innerHTML = coords.accuracy;
        }

        function error(err) {
            console.warn(`ERROR(${err.code}): ${err.message}`);
        }

        navigator.geolocation.getCurrentPosition(success, error, options);

    </script>
</html>

In the above example, we have used getCurrentPosition, It takes 3 parameters

Success: It's a callback function and mandatory parameter. When the function gets executed successfully this function gets called.
Error: It's an optional parameter of a callback function, when any error occurs then this function gets called.
Options: This is also an optional parameter that provides options for the retrieval of the position data.

To get the user's current address and location info for a better user experience Google Maps API is a good option.

ChatGPT Guide for Software Developers

Don't Get Left Behind! Use these ChatGPT Guide to 10x Your Productivity