Displaying phone's geo location on screen with ionic - android

I'm learning ionic and I'm having trouble displaying my Android phone's geo location (lat and long) on screen. How can I do this?
Code take from https://www.tutorialspoint.com/ionic/ionic_geolocation.htm
.controller('GeoCtrl', function($scope, $cordovaGeolocation) {
$scope.result = "";
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var lat = position.coords.latitude;
//$scope.geo.lat = position.coords.latitude;
var long = position.coords.longitude;
//$scope.geo.long = position.coords.longitude;
console.log(lat + ' ' + long)
$scope.geo = lat + ' ' + long;
}, function(err) {
console.log(err)
});
})
And here's the html where i just want the geo location to be displayed:
<ion-view view-title="Submit New Thing">
<ion-content class="padding">
<h2>List of items for sale</h2>
<div >
<h3> Geo locaton is {{geo}}</h3>
</div>
</ion-content>
</ion-view>
When I test on my phone {{geo}} is literally displayed.

Answer: I didn't have the ngCordova dependency injected into the app.

Related

Cant find user location when apk installed on android phone

I have created an ionic angularjs ngCordova mobile app, wherein I have used ngCorodova geolocation plugin in order to get user location. when I am testing this on browser it works fine. but when same I [android-app.apk] I install on mobile app [obviously after checking "unknown sources" option]; I am not able to get the location. I see in app setting, permission is there to access location on mobile. Also, When event is trigerred it shows GPS symbol on top bar but it disappears.
Can anybody help me with this?
Below is the code for location in my controller.js
.directive('reverseGeocode', function ($cordovaGeolocation, $rootScope) {
return {
restrict: 'E',
template: '<div></div>',
link: function (scope, element, attrs) {
var geocoder = new google.maps.Geocoder();
var posOptions = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var lati = position.coords.latitude;
var longi = position.coords.longitude;
// console.log(angular.toJson($rootScope.lati) + " - " );
var request = new XMLHttpRequest();
var method = 'GET';
//var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true';
var async = true;
//alert(url);
//request.open(method, url, async);
//alert(angular.toJson(request.open(method, url, async)));
// var data = JSON.stringify(request.responseText);
// alert(JSON.stringify(request.responseText));
var latlng = new google.maps.LatLng(lati, longi);
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
//alert(results[1].address_components[1].long_name);
$rootScope.colony = results[1].address_components[1].long_name;
//alert(results[1].address_components[1].long_name);
//alert(results[1].address_components[1].long_name);
//alert(angular.toJson(results[1].address_components[1].long_name));
element.text(results[1].formatted_address);
} else {
element.text('Location not found');
}
} else {
element.text('Geocoder failed due to: ' + status);
}
});
}, function(err) {
// error
});
var watchOptions = {
frequency : 1000,
timeout : 3000,
enableHighAccuracy: false // may cause errors if true
};
var watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
// error
},
function(position) {
var lat = position.coords.latitude
alert("abc >>" + lat);
var long = position.coords.longitude
});
watch.clearWatch();
// OR
$cordovaGeolocation.clearWatch(watch)
.then(function(result) {
// success
}, function (error) {
// error
});
},
replace: true
}
})
In html file I am using it as :
<h6>
User Colony: {{ colony }}
<reverse-geocode lat={{lati}} lng={{longi}}></reverse-geocode>
</h6>
<a href="#" ng-click="showStores(colony)" class="button button-block button-positive">
Browse Store
</a>
which triggeres the directive and find lat and long of user.
When testing on browser, it works perfectly but not on mobile itself.
In android it is super complicated to work with the GPS user, remember that often the geolocation we get is from the browser and not the GPS itself, and this varies a lot in the devices. For your help, I recommend installing cordova.plugins.diagnostic
function onDeviceReady() {
cordova.plugins.diagnostic.isLocationAuthorized(function(enabled){
//alert("gps es : " + (enabled ? "enabled" : "disabled"));
}, function(error){
//alert("error: "+error);
});
cordova.plugins.diagnostic.isLocationEnabled(function(enabled){
if(!enabled){
alert("gps not actived");
}else{
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy: true,timeout: 5000,maximumAge: 5000});
}
}, function(error){
console.log("The following error occurred: "+error);
});
}
Always trying to see if I can get a latitude and longitude and if that is not activated or not you can get, it sends a message to the user. I hope it helps you.

