In the following code i am trying to get the GPS location from the phonegap example.Iam trying this on the actual device and not on the emulator i get a time out every time.I never got the on success alert.What am i doing wrong.i have enable GPS and internet
JS
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// Cordova is ready
//
function onDeviceReady() {
// Throw an error if no update is received every 30 seconds
var options = { timeout: 30000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
html
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"> </script>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body >
<h1>Hello World</h1>
<p id="geolocation">Finding geolocation...</p>
</body>
</html>
try with this options:
var options = { timeout: 30000, enableHighAccuracy: true };
Related
I'm using watchPosition on a small application and I'm using both high accuracy positioning (GPS) and Coarse Positioning (Network based) to limit battery consumption.
To enable coarse positioning, I use following command :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });`
and To enable Fine Positioning :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
To reset watching, I using clearWatch :
navigator.geolocation.clearWatch(watchID);
Strange thing is that after enabling Fine positioning, I cannot switch back to coarse positioning (GPS icon on android is still on).
for example :
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is off which is OK
navigator.geolocation.clearWatch(watchID); //GPS icon still off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true }); // GPS icon become on (which is OK)
navigator.geolocation.clearWatch(watchID); //GPS icon become off (OK)
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false }); // GPS icon is on which is **NOT OK**
I'm using Android 5.1.1.
Full example code :
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", WatchCoarse, false);
var watchID = null;
// device APIs are available
//
function WatchCoarse() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: false };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: false });
}
function WatchFine() {
// Get the most accurate position updates available on the
// device.
var options = { enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
}
// clear the watch that was started earlier
//
function clearWatch() {
if (watchID != null) {
navigator.geolocation.clearWatch(watchID);
watchID = null;
}
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p>
<button onclick="clearWatch();">Clear Watch</button>
<button onclick="WatchCoarse();">Watch Coarse</button>
<button onclick="WatchFine()">Watch Fine</button>
</body>
</html>
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
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { alert('onDeviceReady Function works');
var option = {frequency:500,maximumAge: 0, timeout: 1000, enableHighAccuracy:true};
navigator.geolocation.getCurrentPosition(onSuccess, onError, option );
}
function onSuccess(position) { alert("It Works!!!");
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude;
}
function onError(error) {
//alert(error);
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
</script>
<p id="geolocation">Finding geolocation...</p>
Above code deviceready() function is working fine but alert("It Works!!!"); not working. Please tell me why it is not working in my device emulator?
I am getting error message.
Screenshot:
Increase timeout to '5000' or '10000' and also increase maximumAge
{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
Check the PhoneGap Error documentation .
I want to scan barcode from my android mobile,I am using PhoneGap for that,my Issue is I want to scan barcode on click event of button,below Code Work perfectly for me but when i use this on button click it want works
<body>
<div class="app">
<h1>DevExpress DevExtreme JS HTML</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
},
receivedEvent: function (id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
But This Code Don't Works
<script type="text/javascript">
function scanCode(){
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(
function(result){
document.getElementById("data").value= result.text;
},
function(error){
alert("Scan failed: " + error);
}
);
}
</script>
</head>
<body>
<h3>Barcode/QR Code Scanner And Encoder</h3>
<input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>
Data : <br/>
<input type="text" name="data" id="data" /><br/><br/>
</body>
Plese Help
Create a globally scoped variable for scanner, then in document ready keep the line that assigns this to the cordova.require, then in your button event call scanner.scan
Example:
<body>
<div class="app">
<h3>Barcode/QR Code Scanner And Encoder</h3>
<input type="button" value="Scan Code" onclick="scanCode();"/><br/><br/>
Data : <br/>
<input type="text" name="data" id="data" /><br/><br/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script type="text/javascript">
var scanner = null;
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function () {
app.receivedEvent('deviceready');
scanner = cordova.require("cordova/plugin/BarcodeScanner");
cordova.require("com.phonegap.plugins.barcodescanner.BarcodeScanner");
},
receivedEvent: function (id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
function scanCode(){
scanner.scan(
function(result){
document.getElementById("data").value= result.text;
},
function(error){
alert("Scan failed: " + error);
}
);
}
</script>
<script type="text/javascript">
app.initialize();
</script>
</body>
I am Designing a mobile app on phonegap. In this I am trying to get curent location of user. But I am not getting the map on Andriod Emulator.
I used this code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap Map</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{alert("error"),"enableHighAccuracy":true,"timeout":3000});
}
//GEOLOCATION
var onSuccess = function(position) {
alert("Latitude: " + position.coords.latitude + "\n" +
"Longitude:" + position.coords.longitude + "\n");
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert("code: " + error.code + "\n" +
"message: " + error.message + "\n");
}
</script>
</head>
<body onload="onLoad()">
<div>map</div>
<div id="map_canvas" style="width:100px; height: 100px;" ></div>
</body>
</html>
I don't know where I am gng wrong.Can any one please help me on this?
Check this code... change cordova-1.8.1.js into ur cordova2.0.js... remaining source is refer thro online. If its not works. then there problem in ur phonegap configuration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset ="utf-8" src="cordova-1.8.1.js"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>