Why do I keep getting errors when attempting to get current position in JavaScript?

Question

I have an html, css, js project with a map using leaflet. Sometimes location works but most of the time I get errors. Here is my JS code:

onst map = L.map('map').setView([30, 0], 3);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'}).addTo(map);
const err = document.querySelector("#error");
const moodIcons = document.querySelectorAll(".mood-icon");
let currentLocation = null;

function getLocation() {
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error, { maximumAge: 5000, timeout: 10000, enableHighAccuracy: true });
  }
  else {
    err.innerHTML = "Geolocation is not supported by this browser.";
  }

  return location;
}

function success(position) {
  
  currentLocation = [position.coords.latitude, position.coords.longitude]
  map.setView(currentLocation, 17);
}
  
function error(error) {
  console.log(error)
  err.innerHTML = "Please allow location permission to add a marker to the mood map";
}

// ---------------------------------------------------------------------------------------------

getLocation();

On Firefox I get this error:

On Chrome I get this error:

When I open my html page in the browser I get prompted to allow location. When I click on allow Iocation permission the console immediately shows the error. have tried setting options for the getCurrentPosition method like a timeout but issue persists. The weird thing is that sometimes it will work. Without me even changing the code. Additionally, I get this error on Chrome only 127.0.0.1/:1 Network location provider at 'https://www.googleapis.com/' : Returned error code 429.

UPDATE: I stopped working on this code for 2 days after I posted this question. I made no changes to the code at all. I came back to it and it was working perfectly fine. The next day I went to work on it and it doesn't work even when the code was not changed. What could be causing this behavior?

Pratik Mathur · Accepted Answer · 2025-05-31 00:57:08Z

Increase the cache from 5 seconds to to 5 minutes, so change

 navigator.geolocation.getCurrentPosition(success, error, { maximumAge: 5000, timeout: 10000, enableHighAccuracy: true });

to:

 navigator.geolocation.getCurrentPosition(success, error, { maximumAge: 300000, timeout: 10000, enableHighAccuracy: true });

If you're still having issues, consider a fallback strategy. Try a high accuracy GPS location first, and if you can't get that,fall back to a low accuracy GPS location. Something like:

navigator.geolocation.getCurrentPosition(success, tryLowAccuracy, {
      maximumAge: 300000,  
      timeout: 10000,
      enableHighAccuracy: true
    });

function tryLowAccuracy(error) {
  // Second attempt with lower accuracy settings
  navigator.geolocation.getCurrentPosition(success, showError, {
    maximumAge: 300000,
    timeout: 15000, //Longer timeout for low accuracy
    enableHighAccuracy: false // for faster, less accurate result
  });
}

Collectives™ on Stack Overflow

Why do I keep getting errors when attempting to get current position in JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related