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 javascript code:

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

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

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>

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