JavaScript How to get current location information: How to use Geolocation API

This article explains how to obtain current location information using JavaScript’s Geolocation API.

What is Geolocation API?

Geolocation API is a type of API provided by browsers that is used to obtain the user’s current location information.

Basic usage of Geolocation API

　Geolocation API is an API for obtaining current location information on a web browser . Using this API, you can retrieve the user’s current location and use that information in your web or mobile applications.

Below is the basic usage of Geolocation API.

Geolocation API support status

First, you need to check if your browser supports Geolocation API before using it. You can check if your browser supports Geolocation API using the code below.

if (navigator.geolocation) {
  // Processing when Geolocation API is supported
} else {
  // Handling of cases where the Geolocation API is not supported
}

Acquisition of current location information

The getCurrentPosition() method retrieves position information only once, but the watchPosition() method can be used to retrieve position information periodically. This method, like the getCurrentPosition() method, displays a dialog asking the user for permission to retrieve location information.

　If the user grants permission, location information retrieval begins, and the success callback function is called each time the location information is updated. If the user fails to give his/her permission, the error callback function is called.

const watchId = navigator.geolocation.watchPosition(success, error);

function success(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  // Processing to utilize acquired location information
}

function error(error) {
  // What to do if location information acquisition fails
}

The watchPosition() method can be stopped using the clearWatch() method. For example, position monitoring can be stopped as follows.

navigator.geolocation.clearWatch(watchId);

Option settings for current location information

The getCurrentPosition() and watchPosition() methods allow you to specify options. The main options and their meanings are as follows

const options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

navigator.geolocation.getCurrentPosition(success, error, options);

About security

The Geolocation API displays a dialog asking the user for permission to retrieve location information. This dialog will not be displayed and location information cannot be retrieved unless the user allows it. Additionally, the dialog displays the purpose for which location information will be used, so users can give permission with confidence.

Additionally, since location information falls under personal information, it is necessary to handle the obtained location information appropriately. If location information is to be stored or provided to a third party, it must be clearly stated in the privacy policy.

Explanation using a sample program

Below is a sample program using the getCurrentPosition()watchPosition()clearWatch() method.

Sample program using getCurrentPosition() method

The following is a sample program using the getCurrentPosition() method. This program obtains the current position information and displays the latitude and longitude with an alert.

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("latitude:" + latitude + ", longitude:" + longitude);
});

Sample program using watchPosition() method

The sample program using the watchPosition() method monitors changes in position information and displays these changes in real time.

var watchId = navigator.geolocation.watchPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log("latitude:" + latitude + ", longitude:" + longitude);
});

// Stop monitoring after 10 seconds
setTimeout(function() {
  navigator.geolocation.clearWatch(watchId);
}, 10000);

summary

We explained how to obtain current location information using JavaScript’s Geolocation API.

How accurate can I get location information with this method?

Accuracy varies depending on device hardware and settings, but it is generally possible to obtain location information within a few hundred meters.

Geolocation API is a very convenient way to obtain current location information, but it is important to handle it appropriately with consideration for user privacy and security. 
In addition, there are APIs that are used not only for current location information, but also for various purposes such as maps, regional information, and weather information, so it is important to consider how to use and combine APIs as necessary.