How To Detect The Location of Your Website’s Visitors Using JavaScript

Photo by Goran Ivos on Unsplash

Detecting the location of your website’s users is useful for a variety of reasons.

You might, for instance, want to display different content, perhaps in different languages for people from different countries, or display targeted information to visitors from different locations.

Whatever your reasons might be, you have two options:

1. The Geolocation API and
2. IP address lookup

The Geolocation API

The geolocation API is a new HTML5 feature that allows a web page’s visitor to share their location with you if they so choose.

When you try to retrieve the location using this API, a prompt is shown to the user, asking them if they’d like to share their location with your site.

Example of the kind of prompt shown to the user

Obviously, this means that you won’t get the location if the user decides not to share their location with you.

Drawbacks: It only works on secure servers (https). It is not supported on Internet Explorer 10 and below, nor OperaMini.

The output from the code only gives us the coordinates. What if you need the actual location, or get the address in words? We’ll talk about this after we discuss IP lookup.

IP Address Lookup

An IP address lookup is another way to get the location of your visitor. We usually use public IP lookup services/APIs for this option. Some of these are paid services and some are free.

Examples include IP Geolocation API, IPinfo, and GEOIP DB. They provide the data in various formats as well, such as JSON, XML and CSV. To get a good understanding of how to use this services, read their documentation.

I’ll be using IP Geolocation API for my example. I could use Vanilla JavaScript, but I won’t. It’s easier with libraries like jQuery.

This as the output on my console:

Drawbacks: Although the country given by most IP lookup services is almost always accurate, the coordinates are not always accurate. Also, if you’re going to be make lots of requests, some of these services require that you get an API Key, and you may need to pay for the service.

You could use the IP lookup as an alternative or backup, for the geolocation API in browsers that don’t support geolocation, or tell you when an error occurs, like this:

Now that we have our location in one way or another, we’re going to convert the latitude and longitude we retrieved, to a more comprehensive address using the Google Maps Reverse Geocoding API.

According to google, reverse geocoding is the process of converting geographic coordinates into a human-readable addresses. All we need is an api key. Follow the steps to get one here.

Here’s what I got:

Example output of the Reverse Geocoding API

You can play around with the object to get the desired address in the format you like best.

Putting it all together, we have the below code. (Note that the ipLookUp function was modified.)

At this point, we know how to retrieve the location of our user no matter what, and you can now tailor the code to your own unique project.

I hope you’ve learned something, thanks for reading!

Source Code

You can the find the code for this article on GitHub.

AdeyinkaAdegbenro/Detect_Location