An Introduction to The Geolocation API in JavaScript

Learn to use the geolocation API in JavaScript with practical examples

Photo by henry perks on Unsplash

Introduction

The geolocation API is used to get the geographical position of a user. It is a simple way to get the latitude and the longitude of a user on your website. However, since this can compromise privacy, the position is not available unless the user approves it.

In this article, we will learn about the geolocation API in JavaScript and how we can use it. Let’s get right into it.

Using the geolocation API

The geolocation API is supported in all browsers and will only work on secure contexts as HTTPS. If your website is hosted on a non-secure origin (such as HTTP), the requests to get the user's location will no longer function.

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

Here is an example:

function getLocation() {
// Check if geolocation is supported.
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
// If not supported.
} else {
  console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
  const x = position.coords.latitude;
  const y = position.coords.longitude;
  console.log(x); // Returns your latitude.
  console.log(y); // Returns your longitude.
}

As you can see above, the first function will check if the geolocation is supported. If so, it will run the function getCurrentPosition , otherwise, it will display a message to the user.

If the method getCurrentPosition is successful, it returns a coordinates object to the function specified in the parameter showPosition . The function showPosition() outputs the Latitude and the Longitude.

Now, you can display the user’s location on the web page if you want.

Displaying the result in a map

You can also display the results on a map using the geolocation API. You only need to access a map service, like Google Maps.