Marinus Klasen

Marinus Klasen

  • Development
  • Consultancy
  • Developer Resources
  • Blog
  • Contact

August 16, 2022

Detecting the user’s global location using javascript

Marinus Klasen

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!

About Marinus Klasen

Marinus has been working in software/web development for more than a decade. Since 2020 his attention shifted on sharing knowledge and developing products and tools for sharing knowledge.

Marinus Klasen on Twitter

This site runs on Cloudways.
It's fast isn't it?
Cloudways offers high-quality, fast and affordable hosting.

Learn more

Need a hand? Post your project and hire me and other top notch developers on Codeable.

Hire me on Codeable

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get in touch

Contact me using the details below

Marinus Klasen

Wilhelmina van Pruisenweg 35, 2595 AN Den Haag

[email protected]
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • Disable the ‘Password Changed’ Email notification in WordPress with a filterAugust 30, 2023
  • A-Frame: Change an objects color on hoverAugust 24, 2023
  • Connecting to a Cloudways application with VSCodeAugust 15, 2023
  • Force refresh PHP-FPM or Litespeed cacheAugust 4, 2023
  • Only return zip/postal codes from Google Places AutoComplete Javascript APIJuly 19, 2023

Copyright © 2023 · Marinus Klasen | Webdesign by Team Rood