There are a lot of functionalities where you have to get the user's location.
Let's consider a simple scenario that you have to show the popup based on user's location. so you have to get the user's location to achieve the requirement.
There are 2 ways to get the user's location.
Using Geo IP API
With this approach, You will have to use IP database. Get User's IP address and match that IP address in the IP database, and get related address details. Here If you don't have a backend or database you can use 3rd party API. There are many APIs available.
Here is a list of Few IP API Providers:
All have their own limitation and different pricing so check documentation, terms and conditions before use.
Usage
axios.get(`http://ip-api.com/json/`).then(res => {
console.log(res.data)
}).catch(err => {
console.error(err)
})
Pros
- User don't need user permission to get their location.
- Instant and simple user's geo location place.
- Free for limited requests
Cons
- Less Accuracy of user's location
- Some 3rd party APIs are paid for commercial use.
Using Geo Location API
The Geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. It returns only geographical coordinates of user's location once they allow.
Usage
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
console.log(position.coords)
});
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
By above code, User would get the popup as per below screenshot.
It will return geolocation data only if user allow the popup.
Pros
- 100% Accurate Geo location
- Instant
- Available for free as It is native browser API.
Cons
- Only return coordinates
- Require 3rd party tool to convert coordinates to geo location
- Available only in secure contexts (https)
You can use openstreetmap as tool to convert coordinates to geo location. It's an open source platform.
So that's all about user's Geo location. Let me know your views by commenting on this post.
I hope you found the article helpful. Feedbacks are greatly appreciated! 🙌
Have an amazing day!
🌎 Lets connect
Top comments (1)
I had to deal with something like this recently. I was looking to sort a list of physical locations by how far they are from the user. Since I had the latitude and longitude of each of the physical locations and the latitude and longitude of the user, I could use the Haversine formula to calculate the distance between the user and each of the locations (in kilometers). I settled on doing IP-based geolocation when the page loads but then using navigator.geolocation to update the coordinates if the user clicks a "find my location" button. The only trick left is to show the user's location (I just did City and State) for each method. If they are on a cellphone or using a VPN, their location could be showing up as being in a completely different part of the country and I figured that explicitly saying where I thought they were would solve that.
I think that I have convinced myself that this hybrid approach is the best option.