How to use Native Google Maps with Capacitor and Ionic

what's up simonix and welcome back to a new tutorial this is the third time i'm recording the intro because my voice wasn't recorded but i want to explain it once again today we're talking about google maps and especially native implementation of google maps in the past we've used the javascript sdk for google maps which works on the web ios and android just with the same code but if you want even better performance on native devices there's also the native ios and the native android sdk for google maps and we can use that with a capacitor plug-in from the capacitor community uh we're gonna create this nice little implementation of a map we're gonna create a marker zoom geolocation we're gonna draw on the map so really everything you need for a basic implementation of a map if you want to check out the link to the tutorial right below the video and of course go check out the ioniq academy my place to help you with everything ionic we got you covered with courses templates community keeping you up to date every week on everything ionic so go check it out if you want to get better and faster with ionic but for today let's dive into our video and create a nice implementation of ionic native google maps [Music] alright let's dive into the implementation but we will actually not start here today but in the google cloud platform because that is so exciting no really we need an api key for this tutorial to make google maps google native maps work within our ionic project with capacitor so first step is go to console cloud google.com and create a new project you can simply hit that arrow and click new project select a name and then it should be created within a few seconds make sure you select it afterwards i noticed that it's not automatically selecting that anyway uh what we need to do now is to activate the right sdks and to do so we can go to apis and services and library and from here it will most likely already show you the most popular ones for maps and what we need is this time the maps javascript api that is what you usually enable when you want to use google maps on the web in general which is also fine in ionic apps but we want to use the maps sdk for android and also the maps sdk for ios so go into both of these entries and hit enable from what i know i think i already did this for uh ios uh it should usually just take a few seconds and then you're here i'm actually not sure how you otherwise get into this sub menu but once you're here you can see enabled apis it should display maps sdk for android and maps sdk for ios once you get that in place you can heat over to credentials within the credentials screen we can now create our api key if you click it it will immediately generate your api key um you can just use it from here or you can also restrict it in our example i will just use one api key but for production i would definitely recommend that you generate two api keys and then you restrict it to your android application and to your ios application um that will simply make sure that the key can't be used in any other place on top of that you can also restrict the key right here for specific apis so we could go with maps sdk for android and for ios right here to predict even more i actually don't want to use that today uh i don't want to yeah okay it's a none fine uh so i don't want to go through all of this you can see how to do it here we are not gonna do this uh perhaps if you're not running it on localhost i you might no i think for for your application should everything should be fine i also configured an oauth content screen because i got this warning up here i'm not sure if we really need this for the api keys or if we just need it therefore um i just know a few members of the ioniq academy had problems with that in the past so probably go ahead and click configure you can just really leave this to the basic settings didn't i have like an entry about this right here yeah there it is you can really just leave it to the basic entries you just need to insert your email and a few of these things but really just make sure that the warning is gone in case you encounter any problems now we get to the interesting part which is our ionic application we can go ahead as always with the new ionic application and install the capacitor community capacitor google maps native plug-in let's take a quick look that's not the plugin i was looking for this is the one um within the plugin you will find the status um you will see that basically everything is only developed for android and ios in case you're looking for a plug-in that also works on the web well then this might not be the best choice this is really about using the native sdks for a map implementation on ios and android otherwise you could just use the web implementation that works totally fine also on the device we've used this in the past and in the academy you will see a few of these things are still work in progress but so far the basics are already working now we got our api key and we can configure our application um if you want to follow along everything in this tutorial you can also install the capacitor geolocation plug-in since i wanted to retrieve my current user location with that and you could use it also for tracking the location perhaps not in the background that's a different story i know comments well please tutorial on background location it's really challenging to implement background geolocation or everything anything that runs in the background so that is maybe for the future for today we will just go with this and prepare your native ios and android platforms because we need to configure them let's start with android today first of all we go into our android manifest xml because we need to add this little snippet into the uh yeah application block so just somewhere under application and you should replace this with your own key uh my should be here copy key paste and then we're fine we also need to heat over to the main activity which with capacitor 3 was completely empty and i thought this procedure was meant to be well done automatically by now um but as of capacitor 3 i guess it means still with capacitor 3 this plugin needs to be registered because really i thought that we don't need to do this anymore but perhaps that's only four core capacitor plug-ins but they always worked anyhow uh this is the usual procedure that we used in the past as well so android manifests the metadata main activity register plugin do we perhaps need to import register plugin from somewhere let's not hope for in terms of the permissions for the geolocation plugin we also need to apply something so this is now really just specific to geolocation and not the google maps implementation so let's grab this little snippet here and put it right under the permissions where we already got i don't want any format i can do this myself right here inside the android manifest that's everything for the android configuration now onto the ios configuration for ios uh the only thing we actually need to do is import the plugin and initialize it so in my case i just want to do this in the earliest possible place in your case if you have the map in well let's say some other subpage you could perhaps also do this at a later point of time um not sure if this no this shouldn't normally trigger any location permission because i'm not a big fan of that right in the beginning i just think that should work right here in the app component perhaps keep it in your service related to your map stuff but what i definitely recommend is to use the key from the environment so we don't need to put it there let's just add a new maps key entry in our environment copy over your key and paste it here so now we don't need to worry about that we can just use environment.mapscheme and then we're fine that is basically the google maps um ios implement or the ios configuration but for the geolocation plugin we also need to specify two little entries are within the plis can we directly go to the p list yeah we can that's cool so that is inside ios app app info p list you can either open it from your default ide or from xcode doesn't really matter too much just make sure for the plugin that you insert ns location always you i should really install an xml format uh the ns location always usage description and the ns location no that's not the key always it has location when in usage yeah that's and definitely make sure you're using a decent string not the one like mine you will most likely get rejected with a string explanation for your key like that but in my case i'm not submitting it so i can do it okay we finally achieved the configuration we haven't seen any application so far but that will change pretty soon now let's go into the app setup and can i probably open a preview of my application that would be pretty cool wouldn't it i'll just open xcode and run the application on my device again so probably we're going to see something in the next few minutes uh let's start with the home page the only thing we need in here is a little div element which will host our map and we will also give it a template reference so we can access it later on top of that we need to style this because it has by default no hate so let's just give it 50 our view hate it should look fine also at the same time i might achieve uh yeah i might achieve getting my screen mirrored well well should work in a second and then we should finally see something uh let's for debugging give this a little board up oh that was interesting uh we don't want to hear this that's my focus sound uh border one pixel solid black okay let's do this and then we should be able to finally see a map okay should look somewhat like this you could give it a bit of margin i don't know 20 pixels would that work i have no idea not without a semicolon okay there's our map that's good that's the place where we now want to render our native map implementation and we because we're using a view child so we're using of course the map view child map view element ref we can directly create everything inside the constructor we definitely need to wait until that element is initialized otherwise you would run into a lot of angular errors so we can use the iron view did enter this time and let's create a new function create map because most likely you will somehow put this somewhere else i really like to keep the lifecycle events pretty clear or clean and just perform all the rest in the appropriate functions now first of all we can get the bounding rect from our map view um i no that wasn't yeah i got it once again but i don't have any luck connected oh no that hurts uh anyway uh that should print out the real size of your map view because the problem is we need to pass this to the capacitor google maps create call the create call expects a lot of properties can we take a look at it there we got it um basically all of these and the width is now in the comes directly from our bounding rect that was inside the documentation of the plug-in so bounding right with and hate and basically for the coordinates it's also the same now for latitude and longitude you can do this which will automatically center the map but we don't have any position right now so let's uh remove that you can also specify a zoom let's do something like five that's pretty much the world light mode i'm actually not sure about the light mode let's just remove it for now let's see if that already changes something oh yeah we see something we're focused i don't know where in the middle of nowhere here okay here we go right here uh yeah of course i need to scroll here and that means our google map already works tutorial done goodbye now we want to do a few more things uh what can we do let's first of all try this light mode because i haven't tried it myself light mode i don't know let's say true what's the difference okay that is the light mode damn what's the difference uh light mode false i can't see any difference i don't know perhaps less details uh i don't know maybe it's even still work in progress i will leave it out for now let's remove this this is only the essential even zoom could be uh left out now would start in some kind of default zoom which looks amazing okay that is our create call let's take it a step further and use capacitor google maps and listener we can listen to certain events on our map the first one that we want to use is on map ready uh async and there we go now we could also change our map type um set map style no i wanted to use set map type that's what i want type okay usually we have the normal type uh if you use the normal type i don't want to get that window i want to get that we see the regular uh well the normal map view then we could also use a satellite i hope that's how you spell satellite yeah there's the satellite then we also got terrain return satellite terrain uh in that case we will get a bit different view and that most likely means i have a spelling issue no uh it just looks mostly the same but you should be able to see bit more details right when zooming in right there we go on top of that there's also the hybrid mode which will combine satellite and some streets i would have to dive hello this is not a hybrid view is it it doesn't look to me like a hybrid view definitely used to look different in germany that looks more like the normal view doesn't it hello hmm interesting i i was yeah that looks more like the hybrid view because with a hybrid view you get the satellite plus the streets right in the cool german town of clutzer greetings to caletza and the arc noah hmm that's in germany i never knew interesting what we've learned a lot in this tutorial anyhow ah let's do even more let's now uh call a function to show the current position there we go and let's do this only when the map is really enabled because we don't want to zoom the map into a specific location and can't really do this unless the map is created so within here uh we're gonna start by calling the geolocation plugin does that automatic no of course not i really would like to have the automatic import for geolocation nope not today that was cool uh from the geolocation we can now request permissions first because if you don't have any permission then well then you can't really get the user location um of course i'm not gonna check this in here so i'm just gonna straight dive into getting the coordinates uh if i want to use that i will have to use async in there um normally you would of course check the permissions and if the permissions are not granted maybe it's not even going into the then block and into the error block could be the case as well i will just hope that we only go into this block if we get the permissions but now we can grab the current position and with the coordinates that i can lock but can't really show maybe if i use safari to debug well this is going to blow up everything or it's going to just crash at that all myself or it doesn't even show any kind of log that is also a valid a very valid yeah really thanks for nothing safari really you're useless well with the coordinates that we hopefully got at that point uh let's once again call a plugin and call at marker because using marcus is usually something most of you want to do and for the marker we need a latitude l and a longitude which comes straight from our coordinates that we hopefully got at that point and a title and a snippet um that will show below the coordinates on top of that now let's hit save and check it out first okay there's my marker i can click it there is my castle of loneliness great but perhaps we also want to focus the camera so we combine this now and also use the plug-in again to call set camera and we want to set the camera exactly on this place we want to zoom in a bit more and because it was confusing me a lot we need to change the bearing that is i think well it's useful for driving so you always see the uh street on the map view in front of you and not not south west or whatever really confused me a lot in my application so now the b ring is definitely here there should be in north of germany right and we see we are zoomed in i can still use that to find my castle of loneliness uh and that's how you create a marker of course you could create multiple markers you can remove the markers just like you're used to from the previous implementation of our capacitor firebase map tracking tutorial now two more things that i just wanted to show you are no specific functionality in this tutorial but definitely good to know let's create a draw function and most important make that button expand full and within that draw function we want to create a line between two points and that works exactly like this you can add the interface as well i just used two coordinates here in germany and then you call at polyline you pass in the array of your points and then define all the other stuff uh really the best way to figure stuff like that is out is going to the definition and then seeing okay these are all the options i could pass what does a lang interface look like really just dive into those definitions i i rarely need the documentation if i can get into these that's also where i found this well let's talk about that in a second and let's see our drawing in action so i press draw and it creates this nice line straight from my hometown to somewhere in denmark if you're from that position in denmark please contact me you get one month of the ioniq academy for free if you're living in finch off okay that's the drawing aspect and of course you can draw a lot more like the user is moving and you create these little lines that we used in the previous tutorial finally as we've already seen in the beginning where we listen to the unmap ready event we can listen to a lot of other events we've seen them right here the tab drag edit tab did tab whatever and i just want to show you an example of one additional click handler so let's put this i don't know somewhere here and it looks like this did tap on place of interest with place id you would then get the place id and the information let's quickly for this inject the alert controller and then let's hope that the places of interest are showing up on my map yeah there should be something um can i click this yeah apparently the alert is behind the map that is interesting uh i haven't seen that can we how do we change that now my hybrid map view is gone that is interesting as well okay there seems nothing to be of interest here okay there's an animal park i either can't tap it or i'm just not it's just not interesting enough for google um not sure what the problem here is but definitely i was able to catch that event and display something uh the alert for whatever reason is hidden but i just wanted to show you that you can have specific or different uh event listeners in place um i just want to do this one more time i definitely want to see this um can we go back to something here interesting i would have to debug this you see the alert is somehow coming up but the google map is still in front of it we also don't need the margin and index anymore we can just cover the whole view which makes it look a lot better and now we got even two maps because we're great developers anyhow the basic usage works i've just destroyed it now in the end to show you a few of the other things like listening to other events um creating a polyline there's definitely more to this plug-in you can somewhere check it out inside the capacitor community give it a star like i did just now and follow all the other things if you're interested in more of these like the street view launch urls events are still a bit work in progress so there's coming more to this in the future but so far i think the implementation was pretty easy even the configuration and i'm sure you're gonna enjoy uh the increased performance of native google maps in your ionic apps all right and that's it for today i hope you enjoyed this basic example of using the native google maps implementation i think it's pretty easy most of this was really the configuration of our google project the apis the api key but once we got to the ionic application everything was pretty easy we can follow the documentation of the plugin we could just inspect the interfaces for even more functionalities and how to use them and we've seen that we can quite easily combine it with something like the geolocation to focus on a specific user location we could now also use the google direction servers to get directions i don't know exactly how we can draw a route on that map perhaps that's something that we might cover in the future we've done this with the js sdk and the js implementation in the past so uh perhaps i've just not yet seen it inside the documentation for that plug-in anyway once again if you want to check out the code link below the video and definitely make sure to subscribe to the channel and hit the like button so you get notified about all the upcoming ionic videos you know every tuesday this channel i hope you all have a great week with ionic and this capacitor plugin and i will catch you next time so happy coding simon you

Channel: Simon Grimm

Views: 6,029

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, ionic google maps, ionic native google maps, capacitor google maps

Id: WCexAdxVkVw

Length: 26min 40sec (1600 seconds)

Published: Tue Sep 07 2021