Hello Coders👨‍💻👩‍💻! In this blog, we'll be covering how to get the user's current location in React functional components. We'll start by discussing how to get the user's latitude and longitude from the browser's Geolocation API

⛳Introduction

In some situations, applications need to access the current location properties of the user. Location properties include latitude, longitude, and some more about the current location of the user. From the Location properties, the user can know the current geolocation of the user.

The app can provide specific services to the user according to current geolocation. The app with a map integration can show the current location of the user on the Google map using Google Maps API.

The user can get the following details.

• Latitude

• Longitude

• Altitude

• Accuracy

• speed

  

  How to create a Google API for getting the user's current location?

  These are the steps you have to follow:-

• To create a Google API for getting the current location, you will need to follow these steps:

  1. Go to the Google Cloud Console (click for google api ).

  2. Create a new project or select an existing one.

  3. Go to the "Library" page and search for "Google Maps JavaScript API".

  4. Click on the API and enable it for your project.

  5. Go to the "Credentials" page and create a new API key.

  6. Configure the API key by setting the appropriate restrictions for your use case.

  7. Once you have the API key, you can use it in your JavaScript code to access the Google Maps JavaScript API and the Geolocation API, which allows you to get the user's current location.

  8. You can use the following code to get the current location.

      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            // you can use pos to get location
          }, function() {
            // handle errors here if any
          });
        } else {
          // Browser doesn't support Geolocation
        }
     

     Please note that You also need to enable the Geolocation API from the Google Cloud Console and also be aware of the browser compatibility of Geolocation API

     Also, you need to be aware that this is a client-side solution to get the location and might not work if the user blocks the location or if you want to access this information from the server side you need to use other APIs such as IP Geolocation API

     In ReactJS function components, you can use the useEffect hook to retrieve the user's address.

      import { useEffect } from 'react';
     
      function MyComponent() {
        const [userAddress, setUserAddress] = useState(null);
     
        useEffect(() => {
          navigator.geolocation.getCurrentPosition(position => {
            const { latitude, longitude } = position.coords;
     
            // use the latitude and longitude to get the user's address
            fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=YOUR_API_KEY`)
              .then(response => response.json())
              .then(data => {
                setUserAddress(data.results[0].formatted_address);
              });
          });
        }, []);
     
        return <div>User's address: {userAddress}</div>;
      }
     

     Note that you'll need an API key from Google to use the geocoding API. You can also use other APIs such as OpenStreetMap Nominatim.

     Also, make sure you have enabled the geolocation in your browser and ask user permission to use it.

• Let's break down the code:-

import { useEffect } from 'react';

We import the useEffect hook from the react library. useEffect allows us to run side effects, such as fetching data, in our functional components.

function MyComponent() {
  const [userAddress, setUserAddress] = useState(null);

We define a functional component MyComponent and inside it we use useState hook to define a state variable userAddress which is set to null initially.

  useEffect(() => {
},[])

We use the useEffect hook to run some code on component mount (when the component is first rendered on the page).

    navigator.geolocation.getCurrentPosition(position => {

We use the navigator.geolocation.getCurrentPosition method to get the user's current location. This method takes a callback function as an argument. The callback function is called with a position object, which contains the user's latitude and longitude.

      const { latitude, longitude } = position.coords;

We destructure the coords property of the position object to get the latitude and longitude properties.

      fetch(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=YOUR_API_KEY`)
        .then(response => response.json())
        .then(data => {
          setUserAddress(data.results[0].formatted_address);
        });

We use the fetch function to make a GET request to the Google Maps Geocoding API, passing in the latitude and longitude as parameters. This API returns the address corresponding to the provided coordinates. We parse the response from the API as json using response.json() method. Then we extract the formatted address from the json data and set the state variable userAddress using setUserAddress function.

    });
  }, []);

We pass an empty array as the second argument to useEffect to run the effect only on the initial render.

  return <div>User's address: {userAddress}</div>;
}

Finally, we render the component and display the user's address obtained from the API call.

It's important to note that the getCurrentPosition method is not supported by all browsers and it's a good practice to handle the case when the browser doesn't support it. Also, you need to replace YOUR_API_KEY with your own API key, which you can get from the Google Cloud Console.

Output:-

🎯 Wrap Up!!

If you found this post helpful, please take a moment to share it with your friends and colleagues. You can use the social media sharing buttons below or simply copy and paste the link to share it on your preferred platform. Your support helps me create more valuable content for you. Thank you!