Html5 Tutorial - Future Technology

Monday 3 December 2012

PhoneGap - geolocation example

Hi friends, I am going to explain you how to retrive longitude and latitude values using gps and display map on the screen using this longitude and latitude values.i named this example as geolocation as we are displaying map on screen using geolocation values.

Step 1 :

Create a new phonegap based android project named geolocation and give package name as com.sree.geolocation.

Step 2 :

Create a javascript file named as geolocation.js

Step 3:

Please go through the code below,we are retriving longitude and latitude values from mobile using gps and googlemaps api.now using the coordinates we are diplaying map and embedding map in a rectangle using width and height.if there is any error function error will be displayed with error code or other wise it will display the success and displays coordinates and map.we are also giving some style features for our map.

var
getCurrentPosition = function() {
var map = document.getElementById('map');
var success = function(pos) {
var text = "<div>Latitude: " + pos.coords.latitude +
"<br/>" + "Longitude: " + pos.coords.longitude + "<br/>" +
"Accuracy: " + pos.coords.accuracy + "m<br/>" + "</div>";
document.getElementById(
'cur_position').innerHTML = text;
console.log(text);
map.style.display =
'block';
var mapwidth = 270; // a mungy compromise between the 2 sizes
var mapheight = 210; // since we can't get w / h dynamically
map.src =
"http://maps.googleapis.com/maps/api/staticmap?center=" +
pos.coords.latitude +
"," + pos.coords.longitude +
"&zoom=14&size=" + mapwidth + "x" + mapheight + "&maptype=roadmap&markers=color:green%7C" +
pos.coords.latitude +
"," + pos.coords.longitude + "&sensor=false";
};
var fail = function(error) {
document.getElementById(
'cur_position').innerHTML = "Error getting geolocation: " + error.code;
console.log(
"Error getting geolocation: code=" + error.code + " message=" + error.message);
};
map.style.display =
'none';
document.getElementById(
'cur_position').innerHTML = "Getting geolocation . . .";
console.log(
"Getting geolocation . . .");
navigator.geolocation.getCurrentPosition(success, fail);
};

Step 4:
  
 If we want to watch the geolocation then we will use the functions below to display live geo location values.

