"if you encounter any errors in SAP, send me a screenshot at pramod@learntosap.com, and I will help you resolve the issue."

HTML Geolocation API Tag –

HTML TUTORIALS-

HTML Geolocation API Tag –

Introduction-

🔹HTML Geolocation API allows a website to access the geographical location of the user's device (with their permissions). This is commonly used in maps, delivery apps, or local services.. Here's a basic example.

Trulli Trulli

🔐 Important -

✅ Works only on secure origins (https:// or localhost)

✅ Asks the user for permission to access location

✅ Returns latitude and longitude

✅ Can be extended with Google Maps, Leaflet, or other mapping libraries

✅ Basic Geolocation API HTML code Example:-


Geolocation API Example

My Location

Click the button to get your location.


<!DOCTYPE html>
<html>
<head>
  <title>Geolocation API Example</title>
</head>
<body>

<h1>My Location</h1>
<p id="location">Click the button to get your location.</p>

<button onclick="getLocation()">Get Location</button>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    document.getElementById("location").innerHTML =
      "Latitude: " + position.coords.latitude + 
      "<br>Longitude: " + position.coords.longitude;
  }

  function showError(error) {
    let msg;
    switch(error.code) {
      case error.PERMISSION_DENIED:
        msg = "User denied the request for Geolocation.";
        break;
      case error.POSITION_UNAVAILABLE:
        msg = "Location information is unavailable.";
        break;
      case error.TIMEOUT:
        msg = "The request to get user location timed out.";
        break;
      case error.UNKNOWN_ERROR:
        msg = "An unknown error occurred.";
        break;
    }
    document.getElementById("location").innerHTML = msg;
  }
</script>

</body>
</html>


Live Code Preview


May Be Like Important Link-

-Chart Of Account-OB13

-Define Plant-OX1

-Chart Of Account-OB13

-Define Financial Statement