Android Google Maps with Jetpack Compose 2023

in today's video we are going to be working with Google Maps and compose so I'm going to show you how to add the Google Maps SDK to your Android project how to use a Google map with compose so bringing up a Google map and doing some stuff with it and I guess more specifically what we're going to be doing with Google Maps is I'm going to show you how to use clustering so these polygons that are outlined on the screen is they're called clusters you can kind of Define like an area and you know shade it in and you can add a marker to it so each one of these sort of zones has a marker if I click the marker it takes me over to that zone display some information so there's like a Title Here a description there's a marker centered in the middle of it and we're also going to be showing you how to show your your location so there you can see that blue dot that's defined in that zone that's my location that is my house go ahead send me some care packages some cash is always welcome gift cards it is Christmas after all the holiday season don't forget to send coding with Mitch a gift and say thank you for his great videos that he always provides additionally I wrote a little algorithm that will Center the camera depending on what is available for the clustering so you saw there when the app started it right away brought the only two zones that are in View and and kind of centered the camera on them it's just a little algorithm I thought it would be super useful because if you define a bunch of things on the map you probably want the user to see those things as soon as they open the map so just wrote a little algorithm that basically takes in all of the points and determines um what the center point of the sum of all those points is so kind of a cool little thing and what else did am I going to do in this video we are I guess that's pretty much it the bulk of the video is going to be you know the Google Maps SDK setup there's quite a bit of things you got to do you got to you know enable billing create a project in the Google Cloud console all that kind of stuff get an API key I'm going to be going over over all this in detail and in addition to going over this in detail I created a nice readme so that you can follow along if you don't want to watch the video but you're already watching the video so you're probably going to see everything you need by watching this so if you go to the repository there's a link down below as always if you go down to the Google Maps SDK for Android setup section basically I'm going to be going through these steps so it's like creating a billing account creating a project adding the Google Maps SDK for Android dependencies the API key all that stuff basically the bulk of this video is probably going to be that setup because I think that's the most complicated part is kind of finding the documentation and consolidating it and making it easy to follow so that'll be the bulk of the video and then I'm not going to go over the code in detail but I'm just going to show you kind of the highlighted Parts uh the new apis that are available for compose because I've I actually use Google Maps with compose about a year and a half ago I have actually a um an app on the app store called BC Hydro outages where I basically did a lot of the things that I'm going to be showing you in this video you can take a look at some of the pictures here so you can see there's like zones it's a power outages app for the province that I live in but it was way harder to do about a year ago because there wasn't these new apis that make it a lot easier to use compose uh use Google Maps with compose so I'm going to be showing you these these new apis all right so let's get started here let's go to the readme for my repository and click the first link here in step one that takes you to the billing section of the Google Cloud console now you need a billing account and you need a credit card on the billing account but you won't actually be charged well you won't be charged unless you unless you go above the daily request limit if this is just a practice project for you you're not going to go over the daily request limit so you won't be charged don't worry so go to there and you will need a credit card I don't know if I mentioned that but again it's not going to cost anything you can see my other uh you know demo billing accounts here are all being charged nothing I use these to make examples and things like that and if I'm not being charged probably you're not going to be charged if you are just you know playing around with this okay so creating a new billing account is pretty obvious you just go to create accounts uh you know give it a name give it a country click continue I guess I'll just go through the process here uh so creating a billing account I'm going to blank out my information here because I don't want you to see my uh address but basically just fill this out and uh then scroll down and there should be a submit an enable billing button so just click that and you should be ready to go once you do that we're ready to go to the next step so I'll close this and you want to create a new project in the cloud console so click this link and we need to go up here and you want to create a new project so click that just go through it I guess I could click it and see if there's anything special so create the project name click the billing account that you just created organization you don't have to have the one of those I don't think although there is a required so maybe you have to create an organization although no organization is an option so probably just click that once that is done let's go to the next step now we need to enable the Google Maps SDK for that project so clicking the next link go to the marketplace and type in Android Google Maps once you find that you want the maps SDK for Android click this guy this manage button is going to say enable so let me create a project where I don't have it enabled just so you can kind of see so you want to click this enable button it's going to do some stuff and now that it's enabled the next step let's see here is you need to enable billing so I think you gotta click this or something because you need to be able to enable billing on this thing okay let's go over to billing I guess I can't remember how to do this you have multiple billing accounts oh I already have a billing account linked to this okay so I think if you don't have a billing account linked to this this project it would have prompted you at some point to enable billing so all you want to do there is just click that billing account that we created at the beginning of this whole example and enable it for this project anyway do that enable billing and you should be ready to move on to the next step so next is we need to enable Google Maps in the cloud console and specify and specify Android apps and generate a sha-1 so again it didn't show up for me because I've already done it so that's annoying maybe if I go to enable apis and services no credentials maybe I think if you click here and then you can write go here so I'm going to blank out my API key obviously I don't want you using my API key but click the Android apps over here and restrict usage to Android apps and what you want to do here is add a Shaw uh sha-1 certificate so to generate a Shaw one certificate I'm going to open up my Android project here go over to Gradle and go to Tasks Android and signing report if you double click that it's going to run a task and it's going to generate shaw1 for you and then you just want to copy that thing so as soon as this is done scroll up you can see it generated a Shaw one so I want to copy that shot and then click add and then add that shell one fingerprint and you'll also have to add the package for the Android project so you'll need to create an Android project ahead of time so you have the package and then you can generate a shot one once you do that I think you're pretty much ready to go other than the API key stuff so if we go to to the next part you want to add the dependencies now it's always a good idea to add the same exact dependencies that I use in my project that way you're guaranteed that all the versions aren't going to have any conflicts because it worked for me so using my versions is always the best idea although if you want to update to the newest versions maybe you your you know watching this video a year later from when I made it and there's a bunch of new versions that is a gamble that you are going to take so I can't guarantee that it's going to work but if you want to try the new stuff and figure out the conflicts be my guess but if you want to work for sure use the dependencies that I use so go to my build.gradle project file uh just basically copy everything that I have in here note that this dependency right here the the secrets plugin this is used so that we can this is needed so that we can add our API key to the local dot properties file in your Android project so let me just go and show you what that is if you go down to the local dot properties file again I'm going to blank out my API key here but so you can add the Google Maps API key to your local properties file and then you can reference that in your manifest so if we go over to my manifest notice that I've added this metadata tag and it's referencing that Google Maps API key from my local dot properties file so just wanted to make sure I mentioned that that's what this plugin is for so copy everything here that I have in my project build.gradle file and then move on to the the app level build.gradle file and again always a good idea to copy everything that I have to make sure that it works so the same plugins the same same you know compile SDK Target SDK everything here kotlin version that's very important if you have the wrong kotlin version a lot of these dependencies will have conflicts so using the correct kotlin version is very important basically use these same versions and it will work for you if you don't you are opening yourself up to problems which be my guest so once you've copied all the the dependencies to the project build.gradle the app build.gradle now you want to add your API key to local dot properties so where's your API key you might ask well that's over here in this section again I'm going to blank mine out but just you know click this copy to clipboard and then what you want to do is go over to that local.properties create this constant value Google Maps API key or whatever you want to call it doesn't matter paste in your API key here and then go to your manifest and add this metadata tag inside of the application and reference that Google Maps API key now I think the last thing we got to do here is actually just go to the Manifest and add access find location and access course location so you can copy those go to the Manifest paste these up above I don't think you actually need course location I think you just need find location but you can add them both just to be safe and the last step here is if it's not working go watch the video that you are watching right now and maybe I missed something I don't think I did I'm pretty sure I went through all these steps and those are all the things that are required so now once you've done that to your project you are ready to get started so now what I'm going to do is I'm not going to like write all the code out on video here but I'm just going to show to sort of uh highlight things that are of importance and you can go take a look at the code yourself you can see you know there's not a lot of code here there's one activity you know an application class just because I'm using hilts one state class I have a view model that's relatively simple and then there's kind of the more complicated stuff I think is in here so like setting up how to set up the clustering that's that's probably the trickiest part so let's start by taking a look at the activity so I have an activity we of course have to use the activity for result API to ask for the user's permission when the app launches I'll actually just do a demo really quick I'm going to uninstall the app and I'm going to reinstall it to show you that it's asked permission oh actually something else that's very important if you go to the Manifest notice here I have allow backups false so what that's going to do is if the user declines a permission twice the app will never ask them again for that permission the user will have to go into the manually go into the set settings for the app on the phone and enable or disable the permission uh if you even if you uninstall the app and reinstall it the app still will cache those files and remember that the user declined the permission twice and will never ask them again so even through an uninstall that's the key Point here but if you set allow backups to false if you uninstall the app and reinstall it it will those I guess preferences are wiped so when you reinstall the app it will ask them the permission again I think this is always a good thing to do when you're in development because um you know you can always test the permissions in a fresh state so setting allowed backups to false if you uninstall the app reinstall it it's going to ask the permissions again even if they've declined them twice so just wanted to mention that okay so I just uninstalled the app now let's reinstall this thing and I'll show you the permission screen so as soon as you you run the app it asks for permission and this is for the the access find location so I'm going to click yes for uh when you want to use this app and then you see that little blue dot up here because it's now accessing my location so that is the requests API here that's at looking for the access find location permission nothing sort of fancy here we have the Fused location provider client this is the the API that's needed to get the user's location I have a ask permissions function which just kind of kicks off the permission asking process and then we have a composable and and map screen so let's go into this map screen you can either click over here or control click or command click if you're on a Mac and take a look at this thing so it takes in the main State the main state is very simple it just holds the location and a list of cluster items we'll talk more about those later so now how do we use Google Maps well it's very simple now all you need to use is use this Google Map composable the Google Map composable takes in a whole bunch of different properties basically a lot of these things are like handling clicks um setting certain uh properties to the map so you have like this map properties object map UI settings object I'm keeping it super simple in this example you can play around with those if you want but basically all I'm using here is a map properties object and it's very this is actually very important is my location enabled if you haven't accepted the axis fine or access course location permission this will throw an exception so that's why here I'm referencing the state and saying if the last location is not null then this is enabled and the last known location will only be not null if they have accepted that permission so if we take a look at the view model and we look at the get device location function it takes in that Fused location writer client that I talked about earlier this will get the location it starts a request to get the location and once it does successfully then it sets the last known location to the state so only if there if this is able to successfully get their location the last known location will not be null and therefore the map properties will set is my location enabled uh to true so kind of just that's a pretty important thing here to not don't enable this unless you have the permission accepted so scrolling down we just you know set those map properties you can manipulate the camera view position using this remember camera position State and I'll take a look at that down below a little closer I guess we'll do that now before I talk about the rest of this in here so if you this is how you want to manipulate the camera State you can do remember camera position pass it into your Google Map and if I scroll down here you can see I'm using that camera position State and I can call animate on it there's a bunch of other ways you can move the camera too like if I look at these functions you can go Center on location I guess those are the only two actually but you can do Center on location or uh or or there's move so there's three actually there's animate Center on location and move and they all are you know slightly different ways to move the camera animate is the best one I think because it will it it moves the camera you know it animates the camera over to the position as opposed to just like snapping The View over to it I think that always looks much nicer obviously and then the the way that you update the camera is also a bit optional so if I do if I look at let's just do camera update Factory here and take a look at the options we have a new lat Lang Zoom so new latitude longitude Zoom you can set bounds you can set the position just different ways to move the camera the one that I chose to use is new lat Lang bounds because in the app that I made here when you start the app it will automatically Center the camera on all of the on all of the polygons that are on the map so using lat laying bounds was just the obvious choice here but there's lots of other options I also added another example down here if you want to Center on a specific location so I'm not using this function you can see it's not being used but I just want to add it here so that you had another example so before I go back and I talk about this map effect stuff I think it's probably worth talking about the this function here calculate Zone View Center so this is something that I made if I go to the activity where this function is invoked it goes to the view model what it does is it it gets all of the points of all of the polygons that are all the points that make up the polygons on the map so you can see here like it would take that point that point that point that point it takes all the points that are defined by the polygons and then it uses those to calculate the optimal View for the camera and this is just a little algorithm that I wrote so if I click into this thing it's you can read through this but it's pretty complicated it's just a lot of math here but if you want to take a look at it go ahead or just use it just use it in your projects and don't worry about how it works that's always a good choice and then it you know gets the center of the polygon given those that camera Viewpoint so pretty cool little thing that I just added here always nice to be able to Center the camera where the user should be looking at as opposed to making them like move it manually okay so last thing I want to talk about here is the Google Map so this is kind of the the bulk of the changes remember the beginning of the video I said that I I had done this in a personal project about a year and a half ago and it was much more difficult much more complicated to do because this Google Map composable didn't exist this map effect thing didn't exist I can actually show you what I previously had to do so yeah well actually it's not that much more complicated the Google Map portion but the the map effect is is much nicer I'll talk more about that later but yeah basically you had to use an Android View and pass a map view into it and that's actually what the Google Map does under the hood so if you take a look at this thing it still uses an Android View and passes a map view it just makes it easier for us it's just a nicer API to work with and the map effect I think though is the biggest win for us because previously what you had to do if you wanted to use clusters the cluster manager requires a Google map object so if I take a look here at my cluster manager it requires a Google map object and to get the Google Map object that was not easy so that's what this map effect makes easier if I click into this it gives us the Google Map object which is beautiful and then I can build my cluster manager which is the thing that's required to build these clusters the cluster manager is the thing that manages all the Clusters it's a pretty obvious naming convention I think so like this is a cluster and this is a cluster and the cluster manager is how you cut it's like the the way to highly customize your map you can add custom map markers you can add uh the polygons there's lots of other options this project is very simple so all I did was add you know some markers with some info and some polygons but there's also other stuff you can do like custom images for the markers so pretty simple to set up um basically what you need to do I guess let's go through that whole process of how to set up a cluster manager so the first thing is you need to Define some kind of cluster item so I created a data class called Zone cluster item it will extend the cluster item class the required fields are these override Fields so we need to be able to get a snippet although I think you could probably just return like an empty string a title so let me just pull up the app to show you so that's the title zone two and then the the description or the snippet is this is zone two that's what these fields are and then position is where is this thing going to be so you can see here that I get the I use the polygon options which is what is used to define the area of this polygon and then I get the center of it and that's you know where this marker is going to live so you need to create a data class called Zone cluster item that extends cluster item basically that's the punch line and then you need to create a Zone cluster manager this is a very simple one the required parameters are the context and that Google Map object that I was talking about earlier you specify the type so use that that object that you created that that extends cluster item and then you pass in the uh the parameters the context in the Google Map that's basically all you need to do to get you know working what I have here and then you just need to create those cluster items and and create the manager which I'll show you next okay so creating the cluster items let's go into the view model so I just added them to the state which makes things really easy remember in our main State I have a list of Zone cluster items which is those custom items that I built here and we you know just create a cluster item we have an ID a title snippet and then this polygon options parameter so this is how we create those boundaries so you basically you just add points so I added some latitude and longitude points the way that these points are oriented is it goes from left to right so counterclockwise so if I zoom in closer on this thing because you can actually uh there hide the marker you can actually see but there's a point here a point here a point here and point here so that's the Four Points you don't have to have four points you could have 10 12 100 points it doesn't matter I just used four because I thought it was easy so point one this point here is this one and then it moves in a counterclockwise way so 0.2 0.3.4 and just you know basically just counterclockwise that's the most important thing and then you can add a fill color so I added a red fill color and that's pretty much it pretty simple and then I created the secondary cluster item which if I zoom out you can see over here and if I click it you get that information or actually sorry this one is Zone one and the other one was zone two you can see if I click on there maybe I gotta click on my phone there we go so that is generally it it's not that complicated it's much better than it used to be you can see here the map effect takes in a key value and I use the cluster items from the state as the key so if um you know if you were to add more cluster items like say you were to make an API request that API request pulled down more uh more latitude and longitude points for those polygons that would mean this would recompose with those new cluster items it would create a new cluster manager it would you know set the clicks and then add the polygons to the map and I think that's a pretty good way to do it the last thing I want to talk about is there are some gotchas with this new API so with the new Google Map API there's an example here so I've added a marker window and this is actually talked about in the GitHub page so you can go and take a look at that if you want but some of these things don't work so the marker here will actually show and it's on my map if I zoom out and I go over to this marker it actually is there but if I click it like I'm clicking it right now and the info window doesn't work and you can see here that this log is not going to print so I can see there's nothing being printed the log even though I did click that again I also have draggable equals true if I try and drag it that doesn't work basically these don't work but that's okay because as I've shown you in this video we can use the you know cluster manager The Zone cluster item and we can add markers that way so it doesn't really matter it just means that this doesn't work but we have an alternative we can use the Clusters and if you just want to add a marker with no polygon like say let me see here if you pull up the app and say you wanted to add you know just add this marker and you didn't want to add the polygon that's simple you just go into the view model and get rid of these polygon options if you don't have the polygon options then if we go to the map screen or basically just don't do this if you don't add the polygons then there won't be any any any shape it's just going to be a marker so if you need to add a marker you can still do it there's just a more there's more steps involved so that's gonna be it for this video of course down below there's a link to the code code is always free it's on GitHub I know I just kind of went through the code here I didn't actually write it out so you definitely should go take a look at the code if you're interested and you want to use Google Maps in your composed project and before you go don't forget to go to codingwithmich.com check out my website if you want to support my channel support the videos that I'm making here these free videos go ahead and check out some of my paid videos If you think my free videos are good imagine what my paid videos are like go to my go to my website create an accounts I got tons of courses on here you can go to the courses section my most recent course is a gift building app this app is a ton of fun hey why not show you an application demo of this course so what you can do what you do when the app launches is you can choose a a screenshot let me Crop this thing and we can make a gif we can make a gif with the deal with it sunglasses is so I'm going to resize this thing hit record Slide the sunglasses down onto my face click end and what it will do is it will build that gif and we can optionally resize it and we can save it to the internal storage of the phone and what would you do with a gif like this you might ask well what I personally like to do is I like to go to my company slack where I work at Square I like to steal people's profile picture and anytime they do something cool like you know posting in a public Channel and say hey I just merged these cool changes or whatever I like to make a gif out of it and I comment on what they said with the cool sunglasses sliding down I love it it's laughs every single time you know also commenting on pull requests reviewing pull requests anytime somebody does something cool adding that gif I love it guaranteed laughs every time now I can't show you my company slack but what I can show you is my private Discord channel so if you want to see an example this is what one will look like here's me with the sunglasses uh you know coming down onto my face this GIF was produced with the app that you build in in that course but that's not the only course I have I got tons I got all kinds of stuff modulizing Android apps very popular course shows you how to create multi-module Android projects with clean architecture and tons of new stuff call in mvi compose Hilt SQL Delight which is a caching Library actually built by square ktor which is an alternative to retrofit unit testing UI testing all kinds of good stuff I have a kotlin multi-platform mobile course you know actually fun fact that app that I showed you in this video BC Hydro outages I actually built this with kotlin multi-platform mobile I have a iOS client and an Android client they share the business logic and I've I've had this out in production for about a year and a half now and I've had zero problems with it so it's going quite well lots of good stuff here lots of courses I even do some web stuff if you're interested in you know learning some web development I built my own website codingwithmich.com if you didn't know that it's built with python Django JavaScript lots of cool stuff this course in particular that I'm highlighting here is real-time chat messenger so I'll show you how to build a real-time chat website using sockets in Python lots of good stuff go to the website check out the courses there's you know tons I've been doing this for years people lots of good courses here go check it out as always thank you for watching and I will see you in the next video

Channel: CodingWithMitch

Views: 17,611

Keywords: android google maps, android google maps 2023, android google maps jetpack compose, jetpack compose google maps, android compose google map, google map jetpack compose, google maps jetpack compose android, android clustermanager, google maps clustering android

Id: hhSTYK7I78c

Length: 28min 15sec (1695 seconds)

Published: Thu Dec 29 2022