Web Geolocation API

Locate the User's Position

The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Try It

Browser Support

The Geolocation API is supported in all browsers:

Using the Geolocation API

The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Example

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 +
  " Longitude: " + position.coords.longitude;

 }

Example explained:

• Check if Geolocation is supported
• If supported, run the getCurrentPosition() method. If not, display a message to the user
• If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
• The showPosition() function outputs the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example

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;

    }

 }

Displaying the Result in a Map

To display the result in a map, you need access to a map service, like Google Maps.

In the example below, the returned latitude and longitude is used to show the location in a Google Map (using 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 = " ";

 }

Location-specific Information

This page has demonstrated how to show a user's position on a map.

Geolocation is also very useful for location-specific information, like:

• Up-to-date local information
• Showing Points-of-interest near the user
• Turn-by-turn navigation (GPS)

The getCurrentPosition() Method - Return Data

The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available:

Geolocation Object - Other interesting Methods

The Geolocation object also has other interesting methods:

• watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
• clearWatch() - Stops the watchPosition() method.

The example below shows the watchPosition() method. You need an accurate GPS device to test this (like smartphone):

Example

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 +
  " Longitude: " + position.coords.longitude;

 }