Need help solving Geolocation error in JavaScript for distance calculation with Haversine formula

Question

Hello fellow developers,

I'm currently working on a web application that involves checking the user's location and calculating the distance from a specified region using the Haversine formula. The goal is to enable users to "Check In" when they are within the specified region and disable the button if they are outside.

I've implemented the code to request the user's location, and it successfully retrieves the latitude and longitude. Additionally, I've applied the Haversine formula to calculate the distance between the user's location and the specified region.

However, I'm encountering an issue with the distance calculation. It seems that the results are not accurate, and sometimes the "Check In" button is disabled even when the user is within the region. I suspect there might be a mistake in my implementation of the Haversine formula or the way I'm handling the geolocation data.

Here's a simplified version of my JavaScript code:

//Alert messages for each button click
document.getElementById("checkInBtn").addEventListener("click", function () {
    alert("Check-in button clicked!");
  });
  
  document.getElementById("checkOutBtn").addEventListener("click", function () {
    alert("Check-out button clicked!");
  });
  
  // Function to calculate distance between two points using the Haversine formula
  function calculateDistance(lat1, lon1, lat2, lon2) {
    const toRadians = (value) => (value * Math.PI) / 180;
  
    const R = 6371000; // Earth's radius in meters
  
    const φ1 = toRadians(lat1);
    const φ2 = toRadians(lat2);
    const Δφ = toRadians(lat2 - lat1);
    const Δλ = toRadians(lon2 - lon1);
  
    const a =
      Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
      Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  
    return R * c;
  }
  
  // Declare global variables to store latitude and longitude
  let userLatitude;
  let userLongitude;
  
  // Constants for the specified region
  const regionLatitude = 35.9658064;
  const regionLongitude = -0.1673188;
  const regionRadius = 50; // In meters
  
  // Function to check if the user is within the specified region
  function isUserWithinRegion() {
    const distance = calculateDistance(
      userLatitude,
      userLongitude,
      regionLatitude,
      regionLongitude
    );
    return distance <= regionRadius;
  }
  
  // Disable the "Check In" button
  function disableCheckInButton() {
    const checkInButton = document.getElementById("checkInBtn");
    checkInButton.disabled = true;
  }
  
  // Check if Geolocation is available in the user's browser
  if ("geolocation" in navigator) {
    // Get the user's current location
    navigator.geolocation.getCurrentPosition(
      (position) => {
        // Extract the latitude and longitude from the position object
        userLatitude = position.coords.latitude;
        userLongitude = position.coords.longitude;
  
        // Log the latitude and longitude to the console
        console.log("Latitude: " + userLatitude);
        console.log("Longitude: " + userLongitude);
  
        // Check if the user is within the specified region
        const isWithinRegion = isUserWithinRegion();
  
        // Disable the "Check In" button if the user is out of the region
        if (!isWithinRegion) {
          disableCheckInButton();
        }
      },
      (error) => {
        console.error("Error getting location:", error.message);
        // If user denies location permission or geolocation is not available, disable the "Check In" button
        disableCheckInButton();
      }
    );
  } else {
    console.error("Geolocation is not available in this browser.");
    // If geolocation is not available, disable the "Check In" button
    disableCheckInButton();
  }
  

I've implemented the code to request the user's location, and it successfully retrieves the latitude and longitude. Additionally, I've applied the Haversine formula to calculate the distance between the user's location and the specified region.

// Function to calculate distance between two points using the Haversine formula
function calculateDistance(lat1, lon1, lat2, lon2) {
  // Haversine formula implementation here
}

// Declare global variables to store latitude and longitude
let userLatitude;
let userLongitude;

// Constants for the specified region
const regionLatitude = 35.9658064;
const regionLongitude = -0.1673188;
const regionRadius = 50; // In meters

// Function to check if the user is within the specified region
function isUserWithinRegion() {
  const distance = calculateDistance(
    userLatitude,
    userLongitude,
    regionLatitude,
    regionLongitude
  );
  return distance <= regionRadius;
}

// ... (geolocation and button disable code)