The Geolocation IP API is one of the best HTML5 APIs for identifying a user’s current geographic location in your web application.
This HTML5 feature allows you to view and record the latitude and longitude of your website’s visitors. JavaScript captures these coordinates and sends them to the server, showing you their current location.
With this information, you can personalize their customer experience by customizing your content based on geographical location. This feature significantly increases the visitor retention rate on your website and increases the chances of customer satisfaction. For example, you can divert guests to pages translated into their language. You can also show them product offerings relevant to their locale.
This article will discuss all the requirements and methods necessary to use Geo IP APIs.
Table of Contents
What Do You Need To Know Before Using Geolocation IP APIs?
Location is a privacy concern, so the geolocation IP APIs protects user privacy by getting permission before sharing location data. The Geolocation IP API sends a notification prompt box that the user can allow or deny. If the user allows it, then the API shares their location information.
The Geolocation IP API is easy to use, but keep in mind that it will only work in a secure context. This means your website or application needs to be running over HTTPS. If it is not, you can create a self-signed certificate. You can search how to do that first if you have not done it already. Your browser must also support the geolocation for the web application. Most of the browsers and mobile devices usually support the Geolocation IP API by default.
The Geolocation IP API works by using the navigation.geolocation object. Its read-only property returns a geolocation object that identifies the user’s location and can generate a customized result based on the user’s location.
How To Use Geolocation API Using jQuery?
In JavaScript, there are three methods to retrieve your users’ location or to request your users’ location using the navigator.geolocation API method.
How Can You Find the Current Position?
The getCurrentPosition method identifies the device or the user’s current location and returns a position object with the required data.
This method is the most straightforward out of the three. We have the option to provide up to three arguments; the first one is successCallback, the second one is errorCallback, and the third one can set multiple options.
Essentially, the successCallback argument means that when you call the getCurrentPosition method, the browser first asks the user if they want to share their location. If they say yes, the device will use GPS or whatever it needs to send back that location.
On the other hand, if something goes wrong when retrieving the location or the user denies it, then the errorCallback the function is going to fire off.
|
1 2 3 4 5 6 7 8 9 |
const successCallback = (position) => { console.log(position); }; const errorCallback = (error) => { console.error(error); }; navigator.geolocation.getCurrentPosition(successCallback, errorCallback); |
When you save this and refresh the browser, the browser asks “do you want to share your location with this website?” If the user presses allow, then it calls the success callback with access to the current position. This position object is GeolocationPosition. The main property of position is the coords (short for coordinates). If you expand it, you will be able to see the whole object, with more information about the position, like latitude, longitude, and altitude accuracy.
In every successful geolocation position retrieval, the latitude, longitude, and accuracy are going to be provided most of the time. However, sometimes you may not get the heading, the speed, and the other properties.
On the other hand, if the user blocks the request, you might get a GeolocationPositionError (PERMISSION_DENIED). There are three different kinds of errors; PERMISSION_DENIED, POSITION_UNAVAILABLE, and TIMEOUT. So you might have to check your code and try other things based on the reason for the error.
What to Do if You Need to Track the Position?
The watchPosition the method returns a value whenever the device’s location changes. It will return you an ID, so you create a const watchId. The watchPosition method essentially allows you to continually get updates as the user walks around or their position changes, so obviously, that can come in handy.
You can check its functionality by going into options, then more tools, and then sensors in chrome the dev tools and change your location to somewhere else and see if you are getting a different position in the console. The successCallback function continues to run as the user’s location updates.
|
1 2 3 4 5 6 7 8 9 10 |
const successCallback = (position) => { console.log(position); }; const errorCallback = (error) =>; { console.error(error); }; const watchId = navigator.geolocation.watchPosition(successCallback, errorCallback); |
How do I Cancel Continuous Location Tracking?
Continuous tracking results in gigantic amounts of data with minute longitudinal or latitudinal coordinate change; storing all of this data with slight variation is unnecessary in most cases. The fantastic thing about using this API is its method of limiting the continuous track.
There is a clearWatch method that cancels the previous watchPosition() call. Moreover, all data with the previous watchPosition() call is emptied.
The watchId is just an ID for you to manage because you will get this ID every time you call the watch function. For instance, if you want to cancel watching the location, you can use the clearWatch method and pass your watchId. Then, you will see that the watch functionality will stop working.
|
1 2 3 4 5 6 7 8 9 10 11 |
const successCallback = (position) => { console.log(position); }; const errorCallback = (error) =>; { console.error(error); }; const watchId = navigator.geolocation.watchPosition(successCallback, errorCallback); navigator.geolocation.clearWatch(watchId); |
Are There More Options?
You can pass through a few options to your request to control a few things. We are going to be covering the accuracy of the position and time-out.
How to Increase the Accuracy of the Position?
We can enable high accuracy, which is one of the options, and set it to true. The default value for the enable high accuracy property will be false. So if you make it true, you are saying to the device, try your best to provide me with high-accuracy geolocation. However, it will also cause more power consumption and maybe heat losses. In cases of more significant user traffic, enabling the high accuracy feature often results in lagging, so the wise choice is always to use it appropriately based on your requirement.
|
1 2 3 4 5 6 7 8 9 10 11 |
const successCallback = (position) => { console.log(position); }; const errorCallback = (error) => { console.error(error); }; navigator.geolocation.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true }); |
How to Set Time-Out for Retrieving the Location?
Another option, time-out, set how many milliseconds until the device times out when retrieving the location. For example, if it takes more than five thousand milliseconds (or five seconds) to retrieve the location, you can make it time out by providing five thousand as a value. Similarly, you can change this value according to your requirement, but the value ‘five thousand milliseconds’ is enough to retrieve the user geolocation data.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const successCallback = (position) => { console.log(position); }; const errorCallback = (error) => { console.error(error); }; navigator.geolocation.getCurrentPosition(successCallback, errorCallback, { enableHighAccuracy: true, timeout: 5000 }); |
In this article, we discussed how to access geolocation using different methods and how you can play around with passing different limits and values to the built-in functions of geo IP API. Hopefully, this will help you understand the functionality and its implementation.
