How can I redirect a user to another page if they have denied location permission

Question

I am using code modified from examples on stackoverflow. This runs on a website in a browser.

<button onclick="getLocation()">Use Current Location</button>


<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        window.location.href = "map_text_mobile.php";
    }
}

function redirectToPosition(position) {
    window.location='weatherDemo.php?lat='+position.coords.latitude+'&lon='+position.coords.longitude;
}
</script>

This works fine as long as the user has not denied permissions in the past. If they have denied permissions I want to send them to a map where they can enter their desired location by clicking on a map. Note, I do not care what their location is, it is just a convivence to allow them to set the app up to their current location. But they can always use the map to set a location.

The "else" function never runs. If permissions have been denied, my button does nothing. Doing nothing is not an acceptable result. They won't be able to get the weather unless they can specify a location.

I think the issue is that navigator.geolocation either doesn't return or always returns a positive value so that the else is never triggered. I tried some other code that attempted to determine the status of geolocations but same thing, nothing happens when the button is clicked if permissions have been denied.

It is really difficult for a user to figure out how to switch a website permission from deny to allow so I just want to route them to the map routine rather than doing nothing.

I would appreciate some help.

UPDATE:

This code works but takes longer than desired in the case where permissions have been granted. Is there a better way or does the watchPosition just take time. I tried some code that queries the permission but could not get it to work. I am not expert on Javascript (understatement).

<button onclick="test()">Test</button> test for denied<br><br>

function test(){
    navigator.geolocation.watchPosition(function(position) {
    getLocation();
  },
  function(error) {
    if (error.code == error.PERMISSION_DENIED)
      alert("Alert message here");
  });
}

UPDATE 2: This works and is fast enough.

<button onclick="test5()">Test5</button> using query<br><br>

function test5(){
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
      if (result.state === "denied") {
        alert("Permissions have been set to denied. Either change that our use the map method to set locations. You can change that in your browser settings, site settings, location, blocked.");
      } else {
        getLocation();
      }

      
    });
}

Answer 1

I edited my comment with the third update but this is what I found that worked. I left it called test5 because that was the version of code I tried that worked.

<button onclick="test5()">Reset Location</button>

<script>
function test5(){
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
      if (result.state === "denied") {
        alert("Permissions have been set to denied. Either change that our use the map method to set locations. You can change that in your browser settings, site settings, location, blocked. Find L-36.com and change it to Allow");
      } else {
        getLocation();
      }
    });
}

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function redirectToPosition(position) {
    window.location='weatherMobile.php?lat='+position.coords.latitude+'&lon='+position.coords.longitude;
}
</script>