Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

211
Views
How to get current location without clicking the button in ReactJS?
//*some code
 const [lat, setLat] = useState(null);
 const [lng, setLng] = useState(null);
 const [status, setStatus] = useState(null);

 const getLocation = () => {
      if (!navigator.geolocation) {
           setStatus('Geolocation is not supported by your browser');
      } else {
           setStatus('Locating...');
           navigator.geolocation.getCurrentPosition((position) => {
                setStatus(null);
                setLat(position.coords.latitude);
                setLng(position.coords.longitude);
           }, () => {
                setStatus('Unable to retrieve your location');
           });
      }
 }
 const point = {
      lat: lat,
      lng: lng
 };
 const dest = {
      lat: 123,
      lng: 456
 };
//*some code

I got the reference from here https://javascript.plainenglish.io/how-to-use-the-geolocation-api-in-your-react-app-54e87c9c6c94

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Add useEffect hook and call getLocation function inside it.

  const [lat, setLat] = useState(null);
  const [lng, setLng] = useState(null);
  const [status, setStatus] = useState(null);

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

  const getLocation = () => {
       if (!navigator.geolocation) {
            setStatus('Geolocation is not supported by your browser');
       } else {
            setStatus('Locating...');
            navigator.geolocation.getCurrentPosition((position) => {
                 setStatus(null);
                 setLat(position.coords.latitude);
                 setLng(position.coords.longitude);
            }, () => {
                 setStatus('Unable to retrieve your location');
            });
       }
  }
about 4 years ago · Juan Pablo Isaza Report

0

try this one. Previously findNearestLocation function was called before set latitude and longitude. At that moment mylocation was null. That was the reason.

import React, { useEffect, useState } from 'react'
import findNearestLocation from 'map-nearest-location';

export default function App() {
 const [myLocation, setMylocation] = useState(null);
 const [nearestLocation, setNearestLocation] = useState(null);
 const [status, setStatus] = useState(null);

 const locations = [
     {
       lat: 40.7722691,
       lng: -74.3008176
     },
     {
       lat: 40.682638,
       lng: -73.941015
     },
     {
       lat: 40.870347,
       lng: -74.105810
     },
     {
       lat: 40.7374197,
       lng: -74.2719785
     }
   ];

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

 useEffect(() => {
     if(myLocation) {
          const nearest = findNearestLocation(myLocation, locations);
          setNearestLocation(nearest);
     }
 },[myLocation]);

 const getLocation = () => {
      if (!navigator.geolocation) {
           setStatus('Geolocation is not supported by your browser');
      } else {
           setStatus('Locating...');
           navigator.geolocation.getCurrentPosition((position) => {
                setStatus(null);
                setMylocation({
                     lat: position.coords.latitude,
                     lng: position.coords.longitude
                })
           }, () => {
                setStatus('Unable to retrieve your location');
           });
      }
 }

 console.log(nearestLocation);

 return (
      <div className="App">
           <h1>map here</h1>
      </div>
 )
}
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!