navigator.geolocation.getCurrentPosition function results in undefined when called outside local scope

Question

How can I access the object of the navigator.geolocation.getCurrentPosition success callback outside the function when calling it?

Let say I have a function in a file(called UserLoc) which I am exporting.

export const locateCurrentPosition = () => {
  const currentPosition = navigator.geolocation.getCurrentPosition(
    position => {
      console.log(position);
      return position;
    },
    error => {
      console.log(error.message);
      return error;
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 1000
    }
  );

  return currentPosition;
};

Now on one of my component js files, I want to call this function inside the componentDidMount()

const {
  locateCurrentPosition
} = require("../Views/components/User/UserMap/UserLoc");

async componentDidMount(){

console.log(locateCurrentPosition())
locateCurrentPosition().then(data=>console.log(data))
}

When I am calling the function inside my componentDidMount, it always returns an undefined. When Im logging this, it prints out the position when inside the local scope (ie first code block above where I use console.log(position). What is the best way to actually retrieve the position object from a successful callback and return it into my componentDidMount when called?

Ive tried promises, then statements with my console log as well as different types of returns, but I always seem to get undefined. The return statements within the locateCurrentPosition function dont seem to work. Any suggestions?

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — traktor, Dec 04 '19 at 00:03

score 2 · Accepted Answer · edited Dec 04 '19 at 15:39

2

Added arrow after new Promise((resolve,reject)

navigator.geolocation.getCurrentPosition returns undefined, the value returned from calling locateCurrentPosition. Position is only passed to the callback supplied in the call, which can be turned into a promise as required:

export const locateCurrentPosition = () => new Promise((resolve,reject)=> {
  navigator.geolocation.getCurrentPosition(
    position => {
      console.log(position);
      resolve(position);
    },
    error => {
      console.log(error.message);
      reject(error);
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 1000
    }
  );
});

and called using

locateCurrentPosition().then(position=>console.log(position))

See also How do I return the response from an asynchronous call

edited Dec 04 '19 at 15:39

Ray

1,548
2
11
18

answered Dec 04 '19 at 00:01

traktor

17,588
4
32
53

Thanks this works great. One slight modification. I was getting a syntax error because of a missing =>. I will post the answer below. Thanks for the help. Im not too familiar with promises. I tried using awaits and async because I thought they were similar to promises but wasnt having any luck. – Ray Dec 04 '19 at 14:18
1

Correction, I edited your post to show the missing arrow. Thanks again. – Ray Dec 04 '19 at 15:36

navigator.geolocation.getCurrentPosition function results in undefined when called outside local scope

1 Answers1