How to fetch current location at the time of loading a web page using Javascript

Javascript 1 comment :

To search for a location code (such as a City, state, postal code) using JavaScript, you generally need to perform a forward geocoding operation. This involves converting a location name or address into geographic coordinates and then retrieving additional details, including the City, State and postal code, from those coordinates. You can achieve this using various geocoding APIs.

<!DOCTYPE html>
<html>
<head>
    <title>Get City, state, postal code</title>
</head>
<body>
    <h1>Welcome to A143mk. <br/>Current Location City, state, postal code</h1>
    <p id="pinCode">Fetching...</p>

fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data && data.address && data.address.postcode) {
                        document.getElementById('pinCode').innerText = `HOUSE NO: ${data.address.house_number}, City: ${data.address.city},\n State: ${data.address.state},\n Pin Code: ${data.address.postcode}`;
                    } else {
                        document.getElementById('pinCode').innerText = 'Pin Code not found.';
                    }
						
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('pinCode').innerText = 'Error fetching pin code.';
                });
        }

if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                getPinCode(lat, lon);
            }, () => {
                document.getElementById('pinCode').innerText = 'Geolocation not supported or permission denied.';
            });
        } else {
            document.getElementById('pinCode').innerText = 'Geolocation not supported.';
        }
    </script>
</body>
</html>

output: