I'm trying to access the user's location on my webpage, but the location I get is very imprecise and does not use GPS. I have already checked the permissions in my browser (Firefox) and system (Android 14).
To be more precise, I can get an accurate GPS location, but only if it is cached from another app that used GPS just seconds before. The web browser itself does not seem to be able to use GPS directly.
navigator.geolocation.watchPosition(
(position) => {
if (position.coords.accuracy <= 100){
lat = position.coords.latitude;
lon = position.coords.longitude;
}
displayCoordinates(lat, lon, position.coords.accuracy);
},
(error) => {
console.error("Geolocation error:", error);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
When I open the site, I am asked to enable location. After that, I receive my location with an accuracy of 120–200 meters, which I assume is from cellular data and not GPS because, in other apps, I can get GPS accuracy down to 3 meters. Also, the icon in the top left corner of the screen, which indicates when GPS is being used, never appears.
All this indicates that navigator.geolocation.watchPosition
simply accepts any position provided by the system or browser and does not activate the GPS.
Is there a better method that can turn on the GPS and obtain a precise location on majority of modern devices?
Browsers use navigator.geolocation, but it's often imprecise because they don't access GPS directly. Instead, they rely on:
Wi-Fi networks (accuracy depends on external databases). Cell towers (less precise, can be off by hundreds of meters). IP address (very inaccurate, can be off by kilometers)
Because browsers don’t have direct GPS access, no JavaScript library can guarantee pinpoint accuracy. I faced this challenge in one project, and I just drew squares in my database. This doesn’t solve the problem but can be useful in some situations. You could also develop a phone app, as the phone app provides better accuracy if the user grants the permissions."