When clicking on “Find GPS coordinates”, browser ask for permission, take coordinates after I click “Allow” and show coordinates on page. On map are shown some objects, in radius of 1000 meters. How can it be made so the map then changes to show the objects based on the user’s location? Now location is defined as exact coordinates and map show the same map no matter where you are.

Life example is uploaded here as single file: https://marshruti.eu/2222.htm

Here is the all HTML and javascript code:

Script in head:

<script>
    // Set global variable
    var watchID;

    function showPosition() {
        if(navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else {
            alert("Sorry, your browser does not support geolocation!");
        }
    }

    function successCallback(position) {
        toggleWatchBtn.innerHTML = "Stop watching";
        document.getElementById("toggleWatchBtn").classList.add('skrito');
        
        // Check position has been changed or not before doing anything
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // Set previous location
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // Get current position
            var positionInfo = position.coords.latitude + "," + position.coords.longitude;
            document.getElementById("result").innerHTML = positionInfo; 
        }
        
    }

    function startWatch() {
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function() {
            if(watchID) {
                toggleWatchBtn.innerHTML = "Start watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            } else {
  toggleWatchBtn.innerHTML = "Click on allow button!";
                showPosition();
document.getElementById("razreshenie").classList.add('pokazvanetri');       
            }
        }
    }
    
    // Initialise the whole system (above)
    window.onload = startWatch;
</script>

Code in body to show map:

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&libraries=places&callback=createMap" async defer></script>

<script>
var map;
var lat_var = 42.7107246;
var lng_var = 23.2977797;

function createMap() {

 if (!(typeof position === 'undefined' || position === null)){
    lat_var = position.coords.latitude;
    lng_var = position.coords.longitude;
}

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: lat_var,
      lng: lng_var
    },
    zoom: 16
  });
  

  var request = {
    location: map.getCenter(),
    radius: 1000,
    sensor: true,
    types: ['cafe']
  }

  var service = new google.maps.places.PlacesService(map);

  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(results.length);
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  })
}
</script>

<button type="button" id="toggleWatchBtn">1. Find Gps coordinates</button>
<div id="skrito">Your location is: <div id="kopirai">https://maps.google.com/maps?q=<span id="result"></span></div></div>

I try to change the javascript many times, but without success. I would appreciate any help.