Web Geolocation API

Locate the user's location

The HTML Geolocation API is used to obtain the user's geographical location.

As this may infringe on privacy, location is not available unless the user approves.

Try It Yourself

Note:Geolocation is most accurate for devices with GPS (such as smartphones).

All browsers support the Geolocation API:

Chrome IE Firefox Safari Opera
Support Support Support Support Support

Note:Starting from Chrome 50, the Geolocation API will only be applicable to secure contexts, such as HTTPS. If your site is hosted on a non-secure source (such as HTTP), the request to obtain the user's location will no longer work.

Use Geolocation API

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

The following example returns the latitude and longitude of the user's location:

Example

<script>
function getLocation() {
if (navigator.geolocation) {
  navigator.geolocation.watchPosition(showPosition);
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "Longitude: " + position.coords.longitude;
}
</script>

Try It Yourself

Example explanation:

  1. Check if Geolocation is supported
  2. If supported, run the getCurrentPosition() method. If not, display a message to the user
  3. If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
  4. The showPosition() function outputs latitude and longitude

The example above is a very basic geolocation script without error handling.

Handle errors and denials

getCurrentPosition() The second parameter of the method is used to handle errors. If the user's location cannot be obtained, it specifies the function to be executed:

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;
  }
}

Try It Yourself

Display results on the map

If you want to display the results on the map, you need to access the map service, such as Google Maps.

In the following example, the returned latitude and longitude are used to display the location on Google Maps (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 = "<img src='"+img_url+"'>";
}

Location-specific information

This page demonstrates how to display the user's location on a map.

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

  • Latest local information
  • Display points of interest near the user
  • Turn-by-turn navigation (GPS)

getCurrentPosition() method - Return data

getCurrentPosition() The method returns an object on success. It will always return latitude, longitude, and accuracy properties. If available, it will return other properties:

Properties Return
coords.latitude Latitude expressed as a decimal number (always returned).
coords.longitude Longitude expressed as a decimal number (always returned).
coords.accuracy Location accuracy (always returned).
coords.altitude Height above mean sea level (in meters) (if available, it will be returned).
coords.altitudeAccuracy The height accuracy of the location (if available, it will be returned).
coords.heading Bearing from north clockwise (if available, it will be returned).
coords.speed Speed in meters per second (if available, it will be returned).
timestamp The response date/time (if available, it will be returned).

Geolocation object - Other interesting methods

The Geolocation object also has other interesting methods:

  • watchPosition() - Return the user's current location and continue to return updated locations as the user moves (such as GPS in a car).
  • clearWatch() - Stop the watchPosition() method.

The following examples demonstrate watchPosition() Method. You need an accurate GPS device to test (such as a smartphone):

Example

<script>
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;
}
</script>

Try It Yourself