location in Ionic project for android

In a simple Ionic app I have to get current location on map. It's works fine in browser when i click find me, but it's not working on actual Android device.
I'm using the following code
View.html
<ion-view view-title="{{navTitle}}">
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-stable">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-view>
controllers.js
.controller('googlemap', function($scope, $ionicLoading, $compile) {
$scope.navTitle = 'Google Map';
$scope.$on('$ionicView.afterEnter', function(){
if ( angular.isDefined( $scope.map ) ) {
google.maps.event.trigger($scope.map, 'resize');
}
});
function initialize() {
//var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var myLatlng = new google.maps.LatLng(18.520430300000000000,73.856743699999920000);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Pune(India)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
initialize();
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
})
Also in my device on the device Location but still I have problem.I got following output on my screen for long time.
Isn't it easier to just use the ngCordova $cordovaGeoLocationPlugin ? You can get the position from this plugin ( latitude and longitude) and then pass this in GoogleAPI. I think it will be lot easier that way.
ngCordova geoLocationPlugin
Just a suggestion.
This example works perfect in case you start the app with GPS on. But starting with GPS off in you device, and after that, entering in the app and selecting GPS on, the function returns always GPS timeout ERROR = 3. Any solution for that?
I have posted this error here:
When I start the App with GPS off , and later GPS is activated, Location is not detected

phonegap android app for google map geolocatin issue

I am making phonegap android application for geolocation. But it doesn't show google map.My code is as follow. I installed geolocation plugin for cordova. And it run proper upto alert of geocode in below code. I am testing with android mobile.
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript src="http://maps.googleapis.com/maps/api/geocode/xml?sensor=false"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 30000, enableHighAccuracy: true });
}
function onSuccess(position) {
alert("success");
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
ReverseGeocode(latitude,longitude);
}
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function ReverseGeocode(latitude, longitude){
alert("geocode");
var reverseGeocoder = new google.maps.Geocoder();
alert("location");
var currentPosition = new google.maps.LatLng(latitude, longitude);
alert("position");
}
</script>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
Please help.
Thanks.
How to show a Google map in your Phonegap app using Google Map api V3?
Start by adding a reference to Google maps api in index.html:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
Then add a div that will contain the map. Choose an id like “map_canvas”. That id will be used to add our map from our javascript later on.
<div id="map_canvas">
</div>
2. Create a new javascript file called googlemap.js in the www folder and add the following content:
function GoogleMap(){
this.initialize = function(){
var map = showMap();
}
var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}
}
and add a reference to it in index.html
<script type="text/javascript" src="googlemap.js"></script>
the mapOptions variable contains information about zoomlevel, where the center of the map is and what kind of map we want to show.
And the line containing the map variable uses getElementById to get our map_canvas and adding the map.
3. Showing the map
To show the map we must run the initialize function in googlemap.js. Since we are using the example index.html from phonegap we add these lines to the onDeviceReady function in index.html
function onDeviceReady(){
var map = new GoogleMap();
map.initialize();
}
Now run the app and you should se a map over Australia.
4. Adding markers
To add markers to our map we use the LatLng and Marker object from Google API.
Edit the initialize function in googlemap.js to look like this:
function GoogleMap(){
this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
}
and add the following function, called addMarkersToMap:
var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
}
}
5. Zooming out the map to show all markers
To zoom out the map without knowing which zoomlevel to use we are going to use the LatLngBounds object from the Google Map API.
Start off by adding the following line first in the addMarkersToMap function:
var mapBounds = new google.maps.LatLngBounds();
and before the closing tag of the function add these lines:
mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);
map.fitBounds(mapBounds);
The addMarkersToMap function now looks like this:
var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});
var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');
var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);
map.fitBounds(mapBounds);
}
Now we’re done, run the app and the map now zooms out so you can see the marker which we added in Sweden.

Not able to get the geolocation in Android emulator

