Get Wisdom Get Knowledge: javascript

Thursday, June 5, 2014

Locate GPS enable device/terminal on your web server

Locate GPS enable device/terminal on your web server.

1.    Send GPS points(Lon,Lat) and unique ID of device/terminal on server via GPRS.
2.    Receive GPS points and ID from device/terminal.
3.    save GPS points and ID into flat file or database.
4.    Save below javascript code to locate multiple device/terminal on google map.
5.    add auto refresh function to reload page after fix interval of time.

File Name Locate_Device.html

//Start Of Locate_Device.html   -->
//ARAI file format one line one record.
//ID1,Lon1,Lat1
//ID2,Lon2,Lat2
//
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAX4NEHbwolU-Nl8zzPRmQzsoJPWZ59jds&sensor=false">
</script>

<script>
var Lat=28.798077;
var Lon=77.418766;
var myCenter;
var lineArr;
//Anand Rai
function AutoRefresh( t ) {
    setTimeout("location.reload(true);", t);
}
function initialize()
{
readTextFile();
myCenter=new google.maps.LatLng(Lat, Lon);
var mapProp = {
center:myCenter,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);


for (var i = 0; i < lineArr.length -1; i++) {
    var LocationArr = lineArr[i].split(',');
    var latLng = new google.maps.LatLng(LocationArr[1], LocationArr[2]);

    var marker = new google.maps.Marker({
        position:latLng
      });

    marker.setMap(map);

    var infowindow = new google.maps.InfoWindow({
       content:'Terminal<br>' + LocationArr[0]
       });

    infowindow.open(map,marker);
    }
}
function readTextFile()
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "ARAI", false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
               lineArr = allText.split('\n');
               var line1Arr = lineArr[1].split(',');
               Lat=line1Arr[1];
               Lon=line1Arr[2];
            }
        }
    }
    rawFile.send(null);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body onload="JavaScript:AutoRefresh(60000);">
<div id="googleMap" style="width:800px;height:600px;"></div>

</body>
</html>
//End Of Locate_Device.html   <--