Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Promisify geolocation API to get current position using JavaScript ?

  • Last Updated : 03 Aug, 2021

In this article, we are going to use Promisify geolocation API into Promise-based API.

Prerequisite: JavaScript Promise 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Approach: As we know the navigator.geolocation.getCurrentPosition is a callback-based API, so we can easily convert it into a Promise-based API. To promisify the geolocation API, we will get the user’s current position from the browser. We will either resolve the promise or reject the promise based upon, either we get the current position.

Example: 



HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        h5 {
            color: black;
        }
 
        #geeks {
            font-size: 16px;
            font-weight: bold;
        }
 
        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p id="geeks"></p>
 
 
    <button onClick="getLocation()">Get My Location</button>
    <p id="gfg"></p>
 
 
    <script>
        let s = `Promisifying the Geo Location API`;
        document.getElementById("geeks").innerHTML = `
<p>${s}</p>
`;
 
        // Logic start here
        let getLocationPromise = () => {
            return new Promise(function (resolve, reject) {
 
                // Promisifying the geolocation API
                navigator.geolocation.getCurrentPosition(
                    (position) => resolve(position),
                    (error) => reject(error)
                );
            });
        };
 
        function getLocation() {
            getLocationPromise()
                .then((res) => {
                     
                    // If promise get resolved
                    const { coords } = res;
                    document.getElementById("gfg").innerHTML = `
           
<p>
           <strong>You are Located at :</strong>
          </p>
 
  
          <h5>latitude : ${coords.latitude}</h5>
          <h5>longitude : ${coords.longitude}</h5>
          `;
                })
                .catch((error) => {
                    // If promise get rejected
                    document.getElementById("gfg")
                        .innerHTML = `
<p>${error}</p>
`;
                });
        }
    </script>
</body>
 
</html>

Output:

Promisify the geoLocation API

Example 2: We can even simplify the previous code, to make it better. As we know the navigator.geolocation.getCurrentPosition(callback, error) automatically calls the call-back function and passes the position.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        h5 {
            color: black;
        }
 
        #geeks {
            font-size: 16px;
            font-weight: bold;
        }
 
        #gfg {
            color: green;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p id="geeks"></p>
 
 
    <button onClick="getLocation()">Get My Location</button>
    <p id="gfg"></p>
 
 
    <script>
        let s = `Promisifying the Geo Location API`;
        document.getElementById("geeks")
        .innerHTML = `
<p>${s}</p>
`;
 
        let getLocationPromise = () => {
            return new Promise(function (resolve, reject) {
 
                // Automatically passes the position
                // to the callback
                navigator.geolocation
                    .getCurrentPosition(resolve, reject);
            });
        };
        function getLocation() {
            getLocationPromise()
                .then((res) => {
                    // If promise get resolved
                    const { coords } = res;
                    document.getElementById("gfg").innerHTML = `
             
<p>
                <strong>You are Located at :</strong>
            </p>
 
  
            <h5>latitude : ${coords.latitude}</h5>
            <h5>longitude : ${coords.longitude}</h5>
            `;
                })
                .catch((error) => {
                    // If promise get rejected
                    document.getElementById("gfg").innerHTML
                             = `
<p>${error}</p>
`;
                    // Console.error(error);
                });
        }
    </script>
</body>
 
</html>

Output:

Promisify the geoLocation API




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!