DIY GPS Tracker using Raspberry pi & Neo 6M GPS Module with Javascript, firebase & Google Map API

hello everyone two years back I made a video on GPS tracker like how you can build a GPS tracker using Raspberry Pi and a Neo 6m GPS module now in this two years many things have been changed like for example that time I use Python 2 but nowadays people don't use Python 2 they are using python 3. also at that time I have used a library called pub now and as Library also has been changed so it seems like that very particular setup is not working or it's very hard to work with that setup like people need to change a lot of things that's why I get many requests like uh please change it up please make a new video and like please update the codes and all that things thus I thought why not making a new video on this topic and this time we will make it even better so in this video I am going to show you how you can build a GPS tracker using Raspberry Pi and Neo 6m GPS module with python free and in this video we are going to use JavaScript we are going to use Firebase and Google Maps API so we are not going to use like any third party Library like pubnub so this time uh and I think many of you are already familiar with Firebase and JavaScript and even if you are not not a problem I'm going to start everything from very scratch and also like many many of you have problem like using Neo 6 and GPS module like you don't know how to use Neo 6m GPS module Raspberry Pi and you face many problems so I will also discuss about all the problems you can get and how to solve those things so we are ready to start but before we see how to build this let me show you the demo so as you can see here I am using the setup and I am actually using Raspberry Pi 3 with the GPS tracker here and I'm powering the whole setup using a power bank okay and for the internet I'm using my phone hotspot okay so basically the whole setup is connected with my phone hotspot and the laptop screen you can see uh so basically that is connected to my home Wi-Fi so it is working over the like what I can see what the when okay so basically uh you can track the GPS tracker from anywhere in the world and as you can see so I am going to a place and coming back to the same initial position so as you can see it can track it properly so guys this is how the end product will gonna look like so now let's get started [Music] okay so let's talk about the hardware first so here to show you how the connection I'm going to use Raspberry Pi zero but you can use Raspberry Pi 3 result by 4 or any other SB by you want okay I haven't tried with pico but remaining 0 by 3 and Pi 4 you can use it okay now here I have the Neo 60 module now at first I'll just connect these two together so here using in this way so now I have connected them together now you need to connect the Neo 6m module with the Raspberry Pi now the connection is pretty simple so in your system we have VCC RX TX and ground okay now VCC will go to five volts in Raspberry Pi ground will go to ground in Raspberry Pi the RX will not go to anywhere we don't need the RX of the Neo 6A module to connect with anything the TX of the Neo 60 module will go to the RX of Raspberry Pi okay so this is all about the connection okay and in Raspberry Pi if you see uh you can also see in the diagram but here the first pin so in the right side the first one is five volts second pin is also five volt the third four third pin is ground the fourth pin is TX and the fifth pin is rx okay so here in the fifth pin RX we are going to connect the TX of the module so let me just connect them so here I go the VCC TX and the ground similarly here I'll connect the VCC with one of the five bolt pins the ground with the third pin third pin is ground and the TX to the fifth pin which is basically RX supplies verify okay so as you can see this is how it is looking like currently and this is all about the connection you really need to do okay okay guys so now as we have saw like the hardware setup now there are a few things I need to talk with you so in my last video also I discuss about this hardware setup but many people like had few problems so I'm going to discuss with you that if you are facing these problems how to solve so the very first thing is after you will turn this like Turned Raspberry Pi on there is a LED in the Neo 6m GPS module like in my case it's a blue LED in your case it can be a red LED that led should blink okay and if your LED is not blinking that means your GPS module is not getting uh the data the GPS data okay now it's not that you will just plug the pi and your GPS model is going to Blink not like that it will take few minutes to get the signal but even if you are not getting signal after few minutes or maybe you waited for quite a long long amount of time and still you are not getting the signal then there is a problem okay so what can be the problem the very first problem can be power so maybe you Raspberry Pi maybe the module is not getting enough power so make sure you are powering your Raspberry Pi using a proper adapter here I recommend you to use the official Raspberry Pi adapter or adapter which is like which can provide at least three ampere or current okay this is the very first thing second thing is you check the connection between the Raspberry Pi and the Neo 6m GPS module the BCC connection and the ground connection make sure that the Neo 6A module is getting proper voltage so even if you have a multimeter check that if it is getting 5 voltage or not you just use the VCC and ground pin to check okay if it is getting proper power now the next problem can be maybe you are using this module inside your home now if you are using inside your home there is a chance that the GPS module will not get signal okay so what you have to do you have to go to Windows side maybe from where you can see the clear sky or you go outside your home so your module will be under the Open Sky then it will get signal easily okay so if you are not getting the signal then go outside or maybe window side and then you check you wait for few minutes again and you check if it is getting a single or not even after these two things if you are not getting the signal or the blinking in that case there might be some other problems so you check maybe your this new 6m module is like damaged or something but there is some problem okay so you need to fix that before you start doing the programming because uh there is no connection between the like the LED blinking and coding okay so if your LED is not blinking that means your GPS module is not getting data so if it is not getting data then there is no meaning doing all the programming okay so at first you have to make sure your module is getting data so the LED is blinking in the module okay if if the module has led now there are few module version I know where you don't have led in that case it's fine but if your model has led it should blink that means you are getting the data and then only you can proceed doing all the programming and any other things okay tutorial part the first thing is we have to install the raspberry pios so for that uh if you just go to raspberry bios so there is a software using which you can install it raspberry pios for example if you go to the official site of Raspberry Pi s here you are going to get this Raspberry Pi imager you just install it okay I I guess I already have it so you install it and then you will get something like this then you just you just insert a memory card then you choose the OS now I am using raspberry pios 32-bit the latest version so in my previous videos many people ask which is the version of os you use So currently uh today's date this is the latest version I'm using raspberry pios 32-bit okay and uh you you choose the OS then you choose the storage in my case I don't have any memory card inserted and then you click in right it will take hardly depending on the memory card speed 20 30 minutes it may take okay and then when uh when it's ready uh then you insert the memory card in your Raspberry Pi you can use a HDMI uh cable to basically uh to basically get into the pi or if you are not uh don't want to use HDMI cable keyboard mouse then uh you can use SSH to get into it now if you don't know how to set up your Raspberry Pi without using keyboard mouse all these things so there is a video in my channel uh in which I have shown you like how you can set up your Raspberry Pi without any kind of screen keyboard mouse so link I'll just put in description you can watch that so after you have set up your Raspberry Pi and Raspberry Pi is ready uh then you we have to get into the pine now for that here I'm going to use my terminal okay now if you are in Windows you can use Puti in Linux and Mac you can use terminal or maybe you can use ghdmi connection VNC whatever you want so in Mac I'm going to use SSH Pi at the dead Pi is the username so Pi at the date the IP of the pi so the local IP is 192.168 43.63 okay here I have to put my password so now I am inside my Pi not yet but yes now I'm inside my pile let me make it little bit bigger also let me increase the font size so that so that you can see it now I guess you can see it properly okay so now as we have set up everything we know how to set up the hardware everything so I am assuming that currently your GPS the module dialed in the model is blinking now we are ready to set up the software pack now for setuping I recommend you guys to go to this website this is uh this blog I write two years back uh but for the software part like coming to the how to set up the GPS module things have been changed uh like nothing has been changed so we can use still use the same method we are going to use so I wrote it 2019 but the same method we need to still use it so the very first thing is uh we have to go to the boot config.txt so let me copy so I'll just copy command from this blog and I'm just use it here so let me paste it here now this is the boot config file you go to the end of the file okay you go to end of the file and these five lines you need to add here so these five lines are already mentioned here so these five lines you need to add and after you add those sorry not sorry sorry not this one so after you add those lines you can press Ctrl X and then y enter so it will going to save your file okay now as I am using Nano this is how here I have to save it okay this is the first thing you need to do the second thing is uh here also you will see like how things like every screenshot is attached here so you can see it now second thing is we also need to uh change our CMD line backup so so CMD line file you need to change which is boot CMD line so here what we are doing we have to create a backup of the file so for example let me just execute this command so if you see here what we are doing is sudo CP bootlife cmd.txtus or that means we are creating a backup of the CMA line txt so if anything goes wrong I will have a backup file this is just for safety purpose so if you enter it is going to create a okay the next is we are going to edit the CMD line txt file okay now let me paste it here now here again here what you can do is here you can delete everything whatever written inside the file in your case and you can put whatever written here okay so this whole line you can put it here and actually here I have already pasted this line so again I'm not doing it uh but you have to paste the whole line written here you delete this you delete whatever inside this file and you paste this whole line okay these few things you need to do okay now basically here we what we are doing is basically uh Raspberry Pi always basically use uart as a serial console okay now we have to turn off that functionality okay else we cannot uh get the data from the GPS okay GPS module so that's the reason here what we are doing we are basically uh stopping that functionality okay so after you did this thing you have to do a super reboot so you will reboot it finally after this uh after doing this now here the part now after you do all these things now as we have already disabled the uart now we will be able to get the data from GPS module okay now you can use this command sudokat Dev TTY ama0 to see if you are getting the data or not so let me first clean my screen so this is the command you need to use pseudocat and then Dev slash TTY ama0 now TT by m is USD Port so basically div slash DTI ama0 is the port in here in which your GPS module has been connected and your CAD basically is going to reading the data from that Port so whenever your Raspberry Pi will send some not Raspberry Pi your GPS model will send some data we are going to read that data through the port this is what we are doing okay enter so you see we are getting a lot of data now if this data doesn't really make sense to you it's fine okay because this is the raw data we will take this data and we are going to purse it in Python and then from there we are going to get the latitude and longitude so if we just okay let me first stop it for example if you see gprmc here you see these are actually layout long data okay but these are not in the format we normally see so for that reason we need to purchase it but basically using this raw data we can purse it and we are going to get the latitude and longitude okay make sure you are getting this thing so whenever you are issuing this command uh sudokat Slash Dev slash TTY ama0 you must have to get this output if you are not getting it that means you are not getting data from the GPS module and if you are not getting it there is no you cannot if you go to use Python you are not going to get the data okay so you must have to see data when you are issuing this command and if after you see data here then only you go to Next Step you write python code and everything okay if you are not getting data in this step make sure you are doing everything right in the software part you have modified each and every file properly saved file properly uh check your connections that your connections are fine or not you check that your Raspberry Pi is getting in a power or not like check everything your dead LED is blinking or not check everything okay because in this step you must have to get the data then only go to Next Step okay now as we are getting the data now we need to do few things now what we have to do is here now to so here we we have to do we have to do LSL Dev so using this we are going to see the ports so let me again clean my screen [Music] so LSL Dem this is using this command we are going to see all the available ports now there are a lot of ports what you need to see is this part you need to see that CDL 0 pointing to TTY ama0 you have to see which Port serial 0 is pointing to so here as you can see CDL 0 is pointing to TTY ama0 okay and cdl1 is pointing to TTY is 0. now you if you go to here so as you can see in the screenshot also you can see serial zero T2 if 0 and serial one TTY is zero okay so if you see something like this where your CDL 0 is pointing to TTY M A 0. in this case you need to issue these two commands Okay what they will do I will come if you see something else if you see serial zero is pointing to TTY is zero not am a 0 in that case you need to issue these two commands it's important so very rare case where you will going to get this if you have a very old Pi very old pios then maybe you can get this but if you're using the like almost like if you're using a Raspberry Pi two three years old like maybe Raspberry Pi 3 you are using in that case very rarely you are going to get this the most chances are you are going to get serious zero TT by m a zero serial zero is basically pointing to DTI mma0 in that case you need to issue these two commands now why you need to issue these two commands we need to actually disable the console here okay so you see uh in the last command in terminal we wrote that basically using that we read the data okay so we are reading the data in console right so console is reading the data but now what I want I want my python code to read the data so if I want my python code to read the data I have to disable console from reading the data so that's what we are doing so pseudo system and then you are basically doing disable so stop will do what it will stop the service for uh temporary or I can say like for temporary amount of time and disable will permanently disable it okay but it doesn't means you cannot start it never not like that you can again start it using the start command Okay so these two commands you need to issue now let me copy it okay and paste it here so here I have stopped it and now here I am going to disable it okay so now it has been disabled now if you see what you need to do is now you are done now this whole setup is done and now we are ready to write the pattern code now again where what we have did in this section is at the very beginning we installed OS the second thing is you have to change that CMD line file you have to change that boot config file because you want to disable urd Okay the next thing is you uh you are checking the if your GPS module you are getting GPU the data from GPS mode in the console using the cat and by reading the port then as the port as currently console is seeing the data you need to stop console from reading the data so that your Python program can read it that's why here you have disabled these two Services okay and finally after you Disabled Services now you are ready to write a python code so that your python code can lead directly from the port itself okay and then it can send the data so here what I'll do I'm going to go to the desktop [Music] and there I'm going to create a new directory directory called yes uh tracker okay now let's just get into this folder GPS tracker okay now we are ready now we have to write the python code now now for all the codes you can just go to my GitHub repo and there you are going to get it so this is the link will be in the description as always now here if you see you are going to find two python files and there will be one CSS one HTML file okay now uh if you see the python files are one is called GPS print dot pi and then there is GPS send dot pi now at first we are going to look in the GPS print dot pipe and now this is Asus looks like okay so here we are using two libraries which is CDL and there is pi nmea2 now it is python free so like I said in the last video I made two years back it was on python 2 so when basically I used few others library and now people don't use Python to that much so that's why now we are using the latest version of python so let me show you the exact version I am using in my okay just let me just make it full screen and uh just yeah yeah now I guess it's feasible yes okay so now if we type Python 3 we can see python 3.9.2 which is the latest version of python and uh this is the code so now let's look at the code so if you see here uh here we are importing this to libraries now Pi nmu2 you can simply install by pip install so for example here if I have to install it so it's already installed in my case but let me just to make it little bit bigger yeah this is fine so here I will simply write pip 3 install my nmea2 which I already have installed oh sorry sorry I'm full inside python so I need to get out of it yeah this is fine so here I'm going to write pip3 install ea2 so here I have already installed it but in your case you can just install Pi enemy2 using this command it will take some time but I enemy 2 will get installed so in the meantime just like so as you can see the requirement order is satisfied so it's not going to install here because it's already installed but in your case it will get installed okay okay now if you look at the core it's pretty simple so here we are defining the port which is TTY ama0 uh then here we are just uh using the botlet 9600 there is a timeout and we are using that Port now Pi nme2 is basically used to purse nmea sentences so here uh from our GPS module we are going to get some raw data now we cannot use that raw data because we are not going to get what we need is just latitude and longitude okay so we don't need a draw data so what we'll do we'll get the raw data and then we are going to purse that data using pi nmu2 and from that we are going to extract the lad and long because that's the thing we only want so here as you can see we are doing the pursing uh we are reading the data here one thing in Python two uh we don't need to decode the data but in Python 3 actually we need to decode the data so here I am decoding it and then I am just checking for gprmc okay now GP RMC uh so like you uh so you already saw how the raw data looks like now whenever I will have a broad data starting with gprmc uh that means in the GP in that data or like in that particular sentence I have my Latin long data and then whenever I will have the gprmc I am going to extract the lat and exact LNG so we'll add a Latitude I am extracting and I am putting that into lat and longitude I am putting inside LNG so in these two variables I'll have my data then I'm finally just creating a sentence to print it and finally I'm printing it so it will print like latitude equal to the left value and then the longitude equal to the long man this is just what's going to happen here okay it's very simple uh now let me copy it you can also clone the repo I'm just copying it here okay let's make it full screen let's create a new file called uh sorry Nano GPS print dot pi [Music] so here I'm going to paste the data here I'm going to save it foreign GPS screen.pi now as here I'm running it as you can see we are getting the data see so after 0.5 milliseconds we are going to just uh get the data in this way okay so latitude longitude and it's not changing because uh basically my Raspberry Pi I'm not uh it's just static so that's so you're getting the same lat and long though there will be little difference so as you can see are there little difference based on the accuracy uh but this is how it's working so in our Python 3 we are getting the GPS data okay so it's looking just fine now as we are getting the data in Python 3 we can use a lot of things we can use socket IO we can use a there are many things we can use last time you use the API called pubnub but this time we are going to use like I already mentioned we are going to use Firebase let me before just yeah so now we as we are getting the data we have to create account in Firebase now why I'm using Firebase is because obviously we can use Firebase for free you don't need to pay for it Firebase is kind of like many of you I think already are familiar with Firebase and it's easy okay it will not take it will hardly take five to ten minutes to set up Firebase and with Firebase the main advantage here will be like uh you you don't need to host your uh what I can say the web pages or basically HTML CSS code you are writing you don't need to host it somewhere what you can simply do you can just open the HTML page in any place in your laptop in your tab in your mobile phone whenever you can open it and it's going to fetch the data from Firebase so you don't need to actually host it somewhere if you want if you can definitely host it but it's not uh mandatory you can open it anywhere it is going to work so I'll show you how it's working or not uh but the first thing we have to do is we have to create a Firebase account so Firebase account you don't need to create like you already will have a Google account you can just log in in Firebase with that account so here as you can see so I have already logged in so after you just log in with your Google account you just go to go to console okay now here I already have few so one project called GPS tracker but again I'm going to create a first version and show you how it works so you create create a new project we have to give it name so let's say I'm going to give it a name GPS uh tracker two [Music] is fine um enable Google analytics we don't need it so let's just create it so it's take it will take some time to create a project now after creating the project we only need a single service which is the real time database so what will happen your Raspberry Pi will send the data your database will store the data and your web page will face the data from the database that's what's going to happen okay now here we are inside our uh so as you can see this is how it looks like now so before you do anything let me enable the real Dam database so in the left side you can see real-time database you click in that and it will open okay as you can see this is how it looks like so easily or create database you click in create database you have to select the location of your database for me it's fine it's important start in lock mode no we are going to start in test mode okay so we are just starting with test mode so that we can read and write data easily and uh it will be easier for us because it has test project uh obviously it's not uh what I can say like we are just doing testing here but yes if you are going for a final product or final device stop then you have to go for the lock mode okay but that's a separate thing anyways okay so now here we are we have the real-time database you don't need to do anything else here it's totally fine okay you don't need to create any row any data now yes definitely if you are planning to track your previous records and stuff so then it's different then you have to do a lot of things but here we are not building anything complicated like that we are doing very simple it's just a real time tracking your Raspberry Pi sends the data and your database will only consist of only single coordinates so for example at a time your this real name database will only have one latitude and one longitude nothing else okay so that's you are just tracking the real time location you are not going to track any history previous nothing you are just going to drag the real-time location so maybe in future we are going to work with the history location also like where you have a record of like previously and stuff but that's a separate thing for now just the real time location okay now it's done now what we need to do is uh we will go to positive review here you will see you get started by adding Firebase to your app you click in this one web because we are building a web app not Android not iOS for now it's just a web so you click in here app name we have to give it a app name yeah so let me give it the same name GPS tracker 2 which is going to be fine she feels tracker 2. if you Striker 2 this is your app [Music] so it's using the app uh we don't need to do any npn because we are not going to use node.js or anything like that uh but yeah this is the thing you need to store this whole part this is very important okay this whole part so how is config you just need to copy all these things because these things we need to use uh both in our python code also in our uh basically we're doing is HTML file okay so let me copy it in Sublime Text so let me create a new file for it file new file okay so here I have pasted it okay so we will see how to use it later now we are done with this part now we have a real-time database in Firebase which we can use now what we have to do is here the next thing is now the Firebase with the job with Firebase is done we will visualize it how it working but that's a separate we will see this later but for now let's just go into our GitHub repo there we have another file called GPS send dot Pi you open that file it's almost similar two three lines we have added uh so we need to add a library called pyrebase you can install the Firebase in the same way P3 install Firebase that's it that's going to work is what you can say is basically the how we using Firebase uh Library we are going to use actually the Firebase because to use Firebase you know whatever many libraries to use Firebase actually but my address is easy to use that's why here we are using power this is very simple so if you see here we have to create a config file inside that we have all these details we just copied so we are going to put all the details here uh then we have we'll create a Firebase object here and then we are going to also create a DB object from the Firebase database so the database we just created okay and uh now one thing very important here so you see uh yes another thing so in Firebase I created the real-time database first then I copied the then I created the app this is important because if you create the app first you copy the what I can say you copy all the config details in that case what will happen as you haven't enabled your real-time database it's not going to it's not going to get this link so if you see there is a uh what is this there is a database URL so this database URL you are not going to get it if you don't enable this real-time database so at first you enable the real-time database then you go and create the app and you copy the config file the copy the config details then only you are going to get this database URL but this is very important because that is the main thing we want we just want that database URL so that we can fetch the database the data from the database right so yeah here we are creating the DB database object which name is DB now this path is totally same no difference up to this part no difference here only what we are going to do we are creating a dictionary now in dictionary we have here lat and long so your lat lat is a key here and the data is lat we just extracted and LNG is again another key and LNG basically a longitude is the value here okay dictionary very simple here and then we have DB dot update so we are going to update a database with the data so what will happen is let's say current some latitude and longitude you send that data to database database will store it then after few seconds you get another data no and then again you updating so you're updating your previous data you are not appending it's important you are not appending new data okay you are updating your old data because it's real time so you will have only one coordinate like not I mean you will only going to have a single layer and single long so that's why we are going to update the data okay and finally we are printing data sent so that's the only change we are having so let me copy it and let me paste it here so Nano GPS send dot pi okay paste it here we have it now here what we need to do is we will delete all this it's going to take some time foreign text so here we have them let me copy it and let me paste it here okay now here also you need to modify one thing let me show you that so what you need to do here is here you need to add Discord quotations around your keys okay so if you consider this has keys and like those are as values we have to add quotation here [Music] [Music] sorry and finally we have app ID yeah and this is done this is the only change you need to do remaining things are fine now we can simply save it and now it's safe now let's run it and see if it's able to send the data or not GPS sent note 5. okay so as you can see here it's saying latitude longitude data set latitude long data set so that means sending the data now let's see if we are getting the data or not let's go to Google Chrome let's go to our GPS tracker here let's go to real time database now let's see so so as you can see here we are getting ready at real time so as you can see as our PI is saying the data the data here is getting change update basically it's updating so as you can see it's updating okay so this is how it will work so that's why it's a real-time database okay it's in the data and it's updating in real time now now as we are now as we have the data in our Firebase now actually now we can fetch this data to anywhere if you want it in your web app if you want it in your IOS app if you want in your Android app wherever you want you can just take it okay this is as simple as this and uh and another very good thing about Firebase is so whenever you are actually updating the data here in our JavaScript we can actually so it's not that our in our JavaScript we will just check after each second that if that data got updated if the data got updated it's not like that so whenever so what we'll do is whenever this data will get updated here automatically or at that moment our JavaScript is going to take this updated data and going to put it in the map it is like that so here it is changing after like let's say each second but maybe you are building application where it's not changing after a second it is changing after uh five minutes ten minutes something like this so uh next data comes five minutes after that the third data comes 15 minutes so in that case in JavaScript it's not like that you have to do like you check after each minute and when the data is if it's updated if it's updated something like that no you don't need to do that what you need to do what will happen is Javascript so whenever this data is updated or is getting updated here automatically from JavaScript you will know we'll see how we'll do that but you will know that he is the data got updated and then only we are going to fix the data so that's a very good thing of Firebase as the Firebase part is done now we have to talk about like how you can fetch the data from Firebase to our web page and uh like the how we are going to use the Google API and all these things now we'll see okay now for that uh if you see my GitHub repo so there are two files which is map.html and map.css now CSS is just for the styling now if you want to change the styling you want to change the background image you can do so but I'm not going to talk about the CSS so we are mainly going to talk about the HTML page here okay so what things you need change and how it's working and all the things but before that here also we need to we need one thing which is the Google Map API key okay because here we are using the Google Map API okay so let me open Google Map API and if you just open maps platform the JavaScript API you are going to use so let me just do get started so you must have to create one Google Cloud platform account now you can you have if you have a Google account you can directly sign into it okay after that what we have to do is after you create your account you have to create a new project so if you just go here you see I already have created a GPS tracker project but you can simply go here and create a project you just need to give it a name nothing else okay you just need to give it a name and create project and then you will get something like this you are going to get so after creating the project you select it so for example here I can see all these three project you have to select this project so whichever you are just you have just created or even if you have a older project you can also use that no problem okay so after you open that project you will go to so first you have to enable billing for that okay why enable billing if you don't enable billing it's also fine okay no problem but if you don't enable billing in that case so if I just just wait a minute so collect me open the web page for you so if you see your web page so this is the web page map.html let me open it so you see now you see you can see the map here okay but if you don't enable billing what you'll see you will going to see the map but here it will be written like for development purpose only so it will be uh it will be a black layer okay not totally black there will be like what I can say is like with 50 opacity and then there will be written like for development purpose only okay let me show you how it will look uh so if I just change the code a little bit so for example if I just uh just remove the key if I just remove the key then I can show you I'm not sure if it's going to run without the key you see this is how it will look like so if you don't enable billing it will show like for development purpose only and it is going to show this kind of layer okay but the functionality will still work you will still see the marker you will you will still going to see the marker is moving around everything will work just it will be like for development purpose only but if you enable billing it is not going to happen and enable billing means you are not paying basically you are just starting the billing uh but uh there is a free I think first 10 000 uh requesters are free so if you are just building it for our testing purpose or small project purpose you are not going to pay anything but yes if you are building it for like you are really building some project which you are going to use for regular live there yes obviously you have to enable reading and you have to pay for it okay now for that you can go for the pricing but it's not that high yeah so you can look into the pricing for that okay so after that you can enable billing how you can enable billing you can go here you can go to billing and from there you can add a billing account so you have to add your credit card details and then your billing will be enabled okay so here I have already have enabled my billing as you can see so my billing account free and one thing to remember the in uh the Google service if you see go to the billing enabled Google service Google Maps platform it should be selected so whenever you are creating your billing account you give your details after that there will be option where you can select the type of the service you want there it will be either Google either Google Cloud for platform and Google Maps platform you have to select Google Maps platform because you are you are using a Google Maps API okay so you have to select that remember and then you create the account billing account and then whenever you are going to create a new project that project will automatically going to take that that billing account or even if it doesn't takes you can go to billing and you can choose that account okay that you can do after that you go to apis now here you have to click on enable API and services here you have to search for job Maps JavaScript API you can search it here it will show you after that you open this and here you have to here you have an option like enable API you click on that and then API will be enabled that's it and then this page will be open for you so if we go to software you will enable enable it is going to show you you something like this so dashboard Library credentials this option is going to show you okay so you go to credentials and there you have to create ITI key let me delete my older key so that I can show you how to create a key now don't use my credentials because I'm going to delete this API key after I'll just make this video so here I have deleted this key so you go to here create credential API key uh here RK will be generated for you you can directly use it but uh the recommended way is you go to restrict keys so we are going to restrict the key so that this key only will be used for the this map JavaScript map API you go to API restriction you go to restrict keys there you select there you select Google Maps JavaScript API so if you don't do it it's also fine but it's recommend that you like you should do it okay because except that this key can be used for any API so in future if you just enable in enable more apis this key can be used for them but if you restrict it then it can only be used for the map API okay so here I am saving it and sometimes you may see if you don't realistic it doesn't work for few people I have just uh saw like they said that it's not working because you are not restricting so it's a good way if you restrict it then you copied a key from here okay so now we have the key you can paste the key somewhere because this key we need it uh in our HTML page okay now you can go to my GitHub repo you can copy this HTML final CSS file now I already have opened this folder in vs code so this is how this folder looks like so you have a map.html file this is how it looks like okay now what you need to do if you when you download this file you will see it will be written equal to API API this is how it will be look like when you download the file from GitHub so it will be like key equal to API key and callback equal to initialize what you need to do is you have to delete this API key part okay so this word apiq deleted now here you paste the API key you just copy it from that Google uh so Google console okay so now here I have pasted it so it will be like key equal to the key you have just copied and callback equal to initialize this is how it should look like at the end okay now you save it okay okay and now we can actually run it so let me run it and then I'll explain you how this code is working so what I'm going to see here in my vs code if you are using vs code in vs code you can actually download extension called live server so extension you can search for uh live server here sorry so this is the live server and you can actually download it if you uh you download live server then what you can do you can actually go to map HTML you can just right click on that and you can like open with live server okay something went wrong okay so as you can see this is how it is working now okay so our pointer is pointing to this area now why this area because you see this is actually my location because last time we ran the rest we ran our GPS send dot Pi or dpsin.pi file so in that time in my Firebase account my last location has been stored that's why it's now pointing to my last location okay now let me run the file again in Raspberry Pi so let me run this python C and the name of the file is GPS send dot pi as you can see it is sending the data now if we come to here now you will see this pointer is moving so as you can see now as you can see it is moving now obviously I am inside my house so obviously it will fluctuate little bit so it's in static so in basically other Raspberry Pi I'm not moving the Raspberry Pi but still you will see the pointer will move this is because as we are inside home the signal is not that accurate so it is it will show you that it is moving inside my home in this way so as you can see this pointer is moving okay so that means it is working just fine okay and when will be outside we can uh it will be like uh what I can say below the sky then in that case will be work with a better accuracy okay so it is working just fine now and whenever we are going to refresh as you can see it in San Francisco now now it's in my location and as you can see as you can see again it has started okay so whenever we will replace all the previous data will get deleted and again it will basically uh it is going to point the current location of the pi this is how it will work okay also you can just make it full screen from here in this way now I also showed you that you can open it your mobile phone or tap anything so you can open the HTML file from your mobile or tab but again it's not a very good way so what you can do is so for example here I as I have just opened it with live server what I can do is I can actually type my IP of this laptop in my so if all my devices my phone tab and laptop is in the same what I can say in the same Wi-Fi Lan locally Network in that case I can just type the IP of my laptop and then this port 5500 slash map.html and then I can actually access this same website from my tab and from my uh phones okay and also if you want you you can simply Host this HTML and CSS space somewhere and for example in any way hosting platform and then you can just it will you will be able to access this from uh public URL okay that's up to you if you want to do it okay so now we are done now let's talk about the code how the code is actually working or not let's see foreign this is how it looks like the HTML code now I'm going to just show you the important parts which you may need to change in future so here we are using bootstrap for the basic styling uh here it is important we are using this three JavaScript libraries of Firebase which is Firebase app Firebase auth and Firebase database digital libraries we need to use here the important thing is the version in future if you get an issue with the version you have to change it for example for now it's 7.20.0 in future if you change you have to change this version nothing else okay window.window.let and window.long we have already discussed about this is the default location where your web page so you can change it and that will be a default one now here what we are doing we are basically creating a map object we are pointing to this default Latin long we are centering to this Latin long and we are creating a marker at that position or you can see in this position here is the config file okay so basically the Firebase config file here we have added after that here we are initializing all the things for Firebase we are initializing we are creating a reference to to a Firebase database and the variable is ref and this is the most important part so this thing basically whenever your data or you can say dot lat online Latin long values in the database will get change this portion will get triggered okay and what we have in this portion we have like we are storing the values from the database so snapshot dot value we are storing the values in a variable called GPS then from the GPS we are actually getting the Latin long values okay so inside our l80 and LNG we will have the values from the Firebase now what you are doing we are again uh basically using the this new Latin long values we are again centering the map we are setting the position and this time we are not and what we are doing is here we are going to there is a empty array at the very beginning here we have initialized called Line chords now inside this Line chords array we are pushing this new Latin long so each time we are getting a new point we are pushing inside this Line chords array so line cause array will consist of all the positions like all the coordinates in a particular session and then using the Google Map polyline we are actually plotting those points all all the points inside this array and we are actually uh what I can say draw a straight line between those points and in this way we are actually getting our path so let me just show you what I mean by this is so if you just here if you see for example at the very beginning we are we have a default position so our map initially is pointing to this position which is the default position our map is centered into this position and creating a marker on this marker means that that red marker stop okay now whenever you are getting a new point we are adding that new point we are adding each and every point we are getting okay and now what we are doing let's say we got our very first point we plot that here we got our second point we plot it here now after plotting the second point we are adding a straight line between them then again we got a third Point here then we add a new line between these two we add a fourth Point add it here again added a new line so in this way each and every time we are getting a new point we are plotting that and we are adding a new line between this one and the previous one okay so basically we are plotting all the points in that array and adding new line between them and in this way we are getting the path okay so this is how this plotting thing is working and that's why in a particular session session means what you open that website or open that HTML file that's the session so for a particular session everything is saved here so everything is safe every position or location or what I can say coordinate is saved inside that Line chords array and whenever you are refreshing that site your that Line chords array is getting deleted okay so and then uh so that's why you don't have any previous data in your web page so whenever you are refreshing it you're replacing the page you don't have any history data okay and so if you are trying to you if you have planned to hosting it somewhere in that case what you have to do is you can also Implement a button which can where you can create a new session in your previous session also you can have options where you are actually storing your previous session data that's also possible you have just to uh in that case you also have to change ideas in Firebase you have to change the structure and in your front end you have to change the code a little bit okay so that's a separate thing maybe we'll do in future but for now this is how this code is working so even if you have any other question regarding this code like how it's working any other question you can let me know in the comment section so this is all about this video guys I hope you have liked this video now if you still have any problem regarding programming or Hardware connection anything you comment down I'll try to help and also there are a few things we can do in this project like further we can do so for example we can add the history tracking also maybe and also there are a few other things also like there can be improvements can be done right so comment me down like what other like improvements you need in this project and I will try to make those things also in some future videos also currently I am planning to make a video on doing the same thing on an Android app so you'll build the Android app from scratch where you can do the GPS tracking so let me know if you're interested in that one also so maybe I'll just make the video as soon as possible so this is all guys uh thank you for watching please subscribe to our Channel and I'll see you in the very next video

Channel: SPARKLERS : We Are The Makers

Views: 20,198

Keywords: DIYGPSTracker, RaspberryPiGPS, Neo6MGPSModule, JavaScriptProjects, Firebase, GoogleMapsAPI, GPSTracking, IoTProjects, LocationTracking, RaspberryPiProjects, DIYElectronics, GPSModule, IoTInnovation, DIYMapping, LocationServices, GPSData, TechDIY, GPSTrackingSystem, Geolocation, IoTDevelopment, MappingWithRaspberryPi, GPSPositioning, GeoData, RealTimeTracking, RaspberryPiIoT, MappingTechnology, GPSVisualization, DIYMappingProject, LocationData, RaspberryPiCoding

Id: l4QnAPgiD5Q

Length: 54min 28sec (3268 seconds)

Published: Tue Mar 14 2023