Detecting the user’s global location using javascript

A while back I wanted to show/hide a box on my website based on the location of the visitor. There’s a couple of options to get the user location:

1. Use an API which you send the IP address to and get a location back (find services by googling “geolocation ip address api”)
2. Ask for the user location via the browser’s geolocation API (example here)
3. A global approach: get the user’s timezone (see below!)

The first one is quite privacy-sensitive, it usually requires sending the user IP to a third-party or keeping a database of IP’s and locations yourself.

The second one gives the user a pop-up; “Hey, could you give me your location so I can decide if I show you this box or not?” That’s a no-go as well.

The third option: Requesting the user’s timezone

Now, this one is interesting – it might not always give me the precise location, but I am OK with that. When I edit the timezone in my system preferences, the browser reports the change back immediately, and most users have the auto-detection of timezone enabled.

How does that work?

We’ll use the Intl.DateTimeFormat().resolvedOptions().timeZone function to get the timezone. And, since I want to show/hide the box based on “In Europe” or “outside of Europe”, this is the code I came up with:

document.addEventListener("DOMContentLoaded", () => {
	let elem = document.querySelector(".the-box-class");

	if (elem !== null) {
		const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
		if (tz.includes('Europe')) {
			elem.style.opacity = 0;
		}
	}
});

Easy does it!

Happy developing!