The Geolocation API lets you discover, with the user's consent, the user's location. You can use this functionality for things like guiding a user to their destination and geo-tagging user-created content; for example, marking where a photo was taken.
The Geolocation API also lets you see where the user is and keep tabs on them as they move around, always with the user's consent (and only while the page is open). This creates a lot of interesting use cases, such as integrating with backend systems to prepare an order for collection if the user is close by.
You need to be aware of many things when using the Geolocation API. This guide walks you through the common use cases and solutions.
TL;DR
Use geolocation when it benefits the user.
Ask for permission as a clear response to a user gesture.
Use feature detection in case a user's browser doesn't support geolocation.
Don't just learn how to implement geolocation; learn the best way to use geolocation.
Test geolocation with your site.
When to use geolocation
Find where the user is closest to a specific physical location to tailor the user experience.
Tailor information (such as news) to the user's location.
Show the position of a user on a map.
Tag data created inside your application with the user's location (that is, geo-tag a picture).
Ask permission responsibly
Recent user studies have shown that users are distrustful of sites that simply prompt the user to give away their position on page load. So what are the best practices?
Assume users will not give you their location
Many of your users won't want to give you their location, so you need to adopt a defensive development style.
Handle all errors out of the geolocation API so that you can adapt your site to this condition.
Be clear and explicit about your need for the location.
Use a fallback solution if needed.
Use a fallback if geolocation is required
We recommend that your site or application not require access to the user's current location. However, if your site or application requires the user's current location, there are third-party solutions that allow you to obtain a best guess of where the person currently is.
These solutions often work by looking at the user's IP address and mapping that to the physical addresses registered with the RIPE database. These locations are often not very accurate, normally giving you the position of the telecommunications hub or cell phone tower that is nearest to the user. In many cases, they might not even be that accurate, especially if the user is on VPN or some other proxy service.
Always request access to location on a user gesture
Make sure that users understand why you’re asking for their location, and what the benefit to them will be. Asking for it immediately on the homepage as the site loads results in a poor user experience.
Instead, give the user a clear call to action or an indication that an operation will require access to their location. The user can then more easily associate the system prompt for access with the action just initiated.
Give a clear indication that an action will request their location
In a study by the Google Ads team, when a user was asked to book a hotel room in Boston for an upcoming conference on one particular hotels site, they were prompted to share their GPS location immediately after tapping the "Find and Book" call to action on the homepage.
In some cases, the user became frustrated because they didn't understand why they were being shown hotels in San Francisco when they wanted to book a room in Boston.
A better experience is to make sure users understand why you’re asking them for their location. Add a well-known signifier that is common across devices, such as a range finder, or an explicit call to action such as “Find Near Me.”
Watching the user's location
The Geolocation API allows you to obtain the user's location (with user consent) with a single call to getCurrentPosition().
If you want to continually monitor the user's location, use the Geolocation API method, watchPosition(). It operates in a similar way to getCurrentPosition(), but it fires multiple times as the positioning software:
Gets a more accurate lock on the user.
Determines that the user's position is changing.
var watchId = navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; });
When to use geolocation to watch the user's location
You want to obtain a more precise lock on the user location.
Your application needs to update the user interface based on new location information.
Your application needs to update business logic when the user enters a certain defined zone.
Best practices when using geolocation
Always clear up and conserve battery
Watching for changes to a geolocation is not a free operation. While operating systems might be introducing platform features to let applications hook in to the geo subsystem, you, as a web developer, have no idea what support the user's device has for monitoring the user's location, and, while you're watching a position, you are engaging the device in a lot of extra processing.
After you no longer need to track the user's position, call clearWatch to turn off the geolocation systems.