How To Detect The Location of

Your Website’s Visitors Using

JavaScript
Adeyinka Adegbenro
Follow
Jan 17, 2018 · 3 min read
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!