Web Geolocation API

❮ Previous Next ❯

Locate the User's Position

The HTML Geolocation API helps find where a user is located on Earth.

If someone's privacy might be at risk, the location won't show up unless the user says it's okay.

Note

Geolocation works best on devices equipped with GPS, such as smartphones.

Note

The Geolocation API only functions on secure websites, like those using HTTPS.

If your website is on an insecure connection (like HTTP), the requests to find users' locations won't work anymore.

Using the Geolocation API

The getCurrentPosition() function tells us where the user is.

The following example provides the user's current latitude and longitude.

Example explained:

Verify whether Geolocation is supported.
If possible, execute the getCurrentPosition() function. If not possible, show a message to the user.
If the getCurrentPosition() function works well, it gives back a coordinates object to the showPosition function specified in the parameter.
The showPosition() function displays the Latitude and Longitude.

The provided illustration is a simple Geolocation script without error handling.

Handling Errors and Rejections

The second part of the getCurrentPosition() method deals with errors. It decides what action to take if there's a problem getting the user's location.

Displaying the Result in a Map

To show the outcome on a map, you require a map service such as Google Maps.

In this example, we use the latitude and longitude we get to display the location on a Google Map, which shows a static image.

Example

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;

  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";

  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Location-specific Information

This page shows how to display where a user is located on a map.

Geolocation helps provide specific information about locations, such as:

Current details about the area
Displaying nearby places of interest to the user.
GPS-guided turn-by-turn navigation

The getCurrentPosition() Method - Return Data

The function getCurrentPosition() gives back an object when it works properly. It always gives the latitude, longitude, and accuracy details. If they exist, it also returns other details.

Property	Returns
coords.latitude	Latitude expressed as a decimal number (always provided).
coords.longitude	Longitude as a decimal number (always given back).
coords.accuracy	The accuracy of the position (always provided).
coords.altitude	The height in meters above the average sea level (provided if accessible).
coords.altitudeAccuracy	The height precision of location (provided if accessible).
coords.heading	The title indicates the degrees clockwise from North (provided if accessible).
coords.speed	The velocity in meters per second (provided if accessible).
timestamp	The date and time when the response was given (provided if accessible).

Geolocation Object - Other interesting Methods

The Geolocation object also contains other useful methods.

The function watchPosition() gives you where the user is right now and keeps updating as the user moves, similar to how a car's GPS works.
The code clearWatch() is used to halt the watchPosition() method.

The sample code demonstrates the watchPosition() function. To try it out, you'll require a precise GPS device, such as a smartphone.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Geolocation API</h2>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>
    <script>
      const x = document.getElementById("demo");

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(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>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Geolocation API</h2>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>
    <script>
      const x = document.getElementById("demo");

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
          x.innerHTML = "Geolocation is not supported by this browser.";
        }
      }

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

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

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Geolocation API</h2>
    <p>Click the button to get your coordinates.</p>
    <button onclick="getLocation()">Try It</button>
    <p id="demo"></p>
    <script>
      const x = document.getElementById("demo");

      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>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

Web Geolocation API

Locate the User's Position

Note

Note

Using the Geolocation API

Handling Errors and Rejections

Displaying the Result in a Map

Example

Location-specific Information

The getCurrentPosition() Method - Return Data

Geolocation Object - Other interesting Methods

Web Development