To build a mobile web application you will need a place online to host it - it can be with any hosting provider.
Start out by downloading the gap project and moving the gap.js file into your project, don't forget to add it to your markup.
<script src="gap.js" type="application/x-javascript"></script>
On the body tag add a onload method to call some code.
<body onload="initGap();">...
This is only needed for the page / pages that will make native calls to the device, so not every page needs this.
<script>
initGap = function() {
Device.init();
Device.Location.callback = updateLocation;
}
updateLocation = function(lat,lon) {
}
</script>
Device.init() checks to see if there is a device available and gets the OS, Version etc.
Device.Location.callback = updateLocation; is the function that will be called in your code when you ask for the location.
<script>
initGap = function() {
Device.init();
Device.Location.callback = updateLocation;
}
updateLocation = function(lat,lon) {
document.getElementById('lat').innerHTML = lat;
document.getElementById('lon').innerHTML = lon;
}
</script>
So when the location is requested, we will insert it some place in the DOM where the id is 'lat' and 'lon'.
The last thing we need is some code to fire to get the updated location.
<a href="#" onclick="Device.Location.init();" >Click here to get the location.</a>
(Note: You could also have a function that would get the location at a regular interval using setInterval(), so you don't have to get the user's input to get the location )
Comments (8)
Bruce Denton said
at 8:13 pm on Jan 28, 2009
I am not interested in building an application that has to be downloaded from anyone's “store”, however I would like to be able to access the gps/location features of the iPhone, Blackberry (and others eventually). Can this be done with PhoneGAP without being encased in an application (i.e. a web page that detects the device it is running on)? I can detect the device I just need to get the current longitude and latitude of the device. I have done some very basic testing coding by calling gap.js, but only get “GAP is not supported.”
robin said
at 11:59 pm on Jan 28, 2009
Bruce currently all phones's security settings are such that only resident applications can access GPS, contacts lists etc. The idea of phonegap is allow programmers to use web technology to access these features by wrapping them in an application - and the same JS code can be used across different handsets. gap.js is very specific to phonegap but its works the same way on every phonegap supported handset. There are/will be JS commands to do these sort of things for each device with resident apps - however, its the nature of the industry that these commands are different on each device - although at least 2 manufacturers will be using Gears.
Jonathan Stark said
at 4:15 pm on Mar 17, 2009
I just can't get over how awesome this is. Kudos! Once I have my head around it I'll be pitching in...
Jason Stiebs said
at 6:52 pm on Mar 25, 2009
How about allowing the developer to host the files on as a resource file. That way the user can still use the app even if the web connection is broke.
Arun Yadav said
at 10:02 am on Mar 31, 2009
Hi, I would really appreciate if someone could tell me from where could I download this project???
Dominik said
at 5:29 pm on May 12, 2009
Hi there,
I'm getting the same problem as Bruce above that the gap.js that i include on a html page and run on my webserver is throwing "GAP is not supported."
Does anybody know what robins response of "only resident applications can access GPS, contacts lists etc" means? How can I get gps data from the iphone on my web app?
Thanks
Dominik
Dominik said
at 1:13 pm on May 14, 2009
To answer my question with a thread that i opened on the phonegap group :
http://groups.google.com/group/phonegap/browse_thread/thread/401af5b5d5e5e49e
Thanks
Dominik
Mihai Radulescu said
at 12:54 am on May 29, 2009
Hi, I just download the last version but I don't find any gap.js file, I only have a phonegap.js, if this the right file ? I mean this is the script file which I must insert in my web page ?
Thanks
Mihai
You don't have permission to comment on this page.