Geolocation API

Access User Location!

Hi all, the Geolocation API enables our website to use the user location. You can use this functionality for things like guiding a user to their destination or geo-tagging user-created content, for example, marking where a photo was taken. In this article, I’ll cover how you can ask and access your user location.

📍When to use Geolocation

First, let’s talk about when to use the Geolocation API. Geolocation API can be very useful to find where the user is closest to a specific physical location to tailor the user experience. What if you’re running a newspaper service? You can use the Geolocation API to tailor the information to the user’s location. You can show the position of a user on a map, you can access the geo-tagging option too.

✔️ Ask Permission

Recent user studies have shown that the users are distrustful of sites that simply prompt the user to give away their position on page load. They don’t want to let others know their location.

Assume users will not give you their location!

Ask for permission to access the users’ location clearly, let them know why you require to know their location. Using a fallback solution is a best practice✔️.

Always request access to the location on a user gesture.

It’s important for you to access the users’ location only by a user gesture such as clicking on a button etc. Don’t interrupt the user by popping up a window asking for location permission!

Google Web Developers recommend a great way of asking permission. They say, “Gently nudge user to grant permission to their location”. You don’t have access to anything users are doing. You know exactly when users disallow access to their locations but you don’t know when they grant you access; you only know you obtained access when results appear.

✔️ So it’s a good practice to “nudge” users into action if you need them to complete the action.

Here are some recommended steps:

1. Set up a timer that triggers after a short period; 5 seconds is a good value.
2. If you get an error message, show a message to the user.
3. If you get a positive response, disable the timer and process the results.
4. If, after the timeout, you haven’t gotten a positive response, show a notification to the user.
5. If the response comes in later and the notification is still present, remove it from the screen.

Here is the code snippet:

button.onclick = function() {
  var startPos;
  var nudge = document.getElementById("nudge");
  var showNudgeBanner = function() {
    nudge.style.display = "block";
  };
  var hideNudgeBanner = function() {
    nudge.style.display = "none";
  };
  var nudgeTimeoutId = setTimeout(showNudgeBanner, 5000);
  var geoSuccess = function(position) {
    hideNudgeBanner();
    // We have the location, don't display banner
    clearTimeout(nudgeTimeoutId);
    // Do magic with location
    startPos = position;
    document.getElementById('startLat').innerHTML = startPos.coords.latitude;
    document.getElementById('startLon').innerHTML = startPos.coords.longitude;
  };
  var geoError = function(err) {
    console.log("Error occured!", err.code, err.message)
  };
  navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};

Before using or asking permission for users’ location make sure that the users’ browser supports the Geolocation API.

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS.');
}

That’s it, we made it! Now your website is ready to use the users’ location. Note that

You must encrypt your website with SSL certificates to make data transfer over HTTPS to use the Geolocation API.

Because, user locations are really sensitive data, so over a normal HTTP connection it will be accessible to other people on the network. This will break the users’ privacy. So, Geolocation requires your website to be encrypted using standard HTTPS.

You can do a lot of things with Geolocation API like determining the user’s current location, you can watch the user moves around, and plot it on a map for the user, and more.

Read more on Geolocation API on Web Fundamentals by Google Developers.

This is exactly just an introduction to Geolocation API. Anyway, I hope this made you interested to know more about this pretty cool API

Happy coding :)