// api-geolocation Watch Position
var
watchID = null;
function
clearWatch() {
if (watchID !== null) {
navigator.geolocation.clearWatch(watchID);
watchID =
null;
document.getElementById(
'cur_position').innerHTML = "";
document.getElementById(
'map').style.display = 'none';
}
}
var
wsuccess = function(pos) {
var map = document.getElementById('map');
document.getElementById(
'cur_position').innerHTML = "Watching geolocation . . .";
map.style.display =
'none';
var text = "<div>Latitude: " + pos.coords.latitude +
" (watching)<br/>" + "Longitude: " + pos.coords.longitude + "<br/>" +
"Accuracy: " + pos.coords.accuracy + "m<br/>" + "</div>";
document.getElementById(
'cur_position').innerHTML = text;
console.log(text);
map.style.display =
'block';
var mapwidth = 270; // a mungy compromise between the 2 sizes
var mapheight = 210; // since we can't get w / h dynamically
map.src =
"http://maps.googleapis.com/maps/api/staticmap?center=" +
pos.coords.latitude +
"," + pos.coords.longitude +
"&zoom=13&size=" + mapwidth + "x" + mapheight + "&maptype=roadmap&markers=color:green%7C" +
pos.coords.latitude +
"," + pos.coords.longitude + "&sensor=false";
};
var
wfail = function(error) {
document.getElementById(
'cur_position').innerHTML = "Error getting geolocation: " + error.code;
console.log(
"Error getting geolocation: code=" + error.code + " message=" + error.message);
};
var
toggleWatchPosition = function() {
if (watchID) {
console.log(
"Stopped watching position");
clearWatch();
// sets watchID = null;
}
else {
document.getElementById(
'map').style.display = 'none';
document.getElementById(
'cur_position').innerHTML = "Watching geolocation . . .";
console.log(
"Watching geolocation . . .");
var options = { frequency: 3000, maximumAge: 5000, timeout: 5000, enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(wsuccess, wfail, options);
}
};

Step 4:

now we are going to call all the above methods using index.html

edit index.html as below.

<!
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>Minimal AppLaud App</title>
<link rel="styleSheet" href="index.css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<h2>Geolocation</h2>
<blockquote>
<p>The <code>geolocation</code> object provides access to the device's GPS sensor.</p>
</blockquote>
<h4 class="help"><b>Toggle</b> to stop/start
geolocation watch.
<br/><b>Get Current</b> for one-time geolocation reading.</h4>
<a class="btn deux" onclick="toggleWatchPosition();">Toggle</a>
<a class="btn deux" onclick="getCurrentPosition();">Get Current</a>
<div class="result-block">
<span id="cur_position"></span>
</div>
<img id="map" alt="Location Map"/>
</div>
</div>
<
script src="geolocation.js"></script>
</body>
</
html>


Step 5:

Now add index.css file for our user interface look good.

body
{
background-color: #F6F4F2;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.1em;
margin: 0px;
}
h1,ul,li
{
margin: 0px;
padding: 0px;
}
#header
{
background-color: #515151;
background: #515151
-webkit-gradient(linear, left top, left bottom, color-stop(0.2, #515151),
color-stop(0.8, #302F2D) );
border-top: 1px solid #919192;
height: 32px;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
#subheader
{ display: none; }
#footer
{
display: none;
background-color: #515151;
background: #515151
-webkit-gradient(linear, left bottom, left top, color-stop(0.2, #515151),
color-stop(0.8, #302F2D) );
border-top: 1px solid #919192;
height: 32px;
position: fixed;
bottom: 0px;
width: 100%;
z-index: 1;
}
#sidebar
{
background-color: #ECEAE7;
overflow: auto;
padding: 30px 2% 20px 0px;
text-align: right;
/* position: fixed; */
float: left;
width: 22%;
top: 33px;
bottom: 0px;
z-index: 1;
border-right: 1px solid #999;
}
#sidebar
ul,#sidebar li {
margin: 0px;
padding: 0px;
}
#sidebar
li, #sidebar li a {
color: #767573;
font-size: 1.06em;
list-style: none;
margin: 1.05em 0px;
}
#scrollable
{
/* position: fixed; */
padding: 20px 2% 0px 1%;
float: right;
width: 72%;
overflow: auto;
top: 33px;
}
#content
{
margin: 20px 2% 0px;
color: #313131;
/* position:absolute;*/
/* overflow:auto;*/
z-index: 0;
}
#header
h1, #footer h1 {
color: #F6F4F2;
font-size: 1.2em;
font-weight: normal;
line-height: 32px;
margin: 0px;
text-align: center;
text-shadow: 0px -1px 1px #222222;
}
#footer
h1 {
font-size: .9em;
text-align: left;
padding-left: 16px;
}
#content
h2 {
border-bottom: 1px solid #ccc;
padding-bottom: 0.25em;
color: #e87a12;
font-size: 1.4em;
font-weight: bold;
margin: 1.3em 0px 0.8em 0px;
text-shadow: #FFFFFF 0px 1px 1px;
}
code
{
font-weight: bold;
font-size: 1.0em;
color: #bc6108;
}
blockquote
{
color: #767573;
font-style: normal;
margin-left: 30px;
margin-right: 10px;
padding-left: 6px;
position: relative;
text-shadow: #FFFFFF 0px 1px 0px;
}
blockquote
p {
padding: 5px 0px;
font-size: 0.8em;
}
blockquote
::before {
font-style: normal;
content: '\201C';
font-size: 400%;
font-family: Georgia, Palatino, 'Times New Roman', Times;;
position: absolute;
left: -25px;
top: 0.2em;
color: #E0E0E0;
}
ul
{
margin-left: 40px;
}
ul
>li {
list-style: disc;
list-style-position: outside;
}
ul
ul {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
a
.btn {
border: 1px solid #555;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align:center;
display:block;
/* float:left; */
clear: both;
background:#eceae7;
width:90%;
color:#e87a12;
font-size:1.1em;
font-weight: bold;
text-decoration:none;
padding:0.7em 0.1em;
margin: 5px auto;
}
a
.btn.deux {
clear: none;
float:left;
width: 45%;
margin:6px 3px 3px;
}
a
.btn.trois {
clear: none;
float:left;
width: 30%;
margin:6px 2px 3px;
}
#deviceinfo
{
border-collapse:collapse;
width:75%;
margin: 20px auto;
}
#deviceinfo
tr th.alt, #deviceinfo tr td.alt {
text-align:left;
}
#deviceinfo
, th, td {
border: 1px solid #ccc;
}
#deviceinfo
th {
font-size:1.15em;
padding-top:4px;
padding-bottom:4px;
background-color:#e89442;
color:#f0f0f0;
height: 1.3em;
}
#deviceinfo
td, #deviceinfo th {
padding:3px 7px 2px 7px;
vertical-align:bottom;
text-align:right;
}
.result-block
{
clear: both;
margin-top: 0.3em;
}
#accel-data
{
margin-bottom: 15px;
width: 95%;
}
dl
{
clear:both;
list-style-type:none;
padding-left:2px;
overflow:auto;
}
dl
> dt{
float:left;
margin-top: 15px;
margin-left:5px;
}
dl
> dd{
float:left;
font-weight:bold;
margin-top: 15px;
margin-left: 10px;
margin-right: 25px;
}
.api-div
{
display: none;
margin-bottom: 0.6em;
}
.api-div
h4 {
display: block;
font-size: 0.8em;
font-weight: normal;
background: #eceae7;
border-left: 6px solid #de2c2c;
padding: 5px 8px;
}
.api-div
.help {
border-left: 6px solid #188f8f;
}
#cameraImage
{
border: 2px solid #666;
display: none;
margin: 1.7em auto;
width:200px;
height:150px;
}
#eventOutput
{
height:1.5em;
display: block;
}
#map
{
width: 180px;
height: 140px;
border: 2px solid #666;
display: none;
margin: 1.0em auto;
}
@media
screen and (max-width: 320px) and (orientation:portrait) {
/* #header h1 { color: #f00; } For TESTING */
#sidebar { display: none; }
#scrollable {
padding: 0px;
margin: 64px 1% 0px 1%;
float: left;
width: 97%;
overflow: auto;
}
#subheader {
display: block;
background-color: #CBCBCB;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #F9F9F9),color-stop(1.0, #CBCBCB) );
border-top: 1px solid #383A3C;
border-bottom: 1px solid #919395;
height: 42px;
left: 0px;
position: fixed;
top: 33px;
width: 100%;
z-index: 1;
text-align:center;
}
select {
font-size: 1.65em;
font-weight: bold;
padding: 5px 16px 5px 20px;
color: #444;
background-color: #e8a35f;
margin: 3px auto;
}
#deviceinfo {
width:90%;
}
}
@media
all and (min-width: 800px){
/* #header h1 { color: #0f0; } FOR TESTING */
#content {
font-size: 1.0em;
line-height: 1.2em;
}
#content h2 {
padding-bottom: 0.4em;
font-size: 2em;
margin-top: 2em;
}
blockquote {
margin-top: 20px;
margin-bottom: 30px;
}
blockquote p {
/* padding: 5px 0px; 10px 0px; */
font-size: 0.95em;
}
blockquote code {
font-size: 1.2em;
}
#cameraImage {
width: 400px;
height: 300px;
}
#map {
width: 360px;
height: 280px;
margin: 1.5em auto;
}
#content {
margin: 30px 3% 0px;
}
#sidebar {
padding-top: 15px;
position: fixed;
}
#sidebar li,#sidebar li a {
font-size: 1.2em;
margin: 1.8em 0px;
}
.api-div h4 {
font-size: 0.9em;
}
#footer {
display: block;
}
}
@media
all and (min-width: 1200px){
/*#header h1 { color: #ff0; } FOR TESTING */
blockquote p {
/* padding: 5px 0px; 10px 0px; */
font-size: 1.0em;
}
blockquote code {
font-size: 1.3em;
}
#deviceinfo {
width:50%;
}
#deviceinfo th {
font-size:1.35em;
height: 1.4em;
}
#deviceinfo td, #deviceinfo th {
font-size: 1.1em;
}
#footer {
display: none;
}
}

