Building an Ionic 4 Firebase Location Tracker with Capacitor & Google Maps

In this tutorial we build an Ionic 4 app with Capacitor instead of Cordova plus Firebase for showing a track on Google Maps! Learn to build mobile apps with Ionic in my Ionic Academy: ionicacademy.com/
The training platform for everything Ionic. 40+ Ionic Courses, Ionic tutorials and private community to help you learn Ionic fast.
#############################
Want to read instead of watch? Here's the full Ionic tutorial: devdactic.com/...
Want more tutorials? Here you go! devdactic.com/
Just getting started? Take my 7 Day Ionic Crash Course: ionicacademy.c...
#############################
You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
#############################

[@GautamMer]

Firebase is my favourite topic and your tutorials are best 🔥🔥

[@hobbyturystaSEO]

nice.tutorial() => { sound: perfect, VideoQ: hd, teacher: positive; style: stylish };

[@galaxies_dev]

Thanks! 😃

[@anroswell]

Thank you Simmon, what about Background geolocation in capacitor???

[@akagichan2453]

I really enjoy this video, eventhough i got some trouble in the beginning... Thank Simon (y)

[@doronsayar1587]

Hi Simon, thanks for the tutorial! If you run npm install @types/google-maps --save then all google types and structures are recognized and you don't need to declare google!

[@vikassaxena16]

Thanks to educate me...is it works in background??

[@galaxies_dev]

I'm not sure at this point if anything works well in the background :D

[@calvincooke6529]

Simon, there will be a statue of you built somewhere some day. Your videos are simply the best.

[@galaxies_dev]

Haha I just pictured it, that would be epic :D

[@katherinneira6518]

I have already create the login and register page with guards but i don't understand how to do this with an authenticated user

[@vampirejs758]

Why do we use capacitor geolocation api instead of simple navigator.geolocation to get current coords?

[@dujonpratt987]

You should do this using the Wordpress API

[@MrGugared]

Great Simon! Your videos are amazing

[@galaxies_dev]

Glad you like them!

[@Kamleshkumar2010]

Thank you. you are my sunshine.

[@ryananto7015]

Simon, good night, I request plugin mock location to detect fake gps on capacitor...

[@jonathanperry7530]

Excellent video, Simon!

[@wardeha1]

Great tutorial as usual. Ccan we run the GeoLocation in the background?

[@galaxies_dev]

I don't think so. Perhaps with an additional background service plugin, but I guess not like it is now!

[@sangitajaiswal9205]

Excellent video Simon. Thanks. You are awesome.Can you make a video on Google maps directions in ionic 4

[@galaxies_dev]

We actually have a course on the topic of using the directions API inside the Ionic Academy :)

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@egaldamez2]

GREAT VIDEO SIMON, i have a couple of questions for you Why the user = null; ? i usually use to declare stuff any; is this wrong? Does this work in the background? if i run it on my device i open the app hit start tracking and then go to use other app it is going to work? Thanks in advance!!

[@galaxies_dev]

I think it might work but the OS might kill your app at any time, so you would need a plugin to prevent your app from being killed!

[@note380]

Hi, this is very informative, thank you. Is it possible to run capacitor geolocation in the background ?

[@galaxies_dev]

I'm not sure, you could check out the community plugins for location if one helps about this particular issue: capacitor.ionicframework.com/docs/community/plugins#location

[@medotarek121]

what's difference between using the modal as a entryComponent and exports the Module to the app Module ? and when i need to use entryComponent ?

[@itsPAN1K]

is it possible to get current coordinates with clicking on map? the classic mapClick method doesn't return lat, lng console says undefined and if I console.log($event) it returns c

[@eddiesonvergara5995]

if you move to your current location the marker will move realtime?

[@Trookboss7396]

Fantanstiv video. Thanx .Can you please make a video on google maps directions in ionic 4. Thanx

[@inesgomes7805]

Thanks Simon! Anything with capacitor and WebRTC?

[@FirmanMaulanaAditya]

is it possible to use this for tracking in background process?

[@galaxies_dev]

No I think the app won't work correctly in the background, you can try a different background geolocation plugin but in general it's not really safe for a long time.

[@dnnsnnz]

thanks for the tutorial :) . But i have some questions. That geolocation's plugin is only for capacitor o can i use it with cordova too?. Can i integrate the capacitor's plugin to a cordova's project?.

[@galaxies_dev]

You can include Cordova plugins in Capacitor, but not vice versa. But there are also Cordova plugins to track the geolocation!

[@havalsadun1383]

Thank you for tutorial Simon May I ask you @viewchild asks for 2 args I make the other states false But still I can't reach the map that is in html

[@galaxies_dev]

You mean you add {static: false} for the second argument? Then it should work I think..

[@sandeshtayde1372]

Hi Simon , great video . Can you please let me know , if we can change the styling and themes of these google maps from our Ionic app css files based on our interests, for eg . intead of the pin location icon ,if I want a different one , is it possible in Ionic ??

[@galaxies_dev]

It doesn't depend on Ionic, it's more about the maps SDK but from what I know, you can pass options and even CSS classes to object of the map!

[@jawwadarif8718]

how can i see all devices on one screen where are they

[@prasadnarayana]

where can I find the code for above tutorial please help

[@galaxies_dev]

It's linked below the video.

[@stephaniekassinopoulou3219]

