How to do Live Tracking using Google Maps in Taxi App 

In this blog, we are going to learn about Live Tracking using Google Maps in Ionic Angular App OR any Angular App. We will use freely available directive agm-maps and agm-directions and use them in the Ionic Taxi application for tracking and other features.

And we will be using the Ionic Angular framework and integrating them with the angular maps.

What is Ionic?

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.

We can use Cordova or Capacitor to build these awesome apps and have native functionalities. With this, we get some amazing native plugins to use like Image cropper, Camera, and many more.

So for setting up the Initial Ionic application you can go through this blog. For this session, we will be using angular as the base framework.

What is Google Maps?

Some of you already know about google maps or should have used it earlier. But for now, I will go through it one more time for the beginners.

Google Maps is a web mapping service developed by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets (Street View), real-time traffic conditions, and route planning for traveling by foot, car, bicycle, and air (in beta), or public transportation.

We can use the Google Maps services using their APIs and the most important API key.

Using AGM-maps

Note: For all libraries to work properly you must have a Google Cloud account and with Billing, Method added. You will also need to enable these APIs to work with all these plugins. More details are given below

agm-maps are the library that helps us to render the google maps in our angular application. We are using the Ionic 5 angular framework for our Ionic Taxi Application.

So we first install the Agm core module using 

$ npm install @agm/core

We will also use the agm-direction module to get the path according to the origin and destination coordinates.

$ npm i agm-direction

This will help us to use all the agm modules and functionality. Now after installing agm we now import our agm/core module [Line 3] and agm-direction module [Line 4] in app.module.ts file. You can find app.module.ts in the root project folder.

For the Google Maps API key, we will now go through the process. At first, we have to visit the Google Cloud console. If you don’t have an account on it you can make one for free ( using the existing Google Account you are logged in with)

We can create a new project by clicking the drop-down and adding a new project with any suitable name.

Now we have to add credentials to the new project to get the API key. For that, we should go to the credentials tab and click on +CREATE CREDENTIALS and select the API Key options.

Now you can copy this API key and paste it into your app.module.ts file.

Now we have got our API key Successfully But we have enabled some of the features for the maps e.g direction API. We must enable the Maps JavaScript API by going to API Library in the google cloud platform.

Now a days google started to charge for most of there APIs and we have to enable a billing account for them. So be aware that you will need a card to use here.

We have to enable more APIs for other things like directions API, GeoCoding API (if you are using latitude longitude to Address conversion), Maps SDK for Android (if you are going to build on android), Places API (if you have an autocomplete address kind of search bar). I have shown the API I enabled for this app — we used iOS platform for the app (Not shown in this tutorial though )

Now we will be implementing the maps and tracking feature in our Ionic Taxi Application.🎉🎉

Starting with, Using a Map on the Home page.

Here we use <agm-map> [Line 1] to render the map component in out home page and it encloses the <agm-marker> [Line 2], <agm-circle> [Line 4] and <agm-direction> [Line 7] components to show the markers, and the range bound circle and a path for origin to destination.

<agm-map> — Helps us to render the Map view on our page and takes the latitude and longitude ( To show the specific location in Map frame ) and a zoom factor ( to decide the zooming of the map ).

<agm-marker> — It helps us to show the Marker 📍 in the map view for a particular location shown by the latitude and longitude given to the <agm-marker> component and the markerDraggable helps us to drag the marker and put it to another location.

<agm-circle> — It is used to show the circle around a specific area mentioned using lat and lang ( As center ), radius ( Range ).

<agm-direction> — It is used to make the follow-up path from origin to the destination. Using origin and destination coordinates.

Live Tracking feature 🎉

You may have come across this name earlier also, It means tracking the live location of a person who is moving from one place to another. It can be used in Taxi booking applications for tracking the current location of the Taxi or the followed path by the Taxi driver.

In this we will integrate our method with the <agm-direction> component using is attribute called waypoints.

Using waypoints

As the name suggests these are the points or the coordinates from which one has passed through and live tracking also wants the track from which one has passed.

So now the Question is this how to get these points from which one has passed ?

 To get the above required co-ordinates, we will get the current location coordinates in a Interval of 15 seconds and push them in a database or save in service array. Later we will connect these dots to make whole path.

So we will use the setInterval method [Line 2 in the above code] which will take the first argument as the function (callback) and the second argument as time [Line 8 - 15000ms] in a millisecond. And the function is being called after every t second (specified in the second argument).

We will be calling this above function after every 15 seconds, Now we will go through this input function.

const response = await this.util.getCurrentLocation();

This getCurrentLocation() function will return the current location using geolocation plugin. You can read more about geolocation in our other blog.

Now in the options object [Line 22 in above code] for the geolocation.getCurrentPosition [Line 20 in above code] we have to take care — to set timeout < setInterval’s Time otherwise there would be a problem of memory leak. As you will not receive any GPS location within setInterval time. And there will be an overlapping of GPS return values.

After setting these options and we pass into another Promise function which returns the current location of the person.

navigator.geolocation.getCurrentPosition(
    resolve, ({ code, message }) =>
    reject(Object.assign(new Error(message), { name: 'PositionError', code })), options );});

The navigator is the top-level object which has the geolocation method to get the current location and return it to the getCurrentLocation() function in coordinates.service.ts file. Where we have already some API like this :

this.api.updatewayPoints( rideId, 
    { lat: response.coords.latitude, lng: response.coords.longitude }
    );

This API pushed coordinates to a database table. Also, you can either push it in the service variable (array) or use it in the agm-directions component.

Now the path variable will look like this after the coordinates are being pushed.

this.service.path = [{lat:75.43,lng:34.54},{lat:75.63,lng:34.84},{lat:76.01,lng:34.98},{lat:76.23,lng:35.14},....]

After every 15 seconds, the current location coordinates are being pushed and then we will use this path in waypoints. Please note that Google API supports only 25 waypoints max to path creation, so you will have to adjust your logic somehow to maintain this constraint. Another way to build a path for more than 25 points is to use the Polyline creation method on Google Maps — we are not going into that in this blog.

Now we will pass the path variable in [waypoints]. In the current case, we just have saved the points in the database, and get them wherever required.

When the page loads we just get the saved path or the array of coordinates and then loop over it and assign each object of coordinates to the location property and add stopover: false ( It means we just don’t want to add a stopover mark on these coordinates )

This is the tracked path of a person from origin to the destination using the waypoints or path which is generated using the geolocation currentPosition method. As soon as Page loads ngOnInit [Line 1 in the above code] gets called and we query for the waypoints in the database. In the given waypoints, we loop through and add a stopover property. And the final paths [Line 5 in above code] array is being used in the waypoints attribute [Line 3 in tracking.html.ts file] of agm-map.

Conclusion

Now we have studied the agm-maps and its different map components, So now you can play around with google maps and make your tracking feature and an awesome Ionic Angular application. You can also have a look at our Taxi booking complete platform, it is preloaded with all of the required features.