I'm doing a small sample app which displays latitude and longitude in a popup when i click on the button
here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BlankCordovaApp1</title>
<link href="css/index.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
<script type="text/javascript" charset="utf-8">
var alertmsg = function (position) {
var msg = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />'
navigator.notification.alert(msg);
}
function geoLocation() {
navigator.geolocation.getCurrentPosition(alertmsg)
}
</script>
</head>
<body>
<input type="button" id="btnClick" onclick="geoLocation()" value="click" />
</body>
</html>
It is working in Ripple emulator
But it is not working in Android emulator and Genymotion
I figured out the problem.
If i use this code it is working fine
navigator.geolocation.getCurrentPosition(alertmsg, onError, { timeout: 30000, enableHighAccuracy: true });
It is working in all emulators(Ripple,Android,Genymotion)
I'm using Visual Studio 13 with a Backbone based smartphone app and this was a pain. Adding the timeout option and enableHighAccuracy always throws the onError handler, without these neither return.
So this is a good answer:
//Android Emulator safe version
function getGpsCordinates(callback) {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
//Success
function (position) {
console.log("GPS: Success");
callback(position);
},
//Error
function (error) {
console.log("GPS: Error");
var position = {
coords: {
longitude: 0,
latitude: 0,
speed: 0
}
};
callback(position);
},
{ timeout: 7000, enableHighAccuracy: true });
} else {
var position = {
coords: {
longitude: 0,
latitude: 0,
speed: 0
}
};
console.log("GPS: Not Supported");
callback(position);
}
console.log("GPS: Continued");
}
getGpsCordinates(function(mycallback) {
alert(mycallback.coords.latitude);
});
Code Pen Version

HTML5 geolocation app for Android using phonegap eclipse

I am having trouble to get this HTML5 geolocation app for Android running. The app works fine in Firefox browser from my desktop, but once I compile it using Eclipse - PhoneGap, the geolocation button does not perform the command document.write, I have tried with alert(), as well as console.log(), but there is no positive result.
The code is below, can you please point to me if I am missing setting up any of the phone sensors for geolocation?
Below is the code:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
document.write('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
document.write(' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
document.write('We did not get your location. You are safe from big broda');
}
});
</script>
</headd>
<body>
<button id="startGeo"> Click here for geolocation </button>
</body>
</html>
document.write seems to be the cause of your problem, rather than a failure in geolocation, assuming of course you have adequate permissions in your AndroidManifest.xml:
<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 this:
<html>
<head>
<meta charset="UTF-8">
<title> Geolocation Test </title>
<script src="js/jquery-1.9.1.min.js"></script>
<script> // Begginning of Google Maps script
window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#219000000"],[["http://khm0.googleapis.com/kh?v=131\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=131\u0026hl=en-US\u0026"],null,null,null,1,"131"],[["http://mt0.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,"imgtp=png32\u0026",null,"h#219000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#219000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#219000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=77\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=77\u0026hl=en-US\u0026"],null,null,null,null,"77"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5","3.13.5"],[2518365001],1.0,null,null,null,null,1,"",["places"],null,0,"http://khm.googleapis.com/mz?v=131\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/5/%7Bmain,places%7D.js");
})();
</script> / End of Google Maps script
<script> // Script that runs the app
$(document).ready(function() {
$('#startGeo').click(checkLocation);
function checkLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(getLocation, locationFail);
}
else {
$('#result').append('You dont have geolocation');
}
} // ends checkLocation()
function getLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('#result').append("location: "+' latitude: ' + latitude + ' longitude: ' + longitude + ' accuracy: ' + accuracy + ' timestamp: ' + timestamp);
}
function locationFail() {
$('#result').append('We did not get your location. You are safe from big broda');
}
});
</script>
</head>
<body>
<button id="startGeo"> Click here for geolocation </button>
<div id="result"></div>
</body>
BTW, there's a typo in your source code </headd> should be </head>.
You should also really use $(document).on("deviceready") instead of $(document).ready() with Phonegap as 'ready' event only indicates DOM is ready whereas 'deviceready' indicates Phonegap has fully loaded.

Categories

Resources