Great tutorial! really gives a good picture of how to use firebase and geolocation together with user permissions! I was just wondering if the Geolocation functionality could have been used inside a service in order to reuse it into other components too.

[@galaxies_dev]

Yes sure, putting that logic into a service is definitely a good idea and always possible!

[@gabrielsebastianlopezillia8743]

Hi Simon, as always this is an amazing video, thanks for it :). Have you done something like this but with some kind of background-geolocation? I need to develop an app for security personal tracking that must run and report constantly on background and that its making my job really hard. If you have some advice I'd be really grateful.

[@galaxies_dev]

There are background plugins, but everything that targets iOS is really challenging, for Android it's a bit easier. There are even specific background geolocation plugins, but afaik you can't do heavy operations in the background or your app get's suspended!

[@ninjatwentyfive]

how does that loadmap() works mine is not giving the coordinates and map options? help asap!

[@galaxies_dev]

You can see all the code in here as well: devdactic.com/ionic-firebase-location-capacitor/

[@dannyshf1993]

thanks for the tutorial! Can you show us how to upload image to firebase using ionic4?

[@galaxies_dev]

There's already a course on that topic inside the Ionic Academy :)

[@gabrieldiaz6184]

"cannot find name 'observable'." :c

[@tntg5]

Hi Simmon! Thank you for your tutorials. Have you covered firebase auth with Capacitor? I can't get it to work on iOS

[@galaxies_dev]

Well general email/pw auth is the same, only if you need some native functionality it might be different.. But most of this is handled by the AngularFire package if you use it!

[@tntg5]

@@galaxies_dev thank you Simon for your response. In fact, Fireauth doesn't work on ios as smoothly as it does on android. When you perfom a signin with email/password, the authstate does not fire events on ios. But the sdk does get the token. So the solution I found was to trigger events manually on ios

[@wheview_official1091]

I can't see Google map... I can see an error like below ERROR TypeError: Cannot read property 'nativeElement' of undefined

[@stephaniekassinopoulou3219]

did you use the viewChild operator for the map element ?

[@roslansyafiqa]

Haii simon. How many api key should be used to deploy in android device? Should be specific credential to android api key? Help me.

[@galaxies_dev]

What you mean by how many? You just need one API key for google maps!

[@roslansyafiqa]

@@galaxies_dev because i read another website, they used 2 api keys for browser. If Using one key, map will show "for development purpose only". So the location is not accurate. Btw, i try deploy in native device using 1 api key. The map still blank.

[@coachrobtribiana6024]

Hi thanks for this. Just want to know what did you use for recording/streaming?

[@galaxies_dev]

I use Screenflow to record my screen and myself!

[@coachrobtribiana6024]

@@galaxies_dev Thanks man. Big help!

[@manuelsanpedro4586]

Hi can you assist me? The code works fine but when i tried to run on an android device in runs the app but does not send the phones location? is there any answer in this issue?

[@galaxies_dev]

Perhaps you might have to apply changes to your manifest in order to get the permission from the user?

[@JuanDeSouza7]

You should do a version of this using the new Ionic React

[@victorgalvez1486]

Yeah

[@1984mnemonic]

This works on web. But when you upload to ionicframework.com and you try to build a package, even with the first commit, fails on the package build. Any fixes?

[@galaxies_dev]

I think they have not yet added Capacitor support to their build system yet.

[@yourdailydoseofcode]

Can I use cordova and capacitor in one project?

[@galaxies_dev]

In general yes, but you have to install Cordova plugins through Capacitor and only the npm package, not the plugin itself!

[@joumigi4857]

Can we use native google-maps on Capacitor?

[@galaxies_dev]

I don't think that there's a package for that :/

[@thakkarsagar]

please share git repository!!!

[@luiszamoraveliz2862]

this.afauth.auth is not working line 21 in home.ts :( HELP!!!!

[@galaxies_dev]

Since AF 6 it's now only this.afaauth, the additional "auth" can be removed!

[@eddiesonvergara5995]

install angularfire2

[@eddiesonvergara5995]

simon did you already know why is the lat lng are storing in the database double and multiple times

[@Flipkurama]

Tnks Simmon! Does this cost?

[@galaxies_dev]

You mean from the Google API side? I'm not 100% sure about their pricing, the beginning should definitely be free or covered by their credits (I think).

[@Flipkurama]

@@galaxies_dev Yes, I mean from them. I'm thinking about using this. I'll try use their credits, tnks.

[@liberstudio562]

btw, i like it!

[@tawfik1546]

i dont know why but it's saving duplicates on the database

[@galaxies_dev]

Do you perhaps trigger the write multiple times for whatever reason?

[@aishahmalek9363]

Roadmap property is undefined

[@aishahmalek9363]

Where did i go wrong

[@shanKirs10]

This may or may not be useful If the keyword "ionic 4" does not appear in the title it does not come up in the search results. :-)

[@galaxies_dev]

Yeah I'll cover more Capacitor topics in the future!

[@shanKirs10]

@@galaxies_dev Yay !! You are the Best !!

[@neura3964]

dear simon, are you a bear? cause you are gordious. But this tuto don work for me, many errors refused to load the font. edited: it was the version of angular fire. put the latest and it work

[@galaxies_dev]

Haha no I am still human! Glad it works for you now :)

[@liberstudio562]

Great video, but can you be more serious when you make video? Whithout "aaaaa........", " i dont know why this happen"... or something like this?