Is there a way to check if geolocation has been DECLINED with Javascript?

Question

I need JavaScript to display a manual entry if geolocation is declined.

What I have tried:

Modernizr.geolocation
navigator.geolocation

Neither describes if user has previously declined access to geolocation.

Answer 1

watchPosition and getCurrentPosition both accept a second callback which is invoked when there is an error. The error callback provides an argument for an error object. For permission denied, error.code would be error.PERMISSION_DENIED (numeric value 1).

Read more here: https://developer.mozilla.org/en/Using_geolocation

Example:

navigator.geolocation.watchPosition(function(position) {
    console.log("i'm tracking you!");
  },
  function(error) {
    if (error.code == error.PERMISSION_DENIED)
      console.log("you denied me :-(");
  });

EDIT: As @Ian Devlin pointed out, it doesn't seem Firefox (4.0.1 at the time of this post) supports this behavior. It works as expected in Chrome and probably Safari etc.

Answer 2

Without prompting the user, you can use the new permission api this is available as such:

navigator.permissions.query({ name: 'geolocation' })
.then(console.log)

Answer 3

According to the W3C geolocation specification, your getCurrentPosition call can return a callback for success and a callback for failure. However, your failure callback will be invoked for any error that occurred, which is one of: (0) unknown; (1) permission denied; (2) position unavailable; or (3) timeout. [Source: Mozilla]

In your case you want to do something specific if the user has explictly denied access. You can check the error.code value in your failure callback, like so:

navigator.geolocation.getCurrentPosition(successCallback,
    errorCallback,
    {
        maximumAge: Infinity,
        timeout:0
    }
);

function errorCallback(error) {
    if (error.code == error.PERMISSION_DENIED) {
        // pop up dialog asking for location
    }
}

Answer 4

Inline Permission Check

Possible values are prompt, granted, and denied

const permissionStatus = await navigator?.permissions?.query({name: 'geolocation'})
const hasPermission = permissionStatus?.state // Dynamic value

NOTE: This requires being in an async function

Default Value:

If you want to handle cases that fail, add an optional ?? myDefaultValue to the second line.

Links:

• ?. Inline Null Check - Read More
• ?? Fallback Value - Read More
• await - Read more

Answer 5

To fix the Firefox problem is really easy. In my case I save the geolocation in a global variable on Javascript called geolocation. Before use this variable, I just check if is not undefined, if so I just get the geolocation from the IP.

In my website I don't have any problem getting the location the first time, but I saw in my short example that never has time to get the geolocation on the first time because is too quick.

Anyway this is just an example, you should adapt it in each case.

var geolocation = {};
getLocation();

$(document).ready(function(){
    printLocation(); // First time, hasn't time to get the location
});

function printLocation(){
    if(typeof geolocation.lat === "undefined" || typeof geolocation.long === "undefined"){
        console.log("We cannot get the geolocation (too fast? user/browser blocked it?)");
        // Get location by IP or simply do nothing
    }
    else{
        console.log("LATITUDE => "+geolocation.lat);
        console.log("LONGITUDE => "+geolocation.long);
    }
}

function getLocation() {
    // If the user allow us to get the location from the browser
    if(window.location.protocol == "https:" && navigator.geolocation)
        navigator.geolocation.getCurrentPosition(function(position){
            geolocation["lat"] = position.coords.latitude;
            geolocation["long"] = position.coords.longitude;
            printLocation(); // Second time, will be return the location correctly
        });
    else{
        // We cannot access to the geolocation
    }
}

PS: I don't have enough reputation to comment the above answers so I had to create a new answer. Sorry about that.

Answer 6

navigator.geolocation.watchPosition(function(position) {
    console.log("i'm tracking you!");
  },
  function(error) {
    if (error.code == error.PERMISSION_DENIED)
      console.log("you denied me :-(");
  });

Answer 7

I needed a way to check the status of the geolocation permission in my web app, so put together this helper function to do it for me.

This initially attempts the Web Permissions API, before falling back to calling the Geolocation API itself since Safari does not support the permissions API.

The helper is written in Typescript, but can be easily changed to JS.

/**
 * Checks the status of the geolocation permission asynchronously.
 *
 * Returns the permission status: `'denied'`, `'granted'`, or `'prompt'`.
 *
 * Includes a fallback for browsers which do not support the Web Permissions API.
 */
async function getGeolocationPermissionStatus(): Promise<'denied' | 'granted' | 'prompt'> {
  if ('permissions' in navigator) {
    return (await navigator.permissions.query({ name: 'geolocation' })).state
  }

  return new Promise(resolve => {
    navigator.geolocation.getCurrentPosition(
      // successfully got location
      () => resolve('granted'),
      error => {
        // permission denied
        if (error.code == error.PERMISSION_DENIED) resolve('denied')

        // some other error, but not one which is related to a denied permission
        resolve('granted')
      },
      {
        maximumAge: Infinity,
        timeout: 0,
      },
    )
  })
}

Answer 8

Here is the react.js hook code:

import {useEffect, useState} from 'react';

export const useGetLocationPermissionStatus = () => {
  const [status, setStatus] = useState<'denied' | 'prompt' | 'granted'>('denied');
  useEffect(() => {
    navigator.permissions.query({name: 'geolocation'}).then((result) => {
      const newStatus = result.state;
      setStatus(newStatus);
      result.addEventListener('change', () => {
        setStatus(newStatus);
      });
    });
  }, []);
  return status;
};