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.
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>
Just I'm trying to have a min example of Google maps working on Cordova Android.
The code works fine on localhost with Chrome and Firefox, but i can't get it work on the device.
Example code:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type='text/javascript'>
window.addEventListener('deviceready',function(){
var latitud = xx.xxxxxxx;
var longitud = x.xxxxxxxxxxxxxxxx;
success(latitud,longitud);
},true);
function success(latitud,longitud) {
var coords = new google.maps.LatLng(latitud, longitud);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("prova_maps"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
</script>
</head>
<body>
<h1>Google Maps</h1>
<div id='prova_maps' style='height:250px;width:250px;'></div>
</body>
</html>
I have the following error at console that is directly relaunched with that problem, but can't find a solution for that:
https://imageshack.com/i/f3myppp
I have the access tags added in config.xml.
And even try to add
And in index.html
<script type="text/javascript" src="../platform/js/libs/cordova.js"></script>
Try to add this link in the script...tag
google.maps.event.addDomListener(window, 'load', initialize);
I am trying to develop an android application which can play audio files, through Phonegap framework.
Below is the code for that, which is not the index.html, but another HTML page in the project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>A New App Try</title>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
-->
<script src="/android_asset/www/js/corodova.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/MyownTry.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="/android_asset/www/js/jquery-1.10.2.js"></script>
<script src="/android_asset/www/js/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/jquery.mobile.structure-1.3.2.css" />
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
/*
function onDeviceReady() {
playAudio("../assets/files/Roja_Flute.mp3");
}
*/
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
if (!playing) {
my_media.play();
document.getElementById('play').src = "/android_asset/www/img/pause_icon.jpg";
playing = true;
} else {
my_media.pause();
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";
playing = false;
}
}
// Pause audio
//
/* function pauseAudio() {
if (my_media) {
my_media.pause();
}
}*/
// Stop audio
//
function stopAudio() {
my_media.stop();
playing = false;
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<style>
img{
width=30%;
}
</style> </head>
<body>
<br/><br/>
<img id="play" src="/android_asset/www/img/Playicon.png"/>
<!-- <img id="pause"src="/android_asset/www/img/pause_icon.jpg" width="20%"/> -->
<img id="stop" src="/android_asset/www/img/stop_icon.jpg" />
<!-- <p id="audio_position"></p>-->
<br/><br/>
Go back to Home Page
<div data-role="footer">
<p>Copyright 2013 | Mani C | newtolearn.android</p>
</div>
</div>
</body>
</html>
I am expecting icons to be smaller ones, as I have defined in the style element, for 30% of image size. And, I am expecting when I click on the Play icon, the audio file to be played.
Unfortunately both the expected behaviors are not occuring. I am seeing a larger 'Play icon', smaller 'Stop icon' and getting, 'Uncaught Reference Exception: variable playAudio is undefined in index.html'(when in fact, the above HTML code has nothing to do with index.html).
Can somebody, please help and can possibly provide a workaround code..?
Thanks in advance!
Mani
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
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')
);