Live Tracking with Google Maps and Firebase Realtime Database

Tracking is often a required component for any company that has cabs, delivery person, buses, or any assets that are on the move. In this post, we will build the frontend for tracking assets on the move.

We will be using Google Maps Javascript APIs and Firebase Realtime Database, to build a system that can be used to track assets in near realtime. We will host the content of the web app with Firebase Hosting.

GCP and Firebase Setup

Sign in to Google Cloud Platform Console and create the project. Then follow the steps.

1. Generate and restrict the API key as mentioned (https://developers.google.com/maps/documentation/javascript/get-api-key) for Maps Javascript and Direction API
2. Enable the Maps Javascript and Direction API. Follow the link to enable API (https://developers.google.com/maps/gmp-get-started#enable-api-sdk)

Similarly, Sign in to Firebase Console and create the project. Also on your local machine make sure you have Nodejs install. Install firebase tools globally.

npm install -g firebase-tools

Web App Setup

mkdir live-tracking
cd live-tracking/
npm init -y

Run the following command

firebase login --no-localhost

This will ask you whether you want to allow Firebase to collect anonymous CLI usage information (please say yes, it allows us to build tools that more appropriately reflect actual usage), and then it will give you a URL to cut and paste into your web browser.

Now, we can create a default Firebase Hosting web app.

firebase init

It will ask for features of Firebase which are required for the project.

Use the arrow keys to move up and down the list. Use the spacebar to deselect the Functions option, but leave Database and Hosting selected. Press Enter when you’re ready.

Next, you will be asked for the name of the database rules JSON file. Go with the default of database.rules.json.

Next, you will be asked which directory you want to use to contain the files that Firebase Hosting will serve. Go with the default of public.

Then you are asked whether to rewrite all URLs to /index.html. Go with the default answer of No. After this, the Firebase CLI tool will create a public directory with an index.html and a 404.html, along with a database.rules.json file.

Now create js, images and CSS folders inside a public folder.

Replace the content index.html file with the following code.

Create css/main.css file and use the following code.

Copy all the images (https://github.com/keyurbhole/live-tracking/tree/master/public/images)

Create js/index.js file and use the following code.

In the above code, You can see that we draw a polyline and update the marker on every change of latitude and longitude with animation. But there is a drawback of doing it. Suppose the person decides to take a different route then the line on the map will not get updated. In this case, you have to check if the person is on the right track, if not, then use Direction API again to set the new route and draw polyline again and update markers. Repeat the same on every change of route. In this case, the cost will be less.

Well, to avoid all the workaround mentioned above, we can use Direction API on every location change. Of course, the cost will be high in this case.

Now deploy the app.

firebase deploy

You can now track the assets on the move. You can use this to track cabs, buses, delivery person as well. We are now done with the frontend side of the development.

Now the important part of this system, we need to update firebase nodes with the updated locations on the move. It can be done through the Android/iOS apps. The app will update the location to firebase at frequent intervals and the change in the firebase database will update the marker on the frontend. You can find a similar example Real-time Asset Tracking on Google Codelabs

References

You can follow the GitHub repo

keyurbhole/live-tracking