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:
- 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
- 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
- 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.
- 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:
- Finding a list of nearby store locations on a map within your city
- Tagging the exact location of a social media post or photo
- To pin point exact location on a map for traffic routing and directions
- 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:
- Redirect a website visitor to a country specific website using Geo Redirection
- Display country specific content in a website using a Geo Content tool
- Redirecting instagram product posts to country specific web shop using Geo Links
- Displaying the approximate location of a user in a map using Geo Location
- Blocking a website visitor based on their country, state or city using Geo Blocking
Links to useful resources
- Mozilla Geolocation API Web Docs - Actual API docs on how the HTML5 geolocation API works and all it's associated features and functions.
- W3C Geolocation API details in Wikipedia - Describes the details and purpose of the HTML5 geolocation API
