HTML Geolocation API

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Geolocation API

The HTML Geolocation API locate’s a user’s position.

Locate the User’s Position

The HTML Geolocation API is used to retrieve the geographical position of a user but the position is unavailable unless it is approved by the user

Using HTML Geolocation

The getCurrentPosition() method return the user’s position.

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

Example

				
					<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var 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>

				
			

Click the button to get your coordinates.

Example explained:

  • Check whether the Geolocation is supported.
  • If supported, execute the getCurrentPosition() method. If not, show a message to the user.
  • If the getCurrentPosition() method is successfully executed, it will return the coordinates object to the function mentioned in the parameter (showPosition)
  • The showPosition() function displays the Latitude and Longitude.

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method handles the errors. It defines a function to run if it fails to get the user’s location:

Example

				
					<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var 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>

				
			

Click the button to get your coordinates.

Location-specific Information

This page demonstrates how to show a position user’s on a map.

Geolocation plays a beneficial role for location-specific information, like:

  • Updated local information.
  • Displaying the Points-of-interest near the user.
  • Turn-by-turn navigation (GPS).

The getCurrentPosition() Method – Return Data

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

Property

Returns

coords.latitude

The latitude as a decimal number (always returned).

coords.longitude

The longitude as a decimal number (always returned).

coords.accuracy

The accuracy of position (always returned).

coords.altitude

The altitude in meters above the mean sea level (returned if available).

coords.altitudeAccuracy

The altitude accuracy of position (returned if available).

coords.heading

The heading as degrees clockwise from North (returned if available).

coords.speed

The speed in meters per second (returned if available).

timestamp

The date/time of the response (returned if available).

Geolocation Object – Other interesting Methods

The Geolocation object also provides other interesting methods:

  • watchPosition() – Returns the current position of the user and return the updated position as the user shows any movement.
  • clearWatch() – Stops the watchPosition() method.

The below example denotes the watchPosition() method. An accurate GPS  is requires to test this

Example

				
					<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var 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>

				
			

Click the button to get your coordinates.