Home/ Questions/Q 7917567
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T15:11:40+00:00

How can I save lat and lng values to variables using HTML5 geolocation API?

  • 0

How can I save lat and lng values to variables using HTML5 geolocation API?

This is my code, copied from w3schools. How can I save coordinates to variables like var x= position.coords.latitude; and var y= position.coords.longitude; instead of just showing the values like the code is doing right now? I am beginner with javascript so I don’t know how to do this

 <!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>

var x=document.getElementById("demo");
window.onload = function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br />Longitude: " + position.coords.longitude;  
  }
</script>
</body>
</html>

And in my application I need to send values of those variables to server every minute. Would it be better to do the geolocation with watchposition or execute function that does getcurrentposition every minute?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Adding them to variables is as easy as:

    var lat = position.coords.latitude;
var lon = position.coords.longitude;

    OR as an object:

    var coords = {lat: "", lon: ""};

    Then to use the object in your code:

    function showPosition(position)
{
   coords.lat = position.coords.latitude;
   coords.lon = position.coords.longitude;

   x.innerHTML="Latitude: " + coords.lat + 
   "<br />Longitude: " + coords.lon;  
}

    As for sending the variables to a server this depends on what your serverside technology is but you will find many examples on google.

    function sendToServer(){
   // here you can reuse the object to send to a server
   console.log("lat: " + coords.lat);
   console.log("lon: " + coords.lon);
}
    • 0