GeolocationCoordinates: longitude property

The value in longitude is the geographical longitude of the location on Earth described by the Coordinates object, in decimal degrees. The value is defined by the World Geodetic System 1984 specification (WGS 84).

In this simple example, we fetch the user's location and display the resulting coordinates once they're returned.

The JavaScript code below creates an event listener so that when the user clicks on a button, the location information is retrieved and displayed.

let button = document.getElementById("get-location");
let latText = document.getElementById("latitude");
let longText = document.getElementById("longitude");

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;

    latText.innerText = lat.toFixed(2);
    longText.innerText = long.toFixed(2);
  });
});

After setting up variables to more conveniently reference the button element and the two elements into which the latitude and longitude will be drawn, the event listener is established by calling addEventListener() on the <button> element. When the user clicks the button, we'll fetch and display the location information.

Upon receiving a click event, we call getCurrentPosition() to request the device's current position. This is an asynchronous request, so we provide a callback which receives as in put a GeolocationPosition object describing the determined position.

From the GeolocationPosition object, we obtain the user's latitude and longitude using position.coords.latitude and position.coords.longitude so we can update the displayed coordinates. The two <span> elements are updated to display the corresponding values after being converted to a value with two decimal places.

The HTML used to present the results looks like this:

<p>
  Your location is <span id="latitude">0.00</span>° latitude by
  <span id="longitude">0.00</span>° longitude.
</p>
<button id="get-location">Get My Location</button>

Take this example for a test drive here:

• Using the Geolocation API
• The GeolocationCoordinates interface it belongs to.
• The GeolocationPosition interface, which is the top-level interface used to return geolocation data from the Geolocation API functions Geolocation.getCurrentPosition() and watchPosition().