Using the Geolocation API with JavaScript

The Geolocation API allows users to give their location to web applications.

In this article, we will write a simple script to fetch the users' coordinates.

Browser Support

As of writing, most modern browsers/versions will support the Geolocation API. It is always better to confirm this rather than assume it will work.

So, our first order of business is to verify if the user's browser supports it. How do we do that? Just use the navigator.geolocation object like so:

if (navigator.geolocation) {
  // Geolocation is supported!
} else {
  // Handle the use case where the browser isn't supported:
  console.warn("Sorry, your browser does not support Geolocation.");
}

Retrieving the Geographical Position

Now, we're getting into the meat of the API.

Let's fetch the user's geographical position using navigator.geolocation.getCurrentPosition. Here's how you do it:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (position) {
      // If Geolocation is supported, this function is called
      console.log("Latitude: " + position.coords.latitude + 
                  ", Longitude: " + position.coords.longitude);
    }, 
    function (error) {
      // Handle error here
      console.error("Error Code = " + error.code + " - " + error.message);
    }
  );
} else {
  console.warn("Sorry, your browser does not support Geolocation.");
}

We're passing two function arguments to getCurrentPosition. The first function is our success callback, running when we get the location. The second function runs in case of an error.

The position object has a property called coords, which contains all the geographical information we need, including latitude and longitude.

A Quick Dive into the coords Object

When you take a look at the coords object, you'll find quite a few interesting properties:

• latitude: The user's latitude (as a decimal number)
• longitude: The user's longitude (also as a decimal number)
• accuracy: The accuracy of the position (in meters)
• altitude: The user's altitude in meters above the mean sea level (can be null if not available)
• altitudeAccuracy: The accuracy of the altitude position (in meters, and also can be null if not available)
• heading: The direction in which the device is facing, in degrees (counting clockwise from true North)
• speed: The ground speed of the device in meters per second (can be null if not available)

Privacy

Lastly, remember that getting the user's geolocation requires their permission. As soon as getCurrentPosition (or watchPosition) is invoked, the user will be asked to grant permission. If they deny it, the error callback is triggered.

The Geolocation API should be used sparingly.

Requesting a user's location can feel intrusive, so use it only when it truly enhances your app's functionality.

And that's all there is to it!

You're now armed with the knowledge to use the Geolocation API in JavaScript. Happy coding!

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