Cordova Geolocation Plugin Tutorial

What you’ll learn from this tutorial?

  • Geolocation with PhoneGap
  • How to get GPS (Geolocation) position using PhoneGap / Apache Cordova

According to PhoneGap documentation, This plugin provides information about the device’s location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi, and Bluetooth MAC addresses, and GSM/CDMA cell IDs. There is no guarantee that the API returns the device’s actual location.

Steps :

Create your PhoneGap project and add your platform

Add Geolocation plugin using

cordova plugin add cordova-plugin-geolocation

There are three methods in geolocation plugin such as

  • navigator.geolocation.getCurrentPosition returns current GPS position
  • navigator.geolocation.watchPosition continuously watch GPS position
  • navigator.geolocation.clearWatch Clear all data

Objects:

  • Position
  • PositionError
  • Coordinates

Syntax

<span class="hljs-selector-tag">navigator</span><span class="hljs-selector-class">.geolocation</span><span class="hljs-selector-class">.getCurrentPosition</span>(<span class="hljs-selector-tag">geolocationSuccess</span>,<span class="hljs-selector-attr">[geolocationError]</span>,<span class="hljs-selector-attr">[geolocationOptions]</span>);

Example :

navigator.geolocation.getCurrentPosition(onSuccess, onError);
var onSuccess = function(<span class="hljs-built_in">position</span>) {
    alert(<span class="hljs-string">'Latitude: '</span> + <span class="hljs-built_in">position</span>.coords.latitude + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Longitude: '</span> + <span class="hljs-built_in">position</span>.coords.longitude + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Altitude: '</span> + <span class="hljs-built_in">position</span>.coords.altitude + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Accuracy: '</span> + <span class="hljs-built_in">position</span>.coords.accuracy + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Altitude Accuracy: '</span> + <span class="hljs-built_in">position</span>.coords.altitudeAccuracy + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Heading: '</span> + <span class="hljs-built_in">position</span>.coords.heading + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Speed: '</span> + <span class="hljs-built_in">position</span>.coords.<span class="hljs-built_in">speed</span> + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'Timestamp: '</span> + <span class="hljs-built_in">position</span>.timestamp + <span class="hljs-string">'n'</span>);
};

function onError(error) {
    alert(<span class="hljs-string">'code: '</span> + error.code + <span class="hljs-string">'n'</span> +
        <span class="hljs-string">'message: '</span> + error.message + <span class="hljs-string">'n'</span>);
}

PhoneGap geolocation plugin example

<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>

<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Geo Location<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"cordova.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript">
        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onSuccess</span>(<span class="hljs-params">position</span>) </span>{
            <span class="hljs-keyword">var</span> element = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'geolocation'</span>);
            element.innerHTML = <span class="hljs-string">'Latitude: '</span> + position.coords.latitude + <span class="hljs-string">'<br />'</span> +
                <span class="hljs-string">'Longitude: '</span> + position.coords.longitude + <span class="hljs-string">'<br />'</span> +
                <span class="hljs-string">'<hr />'</span> + element.innerHTML;
        }

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onError</span>(<span class="hljs-params">error</span>) </span>{
            alert(<span class="hljs-string">'code: '</span> + error.code + <span class="hljs-string">'n'</span> +
                <span class="hljs-string">'message: '</span> + error.message + <span class="hljs-string">'n'</span>);
        }
    </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>

<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"geolocation"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>

<span class="hljs-tag"></<span class="hljs-name">html</span>></span>