What Is HTML Geolocation API

The HTML Geolocation API is used to discover a customer’s position.

Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS.

Locate the User’s Position

The HTML Geolocation API is utilized to get the topographical situation of a client.

Since this can think twice about, the position isn’t accessible except if the client endorses it.

Note: Geolocation is most accurate for devices with GPS, like smartphones.

Browser Support

The numbers in the table indicate the primary program form that completely upholds Geolocation.

HTML Geolocation API
Geolocation API

Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

Using HTML Geolocation

The getCurrentPosition() strategy is utilized to return the client’s position.

The model beneath returns the scope and longitude of the client’s position:

Example

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

Example explained:
  • Check in case Geolocation is upheld
  • Whenever upheld, run the getCurrentPosition() strategy. If not, show a message to the client
  • On the off chance that the getCurrentPosition() technique is effective, it returns a directions object to the capacity indicated in the boundary (showPosition)
  • The showPosition() work yields the Latitude and Longitude

The model above is an exceptionally fundamental Geolocation script, with no mistake taking care of.

Handling Errors and Rejections

The second boundary of the getCurrentPosition() technique is utilized to deal with blunders. It indicates a capacity to run on the off chance that it neglects to get the client’s area:

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 show the outcome in a guide, you need admittance to a guide administration, similar to Google Maps.

In the model beneath, the returned scope and longitude is utilized to show the area in a Google Map (utilizing a static picture):

Example

function showPosition(position) {
  var latlon = position.coords.latitude + “,” + position.coords.longitude;

  var img_url = “https://maps.googleapis.com/maps/api/staticmap?center=
  “+latlon+”&zoom=14&size=400×300&sensor=false&key=YOUR_KEY”;

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

Location-specific Information

This page has shown how to show a client’s situation on a guide.

Geolocation is additionally extremely valuable for area explicit data, as:

  • State-of-the-art nearby data
  • Showing Points-of-interest close to the client
  • Turn-by-turn route (GPS)

The getCurrentPosition() Method – Return Data

The getCurrentPosition() strategy returns an item on progress. The scope, longitude and exactness properties are constantly returned. Different properties are returned if accessible:

PropertyReturns
coords.latitudeThe latitude as a decimal number (always returned)
coords.longitudeThe longitude as a decimal number (always returned)
coords.accuracyThe accuracy of position (always returned)
coords.altitudeThe altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracyThe altitude accuracy of position (returned if available)
coords.headingThe heading as degrees clockwise from North (returned if available)
coords.speedThe speed in meters per second (returned if available)
timestampThe date/time of the response (returned if available)
Geolocation API

Geolocation Object – Other interesting Methods

The Geolocation object likewise has other fascinating techniques:

  • watchPosition() – Returns the current situation of the client and keeps on returning refreshed situation as the client moves (like the GPS in a vehicle).
  • clearWatch() – Stops the watchPosition() strategy.

The model underneath shows the watchPosition() strategy. You need a precise GPS gadget to test this (like cell phone):

Example

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