HTML5 Geolocation API

SEO
15 minutes

What is HTML5 geolocation?

HTML5 geolocation is a browser API (application programming interface) that is utilized for obtaining the device geographic position (latitude and longitude coordinates). This can help detect the geo location of the visitor or user on a website or app.

Dive into this article to learn more about HTML5 geolocation, how it works, tutorials, pros/cons and more!

CONTENT

  • How does HTML5 geolocation work?
  • How accurate is HTML5 geolocation?
  • What browsers support HTML5 geolocation?
  • Does HTML5 geolocation need user permission?
  • Demos & tutorial of HTML5 geolocation API in action (+ Google Maps integrations)
  • Demo of how IP geolocation works without user permission
  • HTML5 geolocation vs IP geolocation
  • Uses of HTML5 geolocation
  • Links to other useful resources

How does the HTML5 geolocation API work?

HTML5 geolocation detects latitude and longitude coordinates by using the device's GPS (if available on the device) or the device's mobile/WIFI signal (if GPS is not available. The mobile/WIFI signals are triangulated to work out the latitude and longitude.

How accurate is HTML5 geolocation?

Depending on the availability of GPS on the device and the quality of the mobile/WIFI signals, HTML5 geolocation can be very accurate i.e. to a street level. Hence it can be used to pin point a device's location making it a very useful technology for websites or apps that require the exact user's location to work.

What browsers support HTML5 geolocation?

HTML5 geolocation is widely used and supported on all major browsers:

  • Google Chrome (version 5.0 onwards)
  • Internet Explorer (version 9.0 onwards)
  • Firefox (version 3.5 onwards)
  • Safari (version 5.0 onwards)
  • Opera (version 16.0 onwards)

Does HTML5 geolocation need user permission?

Yes! HTML5 geolocation is strictly permission based i.e. the user will be prompted with a browser popup asking to share their device's location with the website or app being accessed. Only if the user agrees to provide permission, the latitude and longitude coordinates will become available.

It is important to be aware on the implications of permission when designing your location based website or app in terms of handling cases where the user disagrees to sharing their device location.

A great fallback is the use of IP geolocation technology which utilizes the devices IP address to work out approximate location. This method does not require browser permission as the device location detected is only approximate (99%+ accurate on a country level, 70-90% on a state level and ~70% on a city level)

Demos & tutorials of the HTML5 geolocation API in action (+ Google Maps integrations)

Below is a curated list of some of the best HTML5 geolocation demo's:

  1. W3 Schools HTML5 geolocation demo - a simple demo showing how the HTML5 geolocation API requests user permission in the browser and displays the result in a Google Map
  2. Code Pen demo by Nick Moreton - another simple demo with JavaScript, HTML and css code showing how to make use of the HTML5 geolocation API and display the result in a Google Map
  3. Tutorial Republic HTML5 geolocation tutorial - Simple guide on how to get visitor coordinates and deal with errors and rejections using JavaScript and HTML. They also provide a guide on how to display the result in a Google map.
  4. Bit Degree HTML geolocation guide - a detailed guide on how to implement the HTML5 geolocation API in a website.

Demo of how IP geolocation works without needing user permission

See a demo of how IP geolocation works over HTML5 geolocation. You will notice that there is no request from the browser to accept permission for sharing location data with the website. You will also notice how IP geolocation locates the user to the center of a major city rather than to the actual street.

HTML5 geolocation vs IP geolocation

There a significant differences between HTML5 geolocation and IP based geolocation. The key differences are outlined below:

HTML5 Geolocation

  • Uses device's GPS or mobile/WIFI signals to detect location
  • High accuracy (down to street level)
  • Requires user permission in the browser
  • Has privacy issues as exact location of the user is known
  • Used when exactly location of a user is required e.g. locating a user on a map to find travel distances to destination

IP Geolocation

  • Uses device's IP address to match against a IP location database
  • 99% accurate on country level, 70-90% on state level, 60-80% on city level
  • Does not require any user permission (can auto detect a visitor's approx. location)
  • Less of privacy issue as only approximate location of the user is known
  • Used when only approximate location of a user is required e.g. to detect visitor country or state for displaying geo targeted content

Uses cases of HTML5 geolocation

HTML5 geolocation is mainly utilized when the exact location of a user is required for a website or app to function as required. Examples of such use cases are:

  1. Finding a list of nearby store locations on a map within your city
  2. Tagging the exact location of a social media post or photo
  3. To pin point exact location on a map for traffic routing and directions
  4. Determining exact location to provide weather information in your suburb/zip area

Uses cases of IP geolocation

IP geolocation should be utilized over HTML5 geolocation when the user's approximate location is sufficient for the website or app to function. Examples of such uses cases are:

  1. Redirect a website visitor to a country specific website using Geo Redirection
  2. Display country specific content in a website using a Geo Content tool
  3. Redirecting instagram product posts to country specific web shop using Geo Links
  4. Displaying the approximate location of a user in a map using Geo Location
  5. Blocking a website visitor based on their country, state or city using Geo Blocking

Links to useful resources

Author
4th February 2019

Real stories of geo-targeting impact

William D.

Small Business

⭐⭐⭐⭐⭐
Feb 26, 2024

An Incredibly Handy Tool for Your International Customers

Geo targetly allows us to redirect our international customer to specific pages and make sure that they can get the right UX. It is very helpful when you have like us different currency to manage. Also it is very easy to implement on your Webflow website.

Michal C.

Entrepreneur

⭐⭐⭐⭐⭐
Aug 15, 2024

Geo Targetly Is a Great Option for My Multiple Shopify Sites

@GeoTargetly - Love this tool for global e-commerce redirects. I use it on several Shopify sites and love it. You can use one link and send people to different links based on their location and a ton of other stuff too.
#globalecom #ecommerce #shopifystore

Cheryl T.

Marketer

⭐⭐⭐⭐⭐
Oct 4, 2021

It Is Very Easy to Use On Wix - the Help Articles Were Useful

We wanted to be able to segment certain landing pages for certain geographical locations and using the redirect page especially for our pricing pages was extremely helpful in helping us achieve this task. It has allowed us to target certain landing pages effectively.

Mainak G.

Psychologist

⭐⭐⭐⭐⭐
Nov 28, 2023

A Game Changer For Global Business

As the backbone of our emerging global approach, Geo targetly has been holding our back. It's hassle free, they transform your website in the most appropriate ways for different countries, tribes, localities. Besides top notch features customer support is amazing.

Chris T.

Managing Director

⭐⭐⭐⭐⭐
Jan 12, 2021

"Geo Redirects Made Easy" - Great Tool And Very Attentive Support

I really liked how easy it was to integrate the geo redirects into our Shopify website with a single block of code. The user interface also made it simple to define our business rules with regard to how we want users to be directed around our 3 sites.

Daan D.

Digital Marketing Manager

⭐⭐⭐⭐⭐
Oct 4, 2021

We Have Seen a Great Increase In Our Traffic

Very easy to set up and run. We use Geo Targetly to set up redirections for our specific geo based versions of our website. We have seen a great increase in our traffic and it has been a helpful addition to our tool stack. It's very useful and does what it says.

Start in just a few clicks

try 14 days free
Your Privacy

We uses cookies to improve your experience on our site, analyse site traffic and to show you relevant content. By using our website, you consent to our use of cookies. For more information please, see our Privacy Policy

ACCEPT ALL
ACCEPT NECESSARY
REJECT ALL