Create Own Tracking Website Using JS & Google Maps

Build your own tracking website to create a Transport Tracker to track and manage moving assets like buses or delivery trucks. An Android app captures the location of your vehicles and stores it in a Firebase Realtime Database. A map built with the Google Maps JavaScript API provides realtime visibility of your vehicles, routes and schedules.

Hardwares used : 

MediaTek Labs LinkIt ONE

Softwares used : 

Apache Tomcat server
Any Database MySQL, Access or MSSQL

For tracking ourselves or devices

So use this to track your self or your devices by converted into close box and fitted or have with you. Also use it for spying purpose.

Step 1: Materials Required


Materials Required

1) Mediatek Linkit one board with GPS Sensor, GPRS antenna and battery pack.

2) A PC with static IP or web hosting space with JSP support.

Software used

1) Arduino IDE for programming Mediatek linkit one.

2) Apache Tomcat server for JSP server.

3) Notepad to write JSP and Java Program.

4) Any Database MySQL, Access or MSSQL.

I use Windows XP in my PC.

Its always fun to program. Some time it makes us mad.

Step 2: Database Setup


1) Create a Database as name Loc.

2) Create a table with name Clocation. Fields in the table are Sno autogenerate, Udate default as systemdate, Lat to save latitude, Log to save Longtitude, Dvno to save device no.

Data sent from mediatek linkit one to Tomcat is saved here. Data saved here retrieved to see the current position and also the way of travel.

Step 3: Java Programming


1) This is a servlet program to get data and save it to the database and send the result

Servlets provide a component-based, platform-independent method for building Web-based applications, without the performance limitations of CGI programs. Servlets have access to the entire family of Java APIs, including the JDBC API to access enterprise databases.

2) Here i use a Odbc connection to save data in the database.

3) Save the java file and compile to create a class file.

4) Create a Folder in the Tomcat -> webapps -> Location.

5) Create another folder Tomcat -> webapps -> Location -> WEB-INF

6) Create another folder Tomcat -> webapps -> Location -> WEB-INF -> classes

7) Paste the java and Class file in to that folder.

8) Create a XML file named as web.xml. and paste it in Tomcat -> webapps -> Location -> WEB-INF folder. This file link the Servlet connection.

All the files (java, JSP and XML is attached in the next slide) Download and unzip and paste it inside the Tomcat -> webapps Folder.

Step 4: JSP programming and testing

1) Jsp programming contains data fetch from data base and Google map api.

2) Google map api detail are able to found in https://developers.google.com/maps/?hl=en.

3) With the Reverse Geocoding in oogle API find the place in google map.

4) First in the jsp open the google Map.

5) Open the data base and found the maximum time of the distinct device coordinates in database.

6) With Reverse Geocoding and coordinates pin the current place in the map.

7) The coordinates given by the Mediatek link it one is divided by 100 to get the correct position in Google map.

8) To update frequently set a timer using javascript in jsp and redo the page in certain interval. So we able to trace.

9) This Page is open from any where in the world with PC or mobile to track a person.

Download this file for java and jsp program


Step 5: ​Testing the dataposting



1)http://xxxxxxxxxxxxxxxx:8080//Location/SendLocation?Lat=23.406546&Lng=77.387695&Dvno=10 This is the header to be send from Mediatek linkit one.

2) Type the above header in any of ur browser and press enter.

3) The result shows Sucess, means the coordinates given above save in your data base.

4) Open ur data base and use the select command to view the saved values. Now the software part is over. Lets move to the hardware part.

Step 6: Hard ware Setup


1) The one and only hard ware use is Mediatek Linkit one.

2) Connect the GPS module.

3) Connect he GSM/GPRS antenna.

4) Connect the usb cable to upload data.

5) Insert a Sim card with GPRS.

6) Keep the Mediatek Battery in side once program completed. Fix it and turn the Mediatek Linkit one to battery mode. Keep it in a box and track any one secret.

Step 7: Link it one Coding

1) Important two thing in this coding is GPS and GPRS modules.

2) Use GPS to fetch the Latitude and longitude.

3) USe GPRS to send the Latitude and longitude. to the java servlet.

http://xxxxxxxxxxxxxxxx:8080 //Location/SendLocation? Lat=23.406546&Lng=77.387695&Dvno=10

The aim is to send the above format using GPRS client in regular interval. In the code change the ip address as ur static ipaddress or use ur domain name. Then concatenate the latitude and longtitude fetch using GPS with device no. Now all is done. But it take much time for GPRS client. Very long time.

Download the code from code tab

Step 8: Publish and Track


1) Now Remove the USB data cable and Plug in the Battery and change the switch from usb to battery.

2) After few minutes check ur data base it contains some values. But how to find the position.

3) Open ur browser and http://xxxxxxxxxxxxxxxx:8080 //Location/GEOLOC.jsp. U see the exect position of ur device.

Put it in a box and tie it with your device or have fitted with you and see it in google map. But if some one found the device you lost your valuable Mediatek Linkit one. When use with pets be aware use a water and weather proof case. Also care with devices what we are using with. Happy coding.

CODE 
Tracking.ino [ Arduino ]

#include 
#include
#include
#include

char server[] = "ur static ip here or domain";
char path[] = "/Location/SendLocation?";
String address1 = "/Location/SendLocation?";
String address2 = "";
int port = 8080; // HTTP
int deviceno=10;

gpsSentenceInfoStruct info;
char buff[256];
double latitude;
double longitude;

LGPRSClient client;

void setup()
{

LGPS.powerOn();
delay(3000);

while (!LGPRS.attachGPRS())
{
delay(500);
}
}

void loop()
{
LGPS.getData(&info);
parseGPGGA((const char*)info.GPGGA);
if (latitude != 0 && longitude != 0)
{
latitude=latitude/100;
longitude=longitude/100;
address2 = "";
address2.concat("Lat=");
address2.concat(latitude);
address2.concat("&Lng=");
address2.concat(longitude);
address2.concat("&Dvno=");
address2.concat(deviceno);
Serial.println("address2");
if (client.connect(server, port))
{
Serial.println("connected");
// Make a HTTP request:
client.print("GET ");
client.print(address2);
client.println(" HTTP/1.1");
client.print("Host: ");
client.println(server);
client.println("Connection: close");
client.println();
}
else
{
// if you didn't get a connection to the server:
Serial.println("connection failed");
}
}
}

void parseGPGGA(const char* GPGGAstr)
{
int tmp;
if(GPGGAstr[0] == '$')
{
tmp = getComma(2, GPGGAstr);
latitude = getDoubleNumber(&GPGGAstr[tmp]);
tmp = getComma(4, GPGGAstr);
longitude = getDoubleNumber(&GPGGAstr[tmp]);
sprintf(buff, "latitude = %10.4f, longitude = %10.4f", latitude, longitude);
}
else
{
latitude = 0;
longitude = 0;
}
}

static double getDoubleNumber(const char *s)
{
char buf[10];
unsigned char i;
double rev;

i=getComma(1, s);
i = i - 1;
strncpy(buf, s, i);
buf[i] = 0;
rev=atof(buf);
return rev;
}

static unsigned char getComma(unsigned char num,const char *str)
{
unsigned char i,j = 0;
int len=strlen(str);
for(i = 0;i < len;i ++)
{
if(str[i] == ',')
j++;
if(j == num)
return i + 1;
}
return 0;
}

Thank you.