Getting Geolocation working with JQM/phone gap - jquery-mobile

Question

I have an application using phonegap and jQM. i'm trying to get my geolocation to work when clicking the button but i get an error in the console saying geolocation is not defined.
The error is pointing to the onclick="getLocation()". Can anyone help me please?
Heres an example of my code:
<div data-role="page" id="geo" data-add-back-btn="true" onload="onBodyLoad()">
<header data-role="header" data-position="fixed">
<h1>Geolocation</h1>
</header>
<div data-role="content">
<button data-role="button" onclick="getLocation()">Click to get your current position</button>
<div id="mapholder"></div>
</div>
</div>
$("#geo").on('pageinit', function () {
console.log("Geo page loaded!");
function onBodyLoad(){
document.getElementById('geolocation').empty();
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
phoneGapReady.innerHTML = ("")
}
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else {
x.innerHTML="Your Browser does not support Geolocation.";}
}
function showPosition(position) {
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon);
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='100%';
var myOptions= {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:
{style:google.maps.NavigationControlStyle.SMALL}
};
var map = new
google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new
google.maps.Marker({position:latlon,map:map,title:"Your Location."});
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User did not allow Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location Data is not Available."
break;
case error.TIMEOUT:
x.innerHTML="Request Timed Out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Unknown Error."
break;
}
}
});

Answer 1

Assuming you're using Phonegap 3.x, make sure you've added the geolocation plugin to your project:
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Make sure the config.xml includes it:
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>
Make sure you allow access in the android manifest:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
Try changing
if (navigator.geolocation) {
to
if (typeof(navigator.geolocation) != "undefined") {