How to get the property of an array using filter

Its working fine, the only thing is that console.log doesn't print objects properly. I used console.table in my test and everything looks good:

Note: I made position a const because I can't pull the coordinates from a document like you have done. But it will work as long as it has correct values for position.coords.latitude and ...longitude

const position = {
  coords: {
    latitude: 21.0335386,
    longitude: -89.559187,
  }
}

function showPosition(position) {
  console.log("Latitude: " + position.coords.latitude)
  console.log("Longitude: " + position.coords.longitude);
  var navlat = position.coords.latitude; //Browser lat
  var navlon = position.coords.longitude; // Browser lon

  // Array
  var sucursales = [
    {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
    {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
    {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
    {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
    {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}];

//Match result
  const matchgeosucursal = sucursales.filter( sucursales =>  sucursales.lat === navlat && sucursales.lon === navlon);
  console.log("Match:")
  console.table( matchgeosucursal);


 }


showPosition(position)

It is likely that you are getting an undefined result because your filter is looking for an exact match for latitude and longitude, and the user's geolocation isn't accurate enough to pinpoint the exact latitude and longitude that you are filtering for.

To get a match, you could check if the user's latitude and longitude are within a range, like so:

const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat +.005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon +.005));

That would give you accuracy within about a half of a mile. Obviously, you can adjust how wide of a range you would like to use, as needed for your use case.

//Request permissions
$( document ).ready(function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        console.log ("Geolocation is not supported by this browser.");
    }


//Filter and gets match url

    function showPosition(position) {
        console.log("Latitude: " + position.coords.latitude)
        console.log("Longitude: " + position.coords.longitude);
        var navlat = position.coords.latitude; //Browser lat
        var navlon = position.coords.longitude; // Browser lon

        // Array
        var sucursales = [
            {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
            {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
            {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
            {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
            {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}];

//Match result
        const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat +.005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon +.005));
        
        console.log('Match > \nlat: ' + matchgeosucursal[0].lat +"\nlon: " + matchgeosucursal[0].lon + "\nurl: " + matchgeosucursal[0].url);


    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>