I am using Cordova 2.0.0 and i am testing on Android 2.2.
So after 2 threads and alot of searching i am finally able get get my geolocation and have it shown in google maps. Now every time i open the app it will get my geolocation and show it in google maps with a marker. Now i want the program to store the data. This is the first time i use html5,JS. When i made a native app i just used the SQLite database.
How would i go on about storing the data?
This is what i have so far, any help tutorials, samples, help and advice would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></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,{'enableHighAccuracy':true,'timeout':10000});
}
//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 id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You can use a simple SQLite database as usual: http://docs.phonegap.com/en/2.0.0/cordova_storage_storage.md.html#Storage
Related
I have created a phonegap app and I added Android platform to it. But unfortunately, deviceready event is not getting fired. It works fine on ripple emulator but it is not working on chrome (desktop) and on the android phone as well.
If I run it on chrome (desktop) or my Android L phone, I get the error gap:
["Device","getDeviceInfo","Device1231860141"]
and the browser as well as NetBeans hangs.
I have the cordova.js file in my www folder. I tried removing it, and the error goes away, but deviceready is still not fired.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320, user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="js/libs/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript">
function init(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
startWatch();
}
// Start watching the acceleration
//
function startWatch() {
// Update acceleration every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the acceleration
//
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body onload="init()">
</body>
</html>
deviceready is a cordova event it will not work in browser.
...
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, true);
function onDeviceReady() {
startWatch();
}
...
</script>
</head>
<body onload="onDeviceReady()">
</body>
</html>
Let me first start by saying that I have seen a lot of these questions, and many of them just says it <script src="cordova-x-x-x.js"></script> and some says not include the cordova.js file into Phonegap Build.
So I have been testing and fixing my code for some time now, and still getting the error from onError function. I have also copied and pasted the code from phonegap docs.
So here's the clean code from the url:
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<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() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
function onError() {
alert('onError!');
}
</script>
</head>
<body>
</body>
</html>
And in my config.xml file I have added:
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
After testing and asking the Phonegap Build crew, they showed me a code with all the functions. And this is the best way to get the accelerometer to work with Phonegap Build
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("Device is Ready");
alert(device.available);
}
function getAcceleration(){
navigator.accelerometer.getCurrentAcceleration(onAccelSuccess, onError);
}
function onAccelSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
function onError() {
alert('onError!');
}
function startWatch() {
// Update acceleration every 1 seconds
var options = { frequency: 1000 };
watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
</script>
</head>
<body onload="onLoad()">
<p>
<button onclick="getAcceleration()">Get Acceleration</button>
</p>
<p>
<button onclick="startWatch()">Watch Acceleration</button>
</p>
<p>
<button onclick="stopWatch()">Stop Watching Acceleration</button>
</p>
<div id="accelerometer">Waiting for accelerometer...</div>
</body>
</html>
I would say you try a total clean reinstall/rebuild with cordova. First off all you have to install cordova for that. If you want to know, how to get started with that you should have a look into the cordova documentation: Cordova CLI-Docs
After you installed cordova, you enter the Terminal and type in the following commands:
cd ~/desktop
cordova create test com.example.test test
cd test
cordova platform add android
cordova plugin add org.apache.cordova.device-motion
cordova build
Open the builded project in Eclipse and add
<!DOCTYPE html>
<html>
<head>
<title>Acceleration 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", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
}
// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
}
// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}
</script>
</head>
<body>
<h1>Example</h1>
<p>getCurrentAcceleration</p>
</body>
</html>
Save all and deploy the project to your device. And let me know, if this worked or not.
Can't comment, so answering instead.
In reference to above comment re "Phonegap and Cordova are similar (Same codebase)"
From http://docs.build.phonegap.com/en_US/3.1.0/introduction_getting_started.md.html:
To do so, simply ensure that the following reference is made in your
index.html
<script src="phonegap.js">
Note that this is interchangeable with
<script src="cordova.js">
I want to make an app which gets my coördinates and shows them in google maps (using phonegap and testing on emulator 2.2). Then stores those coördinates in localstorage. I have never used localstorage before so i am not sure on how to do this. I got the geolocation part working. If anyone could adjust my code or show a tutorial which explains how to save the lat/long that i will retreive as i don't have a lot of experience using web-langauges. It would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></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() {
}
//GEOLOCATION
var onSuccess = function(position) {
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);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLat, myLong),
map: map,
title:"Hello World!"
});
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':10000});
</script>
</head>
<body onload="onLoad()">
<div id="map_canvas" style="width:400px; height: 400px;">
</div>
</body>
</html>
I would suggest you use the SQLite Databases from Android.
You can then store the locations with two fields and access the data with SQL queries.
A nice tutorial is the one from Lars Vogel.
You could also use the Internal Storage from Android. Using a simple file is easy but not as powerful as the sql variant. When the data size increases reading and storing to the file becomes more cumbersome.
I wanna make an app which requires me to get my position and display it on google maps. I used the code from http://wiki.phonegap.com/w/page/16494764/PhoneGap%20Geolocation%20Sample%20Application.
I am developing for Android 2.2 using phonegap 2.0.0. I am using the emulator 2.2.
I have installed everything from Phonegap correctly and i obtained a google Api3 key for the map.
I place the key after: http://maps.google.com/maps/api/staticmap?center=(here i place the key). Now when i start the app i use CMD to send coördinates.
Telnet Localhost 5554, geo fix et cetera. When i start the app it will give an error:
Cant retrieve position Error[object PositionError].
I don't get the error anymore (i added enable HighAccuracy).
But it doesnt show anything either. So i think i did something wrong with the google map or i forgot something.
Could anyone help me? It shows a question mark in the top left corner.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript">
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
if (navigator.userAgent.indexOf('Browzr') > -1) {
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + latitude + ',' + longitude +
"&zoom=14&size=300x400&markers=color:blue|label:S|" + latitude + ',' + longitude;
console.log("imageUrl-" + imageUrl);
$("#map").remove();
$(document.body).append(
$(document.createElement("img")).attr("src", imageUrl).attr('id', 'map')
);
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' + e);
};
navigator.geolocation.getCurrentPosition(imageUrl, fail,{ enableHighAccuracy: true });
}
</script>
</head>
/* enter code here */ function GetCurrentLocation()
{
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
alert('W3C Geolocation API is not available');
}
}
Use this code and set sensor = false on
Hope it will help. Remember that it is not static map.
You will need to import the google java script files into your solution
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
Then can use the code below so to show your location...just substitute your latitude and longitude
var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + latitude + ',' + longitude +
"&zoom=14&size=300x400&markers=color:blue|label:S|" + latitude + ',' + longitude;
console.log("imageUrl-" + imageUrl);
$("#map").remove();
$(document.body).append(
$(document.createElement("img")).attr("src", imageUrl).attr('id', 'map')
);
this is my code:
function onDeviceReady() {
console.log("Device Ready");
startWatch();
};
function startWatch() {
// Update acceleration every 5 seconds
var options = { frequency: 5000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
};
function onSuccess(acceleration){
console.log('Acceleration X: ' + acceleration.x +
'Acceleration Y: ' + acceleration.y +
'Acceleration Z: ' + acceleration.z +
'Timestamp: ' + acceleration.timestamp);
};
function onError(){
console.log("Acceleration Error occured");
};
I test it on 2 Android Phones (Samsung Galaxy Nexus GT-I9250, Android 4.0 and Huawei Ideos X3, Android 2.3.3), from my console outputs I know both only call the Error Callback, but why?
I can't find the cause for this on google, so please help if you have an Idea.
You might have a timing issue.
You should try the following which runs successfully on my HTC Evo or post your whole app:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onDeviceReady() {
console.log("Device Ready");
startWatch();
};
function startWatch() {
// Update acceleration every 5 seconds
var options = { frequency: 5000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, accelerometerError, options);
};
function onSuccess(acceleration){
alert('Acceleration X: ' + acceleration.x +
'Acceleration Y: ' + acceleration.y +
'Acceleration Z: ' + acceleration.z +
'Timestamp: ' + acceleration.timestamp);
};
function accelerometerError(){
alert("Acceleration Error occured");
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
</body>
</html>
Could it be because you are passing in a reference that does not exist to your watchAccelerometer() call?
You are passing in onError, but the name of your handler is accelerometerError
Here is a thought. I have not tested this (my Mobile Dev machine is at home), but it occurs to me that you may need to tell Android devices that you want to use the accelerometer in your Android Manifest.
<uses-feature android:name="android.hardware.sensor.accelerometer" android:required="true" />
Do you have that setting in your manifest XML file?