Hi Folks!,
Today i am going to tell you about the GPS system which actually makes a path on the map when the device is moved from one location to another.The application works like this
Step1 The geolocation of the device is detected by the geolocation.js provided by phonegap.
Step2. The timer checks the location after every 3 seconds.
Step3. The map is updated.
Below is the complete code for it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="cordova-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
var cycle=0,lat,lng,finallat,finallng,image,myLatLng,carMarker,map,myOptions,carPlanCoordinates=[],carPath,image1,myLatLng1,carMarker1;
var watchProcess=null,previouslat,previouslng,timer;
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.geolocation.getCurrentPosition(onSuccess, onError,{enableHighAccuracy: true });
}
function GetCurrentPosition()
{
watchProcess=navigator.geolocation.getCurrentPosition(onSuccess, onError,{enableHighAccuracy: true });
}
function stop_watchlocation()
{
if (watchProcess != null)
{
navigator.geolocation.clearWatch(watchProcess);
watchProcess = null;
clearIntrval(timer);
}
}
// onSuccess Geolocation
function onSuccess(position)
{
if(cycle==0)
{
lat=position.coords.latitude;
lng=position.coords.longitude;
//alert('lat is '+lat+' lng is '+lng);
previouslat=lat;
previouslng=lng;
loadScript();
cycle=1;
if(!timer)
{
timer=setInterval(GetCurrentPosition, 8000);
}
}
else
{
finallat=position.coords.latitude;
finallng=position.coords.longitude;
alert('finallat is '+finallat+' final lng is '+finallng);
/*carPlanCoordinates = [
new google.maps.LatLng(31.326323, 75.599897),
new google.maps.LatLng(31.326382, 75.599956)
new google.maps.LatLng(31.326599, 75.600031),
new google.maps.LatLng(31.326758, 153.602892)
];*/
carPlanCoordinates.push(new google.maps.LatLng(finallat,finallng));
previouslat=finallat;
previouslng=finallng;
currentLoc();
}
}
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
/*Google API Functions*/
function initialize()
{
myOptions = {zoom: 16,center: new google.maps.LatLng(lat,lng),mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
/*For the car marker initial icon*/
image = 'car.gif';
myLatLng = new google.maps.LatLng(lat, lng);
carMarker = new google.maps.Marker({position: myLatLng,map: map,icon: image});
carMarker.setMap(map);
}
function currentLoc()
{
/*For the GPS Trakcer Polylines*/
carPath = new google.maps.Polyline({
path: carPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
carPath.setMap(map);
/*For the car marker final icon*/
image1 = 'car.gif';
myLatLng1 = new google.maps.LatLng(finallat, finallng);
carMarker1 = new google.maps.Marker({position: myLatLng1,map: map,icon: image1});
carMarker1.setMap(map);
map.setCenter(myLatLng1);
}
function placeMarker(location)
{
/*For the car marker final icon*/
image1 = 'car.gif';
myLatLng1 = new google.maps.LatLng(location.lat(), location.lng());
carMarker1 = new google.maps.Marker({position: myLatLng1,map: map,icon: image1});
carMarker1.setMap(map);
}
function loadScript()
{
if(cycle==0)
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
}
}
//window.onload = loadScript;
/*End Of Google API Functions*/
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
No comments:
Post a Comment
Comments are welcome, Please join me on my Linked In account
http://in.linkedin.com/pub/ritesh-tandon/21/644/33b