Cordova Location

Geolocation is used to get information about the latitude and longitude of a device.

Step 1 - Install the plug-in

We can install this plug-in by typing the following code in the command prompt window.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

Step 2 - Add a button

In this tutorial, we'll show you how to get the current location and how to monitor changes. /b10> We first need to create a button that will call these functions.

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

Step 3 - Add an event listener

Now let's add an event listener when the device is ready. /b10> Let's add the following code .js the onDeviceReady function in index.

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);	

Step 3 - Create a function

You need to create two functions for two event listeners. /b10> One is used to get the current location and the other is used to view the location.

function getPosition() {

   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
	
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {

   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }

   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }

}

In the example above, we use two methods - getCurrentPosition and WatchPosition. B oth functions use three parameters. Once we click the Current Location button, the alert displays the geographic location value.

If we click the WATCH POSITION button, the same reminder is triggered every three seconds. /b10> This allows us to track the movement of the user's device.

Attention

This plug-in uses GPS. /b10> Sometimes it does not return a value on time, and the request will return a time-out error. /b11> That's why we specify enableHighAccuracy:true and maximumAge:3600000. /b12> This means that if the request is not completed on time, we will use the last known value. /b13> In our example, we set maximumAge to 3600,000 milliseconds.