run the application you will get the following output.





16 comments:

  1. Thanks for sharing your knowledge.

    You may want to try using our new AppGyver steroids solution which bridges the gap between hybrid and native. I would like to invite you to try out latest iteration of “AppGyver steroids” for PhoneGap, you will be able to build apps much faster for your customers than ever before.

    http://www.AppGyver.com/steroids
    Please give it a try and let me know what you think, and let me know if you have any questions; I’d be happy to introduce to to the support team:
    These recent write-ups give a little more context:
    http://techcrunch.com/2013/03/01/pitching-app-ideas-appgyver-delivers-mobile-app-prototypes-in-minutes-no-technical-know-how-needed/

    http://venturebeat.com/2013/06/03/pitching-an-app-appgyver-says-it-can-deliver-gorgeous-prototypes-more-exclusive/

    http://www.infoworld.com/d/application-development/appgyver-aims-make-phonegap-developers-more-effective-using-steroids-220102

    Cheers,
    Michael Smith
    http://www.AppGyver.com

    Follow me: https://twitter.com/AnAppGyverGuy

    “We will not be remembered for building cool tools that build crappy apps”

    ReplyDelete
  2. hai thanks for the nice tutorial..is it possible to embed a dynamic map instead of the static map in this example..

    ReplyDelete
  3. I am getting Error
    Error getting Geolocation 3

    ReplyDelete
    Replies
    1. did you resolve this error "Error getting Geolocation 3"

      Delete
  4. Thank you for the post. I tested it and it works like a charm. I uploaded them to github(https://github.com/keanyc/geolocation/). Let me know if this is okay for you.

    ReplyDelete
    Replies
    1. change the name so the new url is https://github.com/keanyc/phonegap-geolocation

      Delete
  5. Hey. If I press on "Toggle" or "Current", I get following error:

    Error getting geolocation: 2

    Do you know how I can fix this error?

    ReplyDelete
  6. Hi..nice tutorial
    Can you give me some idea how to develop a PhoneGap application for GeoTagging Pictures.

    ReplyDelete
  7. Keep it up! Thank you so much for sharing this one really well defined all peaceful info regarding Tracking app,I Really like it,Love it- real time location tracking app

    ReplyDelete
  8. Great Post ! HTML5 tutorial with simple and easy examples, Covering HTML5 Introduction, Semantic Elements,Attributes,Canvas,SVG,Multimedia,Video,Audio,Plug-ins,YouTube Videos, Geolocation, Drag and Drop, Local Storage, Coding Conventions / Style Guide. HTML5 Tutorial & CSS3 Tutorial.

    ReplyDelete
  9. Thanks for this nice tutorial.
    But I am facing one issue that I am getting location but not the map on which it rendered.

    ReplyDelete
  10. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.school branding uk

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete