test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gps</title>
</head>
<body>
  <button id = "find-me">Show my location</button><br/>
  <p id = "status"></p>
  <a id = "map-link" target="_blank">
  </a>
  <script>

      function geoFindMe() {

      const status = document.querySelector('#status');
      const mapLink = document.querySelector('#map-link');

      mapLink.href = '';
      mapLink.textContent = '';

      function success(position) {
        const latitude  = position.coords.latitude;
        const longitude = position.coords.longitude;

        status.textContent = '';
        mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
        mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
      }

      function error() {
        status.textContent = 'Unable to retrieve your location';
      }

      if(!navigator.geolocation) {
        status.textContent = 'Geolocation is not supported by your browser';
      } else {
        status.textContent = 'Locating…';
        navigator.geolocation.getCurrentPosition(success, error);
      }

      }

      document.querySelector('#find-me').addEventListener('click', geoFindMe);
  </script>
</body>
</html>