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 5:
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 6:
Now add index.css file for our user interface look good.
#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 your current location in map.