Geolocation has been disabled in this document by permissions policy

265 Views Asked by At

I am having the button which asks for the location from the user and move the marker on the leaflet package. On local, it is working fine, but in live it is showing the error:

Geolocation has been disabled in this document by permissions policy

The page header contains: Image: Header of the page

<div
              title="Go to current location"
              class="absolute bottom-3 right-3 bg-white z-[400] rounded-sm w-[48px] cursor-pointer h-[48px] shadow-lg border border-[#ccc] flex justify-center items-center"
              @click="goToCurrentLocation()"
            >
              <img src="@/../icons/DIVR/currentLocation.svg" width="30" />
            </div>

The function goToCurrentLocation:

goToCurrentLocation() {
      const successCallback = (position) => {
        this.markerValue = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        this.markerObj.setLatLng(this.markerValue);
        this.refreshMap();
      };
      const errorCallback = (error) => {
        let txt;
        switch (error.code) {
          case error.PERMISSION_DENIED:
            txt = "Please give access to location to go to your current location.";
            break;
          case error.POSITION_UNAVAILABLE:
            txt = "Location position unavailable";
            break;
          case error.TIMEOUT:
            txt = "Location position lookup timed out";
            break;
          default:
            txt = "Unknown position.";
        }
        console.log(error);
        alert(txt);
      };
      navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    },

It is working as expected in firefox browser but not working on chromium based browser like brave, opera, chrome.

The site is in https.

This is my first time asking the question on stack overflow. So if any more information needed, please inform.

I couldn't found any solution for this. I am using inertia with vue and laravel to render this page.

return render("Page");

this is not in any iframe. I am having the button on the page.

0

There are 0 best solutions below