I am developing pdf417 barcodescanner application using phonegap android. I used this . I do even upgraded cordova version to 4.1.2 using nodejs. I have given permission and features in manifest and config.xml also. But when I run this application I am getting error ' Uncaught ReferenceError: scanWithCustomUIButton is not defined'. Can you tell me where I am doing wrong
config.xml
<feature name="Pdf417Scanner">
<param name="android-package" value="com.phonegap.plugins.pdf417.Pdf417Scanner"/>
</feature>
<plugins>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Pdf417Scanner" value="com.phonegap.plugins.pdf417.Pdf417Scanner"/>
</plugins>
manifest.xml
<activity
android:name="mobi.pdf417.activity.Pdf417ScanActivity"
android:theme="#android:style/Theme.Black.NoTitleBar.Fullscreen"
android:screenOrientation="portrait" >
<intent-filter>
<action android:name="mobi.pdf417.activity.Pdf417ScanActivity" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
this is my index.html and is my index.js
You can use this cordova plugin. It's 100% working.
http://docs.scandit.com/group__scanditsdk-cordova-guides.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Scandit SDK</title>
</head>
<body onload="onBodyLoad()" style="background: url(img/ScanditSDKDemo-Splash.png) no-repeat;background-size: 100%;background-color: #000000">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function success(resultArray) {
alert("Scanned " + resultArray[0] + " code: " + resultArray[1]);
// NOTE: Scandit SDK Phonegap Plugin Versions 1.* for iOS report
// the scanning result as a concatenated string.
// Starting with version 2.0.0, the Scandit SDK Phonegap
// Plugin for iOS reports the result as an array
// identical to the way the Scandit SDK plugin for Android reports results.
// If you are running the Scandit SDK Phonegap Plugin Version 1.* for iOS,
// use the following approach to generate a result array from the string result returned:
// resultArray = result.split("|");
}
function failure(error) {
alert("Failed: " + error);
}
function scan() {
// See below for all available options.
cordova.exec(success, failure, "ScanditSDK", "scan",
["ENTER YOUR APP KEY HERE",
{"beep": true,
"1DScanning" : true,
"2DScanning" : true}]);
}
app.initialize();
</script>
<div align="center" valign="center">
<input type="button" value="scan" onclick="scan()" style="margin-top: 230px; width: 100px; height: 30px; font-size: 1em"/>
</div>
</body>
Related
Since using Cordova version 6, I have a siginificant problems using a Iframe. The Iframe-URL, I'm calling works fine in each browser, also in cordova-app on emulator. But on real devices, I have a really big problem using this Iframe.
What I'm doing:
Connecting to Qlik Sense Server (Qlik is a Business Intelligence Software) via Single API, using a link like this:
https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug
Beacause, I'm not logged in yet, I will be automatically routet to this authentication site:
https://my-server.com:4244/form/?targetId=a0553562-06f5-4c5b-b4ba-69b6859d0cef
After logging in successfully, the URL turns back to the Single-API URL, extended with a qlikTicket for the session.
https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug&qlikTicket=S_SPh6fvNkTecbz9
So what's my real problem? Since using the latest Cordova version 6, the redirection from authentication to the origin Single-URL crashes. The session is enabled for less than a second and then turns me back to authentication site.
This problem only occurs on real Android devices. Using the this link in browser, works. Using Iframe in browser, works. Trying out the cordova application on Android emulator, everything works fine! Trying out the cordova application on real Android devices, doesn't work!
What's going wrong?
Does have cordova any problems holding the qlikTicket in URL? Because I'm directly redirected to authentication site.
I know that there is a new security model since cordova 5. So I've implemented the cordova-whitelist-plugin and granted all access to intents, navigation and acces, as you can see here in my config.xml:
<widget id="de.inform.feliosmobile4" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>FELIOSMobile</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<icon src="res/icon.png" platform="android" width="57" height="57" density="mdpi" />
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.3.0" />
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
This is what my index.html looks like(Iframe is build at the end of code):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://*/*">
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<title>BeaconRanging</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<!-- MONTAGE -->
<div class="popup" id="popupMONTAGE">
<center>
<div class="btnMachineGroup">Bitte Maschine wählen:</div>
<br />
<button class="btnMachineGroup" onclick="setRessource(421,'MONTAGE')">Montage Metall WA</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(423,'MONTAGE')">Montage Metall AGW</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(422,'MONTAGE')">Montage Metall GBK</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(427,'MONTAGE')">Montage Spezialbohrkopf</button>
<br />
<button class="btnMachineGroup" onclick="setRessource(824,'MONTAGE')">Montage Service Metall</button>
<br />
<br />
<button class="btnMachineGroup" onclick="hidePopup('MONTAGE')">Schliessen</button>
</center>
</div>
<br /><br />
<div class="container">
<iframe id="qlikframe" src="https://my-server.com/single/?appid=bba3d39c-4570-4056-8d49-5b64405647d8&sheet=kwZkH&select=clearall&opt=debug"></iframe>
</div>
</body>
</html>
So does anybody have an idea what is happening here and why? I've already contacted Qlik support. There is no problem from Qlik side.
... Using cordova version 4, all ran perfectly and I had no problems. Building the same code in cordova 6, the app doesn't run as it should.
What you can find in LOG-file from the Cordova-App is the following:
11-07 13:40:39.855 13009 13009 I chromium: [INFO:CONSOLE(44)] "TypeError: Cannot redefine property: qlikTicket
So it seems, that the additional auth-info in URL (qlikTicket) gets lost. How to prevent this?
I am just about two month in phonegap leason. I have been testing the app in the google ripple emulator, and everything is working great with the google map.
However, when I upload this project into phonegap build, and install it into my Android Device, the google map doesn't show up.
Here is my index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link href="css/all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
window._cordovaNative = true;
</script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
//navigator.geolocation.getCurrentPosition(onSuccess, onError);
var map = new GoogleMaped();
map.initialize();
}
function GoogleMaped()
{
this.initialize = function(){
var map = showMap();
}
var showMap = function(){
var mapOptions =
{
zoom: 4,
center: new google.maps.LatLng(55.689403, 12.521281),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
return map;
}
}
$(document).ready(function(){
alert("hi al");
});
</script>
</head>
<body>
<div id="phonegapWrapper" style="">
<div id="map_canvas">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
And here is my config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.empatix.app"
versionCode = "10"
version = "1.0.0" >
<plugin name="cordova-plugin-whitelist" />
<plugin name="com.indigoway.cordova.whitelist.whitelistplugin" spec="1.1.1" source="pgb" />
<!-- versionCode is optional and Android only -->
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
<access origin="*"/>
<access origin="http://google.com" />
<access origin="https://google.com" />
<access origin="http://maps.google.com" />
<access origin="http://maps.google.com/*" />
<access origin="http://*.google.com" />
<access origin="http://dev.hospitalku.com/*" />
<access origin="http://code.jquery.com/*" />
<access origin="https://maxcdn.bootstrapcdn.com/*" />
<access origin="https://maxcdn.bootstrapcdn.com/*" />
<access origin="*" />
<access origin="*.google.com"/>
<access origin="*.googleapis.com"/>
<access origin="*.gstatic.com"/>
<allow-navigation href="*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-intent href="geo:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="*" />
<name>Empatix App</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://dev.hospital.com" email="al_kasih#outlook.com">
Hardeep Shoker
</author>
<access origin="http://phonegap.com" subdomains="true" />
</widget>
The only console message I got in the phonegap debug service is:
No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.
Can anybody help me out with this, please?
Many thanks in advance.
You have to add this line in your index.html (head section):
<meta http-equiv="Content-Security-Policy" content="default-src ...">
For detailed explanation check this docs:
https://github.com/apache/cordova-plugin-whitelist#content-security-policy
A post here on SO: "No Content-Security-Policy meta tag found." error in my phonegap application
I made an Android application which uses this Cordova plugin for Google Maps. It's another sort of solution alternative, but it worked for me, so, you can try it out. I prefer to this approach because the plugin uses native code, theferore, the performance will be nicer and faster. Moreover, It has an excellent documentation; Cordova and Phonegap is the same pretty much. If you use the plugin, you will avoid adding those entries on config.xml with accesses tag as to GMaps, it will be cleaner.
Installation
phonegap plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="ANDROID_API_KEY" --variable API_KEY_FOR_IOS="IOS_API_KEY"
If you have doubts with Phonegap CLI, read this link.
Setting
Html:
<div id="map" style="width:100%;height:100%"></div>
Javascript:
var map = plugin.google.maps.Map.getMap(document.getElementById("map"));
map.one(plugin.google.maps.event.MAP_READY, function () {
var DEFAULT_MAP_TYPE = plugin.google.maps.MapTypeId.HYBRID
map.setMapTypeId(DEFAULT_MAP_TYPE);
});
Important: You must sign the application prior to run it, the SHA1 hash must match with the registered one in Google Maps API for Android. However, if you use iOS, this is not required.
You should add the deviceready listener after the document is ready:
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, true);
});
function onDeviceReady() {
alert ('123');
}
Try adding whitelisting the url by adding this inside the head section
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ https://maps.google.com/maps/api/js 'unsafe-inline' 'unsafe-eval'">
find this index.html for implementing the same functionality
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'">
<style>
body, html, #map { margin: 0;width:100%;height:400px }
#map {
position: relative;
width:400px;
height: :50%;
}
#map:after {
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(55.689403, 12.521281),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I would like to know how can I open an url in the app context of embed webview. Currently this demo will open a new tab in external browser, so, not what I am expected. I am using google.com just for testing.
Summary, I am looking for a functional demo.
<?xml version="1.0" encoding="UTF-8"?>
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
xmlns:android = "http://schemas.android.com/apk/res/android"
id = "com.xxx.xxxxx"
version = "1.0.0">
<preference name="stay-in-webview" value="true" />
<access origin="*" browserOnly="true" subdomains="true" />
<content src="index.html" />
<allow-navigation href="https://google.com/*" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<preference name="phonegap-version" value="cli-5.4.1" />
<preference name="permissions" value="none"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
</widget>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<div>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location.href = 'https://google.com';
}
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Update:
Complete xml file:
https://codeshare.io/Vw3Fl
try :
window.open('https://google.com', '_self ', 'location=yes');
instead of :
window.location.href = 'https://google.com';
This will use the InAppBrowser, and use _self as target.
You have to add this line on the config.xml to allow navigation to external urls
<allow-navigation href="*" />
This will allow navigation to any external url, if you just want to allow the navigation to google then add this line
<allow-navigation href="https://google.com" />
You can check the rest of the documentation on the plugin page
https://github.com/apache/cordova-plugin-whitelist
For those having this problem while using Phonegap 6.3.1, you should whitelist the urls properly and use the cordova-plugin-inappbrowser plugin.
Read on for how to do this.
First, ensure you have whitelisted the urls you want to open. You do this by adding them to the hrefs of <access> tags, <allow-intent> tags and allow-navigation tags in your config.xml file at the root of the project. Something liek th:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
...
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
...
</widget>
(Note: the "*" in the above hrefs allows the opening of any url/path. In production, you probably want to restrict to certain urls/paths)
Next, in your index.html file, add the following javascript:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
var url = 'https://www.google.com' // change to whatever you want
cordova.InAppBrowser.open(url, '_self', 'location=no');
}, false)
</script>
This script uses the cordova-plugin-inappbrowser plugin, which, if you generated your application using the standard Phonegap template, should already be included in your config.xml file.
The script waits for the device to be ready, then uses the cordova-plugin-inappbrowser plugin to open the given url. The '_self' parameter means it opens the page in the Phonegap webview and the 'location=no' means that there will be no address bar. For other parameter options see the documentation for the cordova-plugin-inappbrowser plugin (link above).
Finally, to test the application in the appropriate emulators (assuming you have the Phonegap CLI installed), run the following command(s):
phonegap run ios --verbose --stack-trace
phonegap run android --verbose --stack-trace
You may have to add the following to your phonegap xml file:
<?xml version="1.0" encoding="UTF-8"?>
<phonegap>
<access origin="https://abcx.com" subdomains="true" />
</phonegap>
A very simple way to open page in system browser in a phonegap application is by rendering that page in an iframe.
<iframe src="http://www.google.com></iframe>
You can change the URL in the iframe using dom update.
This will load in the page in the native system browser.
install the following plugin by typing these commands in your project directory
phonegap plugin add cordova-plugin-whitelist
phonegap prepare
then add the following following tags in index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
*{
margin: 0px;
padding: 0px;
} body {width:100%;height:100%;margin:0;overflow:hidden;background-
color:#252525;}
#my_iframe{
border: 0px;
height: 100vh;
width: 100%;
}
</style>
<title>ProjectName</title>
</head>
<body>
<iframe src="PUT_HERE_YOUR_PROJECT_URL" id="my_iframe" frameborder="0" width="100%" height="100%" >
</iframe>
</body>
</html>
Sorry I'm new in Cordova application creation.
I installed everything needed in order to develop a Mobile application with Cordova.
Cordova create notification
cd notification
cordova platform add android
cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications.git
cordova plugin ls
Result :
C:\LAB\Cordova\notification>cordova plugin ls
[ 'de.appplant.cordova.plugin.local-notification',
'org.apache.cordova.device' ]
Everything is fine at this time.
I follow the github readme file : https://github.com/katzer/cordova-plugin-local-notifications/blob/master/README.md
*PhoneGap Build
Add the following xml to your config.xml to always use the latest version of this plugin:
<gap:plugin name="de.appplant.cordova.plugin.local-notification" />*
then I add it in my config.xml :
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<gap:plugin name="de.appplant.cordova.plugin.local-notification" />
</widget>
Then I add in the index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" onclick="window.plugin.notification.local.add({ message: 'Great app!' });">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="local-notification.js"></script>
<script type="text/javascript">]
window.plugin.notification.local.add({ message: 'Great app!' });
</script>
</body>
I encounter this error when I launch a : Cordova build android
BUILD FAILED
C:\ANDROID\android-sdk-windows\sdk\tools\ant\build.xml:653: The following error
occurred while executing this line:
C:\ANDROID\android-sdk-windows\sdk\tools\ant\build.xml:698: null returned: 1
Total time: 10 seconds
Error code 1 for command: cmd with args: /s,/c,ant,debug,-f,C:\LAB\Cordova\n
otification\platforms\android\build.xml,-Dout.dir=ant-build,-Dgen.absolute.dir=a
nt-gen
Error: cmd: Command failed with exit code 2
at ChildProcess.whenDone (C:\Users\Admin\AppData\Roaming\npm\node_module
s\cordova\src\superspawn.js:112:23)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:743:16)
at Process.ChildProcess._handle.onexit (child_process.js:810:5)
C:\LAB\Cordova\notification>cordova plugin ls
[ 'de.appplant.cordova.plugin.local-notification',
'org.apache.cordova.device' ]
Would someone explain to me how to properly implement a plugin in a working basic Cordova application ?
Thank you.
R
I created Adroid app in which I want to check the location of the mobile phone. I started the emulator install the app and every time I want to check It fails. Is the emulator the problem (bacause it os not a real mobile phone) or I did not do it correctly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script text="text/javascript">
function startUp(){
document.getElementById("H1").innerHTML = "Checking your location...";
document.addEventListener("deviceready", onDeviceReady, false)
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('location');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />';
document.getElementById("H1").innerHTML = "";
}
// onError Callback receives a PositionError object
//
function onError(error) {
document.getElementById("H1").innerHTML = "Fail to check your location.";
}
</script>
</head>
<body style="margin:0px;" onload="startUp()" bgcolor="#000">
<div class="app" style="background-color:#4D4D4D">
<font color="#FF9900" size="2"><h1 id="H1" style="font-family:courier new;"></h1></font>
<p id="location"></p>
</div>
</body>
</html>
The HTML5 file and config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.park.manager"
versionCode="10"
version = "0.1.9">
<name>ParkingManager</name>
<description>
A system, which manages parking side areas.
</description>
<author href="" email="">
Parking Side Manager Team
</author>
<preference name="phonegap-version" value="2.1.0" />
<preference name="orientation" value="landscape" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />
<preference name="android-installLocation" value="auto" />
<icon src="icon.png" />
<gap:splash src="splash.png" />
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/network"/>
</widget>
make sure that in your manifest XML you add the permissions for coarse and fine location.
phone gap has its upsides, but it will not fix some of your main problems like having to do the manifest by hand. If you made your app in java before you know how to add these permissions. if not use to check how to do it.permissions
besides that your cordova geolaction call is right, I have used it before from their examples.
The last time I worked with PhoneGap the manifest already had the correct permissions in the manifest file.
You most likely need to provide mock data for the emulator.
http://developer.android.com/guide/topics/location/strategies.html#MockData
its the emulator, you need a real phone because the emulator is a pain in the you know what to get to work correctly. your Javascript and html are fine.