Amazon Ad

Tuesday, 15 May 2012

GPS System Using Google Map and PhoneGap Android


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

How to implement Captcha v3 in ASP.NET

 I was facing an issue of dom parsing in my website. I finally resolved it by using Google Captcha V3. Step 1: Get your keys from https:...