HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Geolocation Example</title>
</head>
<body>
  <h1>Geolocation Example</h1>
  <button type="button" id="get-location">Get Location</button>
  <p id="location"></p>

  <script>
    document.getElementById('get-location').onclick = function () {
      if (!navigator.geolocation) {
        document.getElementById('location').textContent =
          'Geolocation is not supported.';
        return;
      }

      navigator.geolocation.getCurrentPosition(
        function successCallback(position) {
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude;
          document.getElementById('location').textContent =
            'Latitude: ' + latitude + ', Longitude: ' + longitude;
        },
        function errorCallback(error) {
          document.getElementById('location').textContent =
            'Error: ' + error.message;
        }
      );
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Geolocation — Complete Example Page