Google Maps | Jetpack Compose | Tutorial | 2023

hello and welcome back to my channel in today's video we're going to learn about Google Maps and how you can integrate it with your jetpack compose application so we all know that Google Maps plays a very crucial part in the modern applications that we use day-to-day and especially the applications like food delivery applications and applications for commute we have seen that it is a very crucial part of it so we will see how we can set up Google Maps for the jetpack compose application and I will also go through some of the cool features that it provides so these are not the only features that it provides a lot of other features I will provide you the documentation and the resources of those in the description down below feel free to check it so yeah without further delay let's get straight into it so first of all let's see the demo of the project and I will go through the walkthrough after that so this is the end result of the project as you can see there are two buttons at the top the first one is to change the marker so by default this is the marker that it provides so if you want to add our own marker you can do so so for demonstrating that I have added this button so if I click on this it will change it to a custom marker if we click it back it will change it back to the default marker now as you can see here is a drop down option so this is basically for setting the type of map that you want to display so by default the map type is normal Google Maps but there are as you can see four other types as well none satellite terrain and hybrid so if I choose satellite it will change the map type to satellite if I choose studying it will change it to Terrain if I choose hybrid it will change it to hybrid and for some reason if you don't want to show the map at all you can choose now so let's change it back to normal yeah so apart from these two features I have added a couple of more cool features you must have seen the line that is drawn on the Google Map when you are trying to go from one destination to other destination right so for doing that we actually need something called directions API but that is not the scope of this particular project we are just using the maps SDK so but we will see how we can draw that line as well as calculate the distance between two different marker points okay so we are going to use something called polyline for this so for example if I click let's say somewhere here a marketer will appear as well as another drop down option which is asking us to select the type the line type so if you click on that it will give you an option called polyline if you choose that you can see it will give you the distance in kilometers at the bottom okay now we can add we can create a further functionality using something called polygon so for this we use something called polyline but there is another functionality called polygon which can also be used for calculating the surface area as well as displaying a surface area okay but for doing that we need more than two marker points so let's say if I add one you can see it displays only polyline option but if we add another marker point it will display polygon option now if you choose that it will draw the area and fill it with green color as well as it will show the total surface area between these three marker points right you can click on clear and it will clear all those things and you can perform the other tasks as well okay so that is pretty much it that is pretty much the scope of this particular application so let's um so let's see how we can achieve this first of all we need to set up the application so let's get into it we're going to use this particular compose as you can see that my compose already provides us with something called Maps compose okay I will provide you the link of this particular documentation in the description so for doing this we need to go through a couple of steps okay so let me just uh tell you what needs to be done so first of all in the Gradle build we're going to add a couple of dependencies so these are the dependencies that needs to be added we are adding Maps compose dependency we are adding the Google Map service dependency as well as something called Google Maps utils dependency okay so this is required for the maps composed that we're going to use these are required for the map Service as an apps name suggests and the last one is for the utility functions that is provided by the Google Maps for example in our case we're calculating the distance as well as calculating these surface area okay once you have done this once you have synced the project we have added the dependencies but that is not it we need to provide an API key for this as well okay so for doing that um you have to go through this particular page which is basically the Google Cloud console page if you don't have any applications before if you don't see any applications here you just need to create a project so once you click on create a project and provide the required information it will provide you with an API just keep that API with you that is required and after that we will go to this option which says apis and services and we go to library Android manifest and we need to add a metadata tag okay I have added my API key inside the value but you need to add yours over here okay once you've added this meta data we need to add the permissions as well we need to add the access find location as well as access course locations these both permissions as well okay so once you have added all these things we have basically set up the project to use the Google Maps compose as well as Google Map service now let's get into the actual code where we will use those compose as well as the launching for creating this entire project so this is instruction and following for the project uh you can structure it according to your needs but I've created a models package apart from the by default UI package I have added two more packages I have added a models package in a YouTube package model is having an even class for defining the line type that is polyline and polygon you can change it to a different name it's totally up to you and apart from that we have added three different files for the different composables inside the UI and in the util baggage we are having a util file for all the utility function that is required and finally we have a mean activity so in the main activity is the the initial activity is the initial file that will be called so let's start from here so in this particular activity we are just checking if we have the required permissions or not and if we don't have or if we have we are calling different composables accordingly so let's see how we are doing this so first of all what we are doing here is we are handling the state of the permissions so we are calling a function called check permission check for permission so if we open this it is basically a function in the util file where it is checking if we have all the required permissions or not okay we required the access find location as well as access course location so this function is basically returning if we have the permission or not so if we have the permission we are calling the map screen composable and if we are not having permission we are calling the location permission screen composer okay so for the very first time if the app is installed obviously we won't be having the permissions granted so in that case this particular composable will be called okay so let's see how it looks like and I will go through the composible Accord side by side so let me run the application I have already uninstalled the application so let's say if we install it for the very first time because since the screen that we are getting this is basically the location permission screen this is the composable for it and this is the call by function inside it so inside this particular composable what we are doing here is what we are trying to achieve is that we are going to click this button which will open up the permissions dialog asking us to provide all the required permissions and once that permission is required we will display the map screen composable so how we are doing that is that first of all we are creating a contract which basically takes in all the permissions that we want to uh Grant or that you want the permission of and it will once the permission is granted it will check if all the solutions are granted or not and if all the permissions are granted it will call the on permissions granted callback so to reiterate what this will do is it will just this is basically a contract which takes in the array of permissions required to be allowed and it will check if all the formations are granted or not and once those permissions are granted it will simply call the Callback function now this is just basically the initialization of the contract we are not actually calling the contract we are not actually launching the contract on the permissions dialog here itself so what we're doing here is that we are having a column composable we are having a text we're having some space and then we are having a finally a button composible now this button composer will actually launches that contract it passes the required permissions that we want the user to Grant and once that is passed once we are calling this launch function by passing the array it will open up that dialog asking us to provide the permission for it so for example if we click on this button as you can see it says that Google Maps which is the earning of the application that I have given is trying to access it requires these permissions so if I choose by using this application now what happens as soon as I click on this button it basically means that I am granting the permission so as soon as I'm granting the permission it will run this logic and check if the permissions that I want are granted or not if all those functions are granted or not so if I click on this it will check for all these permissions and since I have granted the permission it will call the Callback function which will come which will trigger this block in the main activity and we will change the multiple state of this particular variable which was handling the state of the permissions to true now since we have updated this to True which was false by default because we didn't add the permission earlier now this block will be triggered as this condition is true so we it will open up the map screen composible so for this compostable we are passing the context so now this is the uh you can see you can see this is the framework or this is the outer composable for our map okay so we are using uh another composable for the actual map that is called Mind map but this is the wrapper around it okay so we are passing the context to this particular composable now here we are defining a couple of mutable States the first one is to show the map second is to handle the location Third is for the map properties for this for the change icon fifth is for the line type okay and we will see how we are using all these beautiful States down below so once we have opened this once all these things are initialized what we are doing here is we are calling a get current location function now why we are calling this is because you want to get the current location right we want to get the current location so that our marker will be marked on the current location so this is again a utility function which takes in a context so if I open this up you can see it is taking a context and it is having a callback a Lambda function which is returning the location which is called a location first now over here what we are doing is we are defining a variable of type lat long and we are using something called get fuse location provider client which will basically provide us the last known location of the device now to get the current location there are multiple ways we can use GPS we can use Network there are number of ways to do that like mainly three I would say GPS Network and using this fuse location provider client so the simplest way is to use this just keep this in mind that let's say if you're using this app on a very new device where we don't have any record of locations recorded by the device itself for example it is very brand new app you haven't opened up Google Maps or you haven't used the map service in any of the applications before then this won't return anything because it Returns the last known location okay just means we'll have to keep that in mind if you have a use case we where you want to get the precise location or where you want to get the current location from the GPS or network there are other ways to do that you can simply Google it it is very straightforward you can do that too at the end it will just simply return at lat long value of your current location okay so let's see how we can use this at fuse location provide a client to get the current location so I have to find a variable by initializing it with this now we are calling the last location on this particular object and we are adding a success listener to it basically if the if the last location uh is successful if you're successful to receive the last location it will release it will return a value and it will not return null so if it is not returning null what we are doing here is that we are updating the loc variable which is of type lat long with the return latitude and longitude so it returns a location which is having a latitude and longitude value to it we're just updating it we are just creating an object by passing those values and updating the loc and we're calling the Callback function you can also had an on failure listener and log it to see what if there's any error or not so this is pretty much it and this function will return you the current location so this as I said before just keep in mind that get fuse location provided client Returns the last known location okay okay so once you have called this function once we have received this what will happen this block will be triggered and this block will be triggered and it will update the location variable which is this by default I have provided it has 0.0 and 0.0 you can keep it as single or anything it's totally up to you so what happens is once you have received the value we are updating the location and as well as we are updating this flag which is called show map group why so because it will take some time right it will take some time because it is in this it will call that function it will listen to the result and then it will call the Callback function which will trigger this block so we can display a certain text in the meanwhile so let's say if I real in the application you will see there is a small text appearing at the top with cs loading map so this loading map appears when the show mapped value is false which is this part so basically it means that until and unless the stroke map value is true we are displaying the text loading map and as soon as we have received the current location we have updated the show map flag it will trigger the my map composable now this my map composable is the actual Google Map with all these buttons and everything that's at that you are able to see now this map takes in a lot of properties inside it now you can dissect it you can bifurcate it you can make it more modular it is totally up to you it is this is just for the sake of understanding and learning so we will provide the context we will provide the latitude and longitude instead of doing this we can just simply instead of writing lack long we can simply write hello location here same thing okay um we can have to provide the map properties line type change icons basically all these are properties are those properties which is going to be used for the features that we're going to add to the actual map so map properties is basically handling the map type line type is basically the polyline polygon functionality change icon is basically the custom marker that we want to change to a different icon okay and apart from that we have a couple of callback functions so we need to know when a certain button is getting clicked and accordingly we have to update the mutable state of the above variables so for example if I clicking on custom marker this callback function will be triggered and we are updating the change icon from uh which is basically false to True okay I have hard coded the icon for now but you can ask you can also pass the icon you can also pass the icon any sort of icons to this particular composable so similarly on change map type is triggered when you want to change the type of the map we can choose a circle a certain map type it will return that map type and we are updating the map properties which is by default defined as simply map properties with all the default functionality with all the default parameters you can call it like this or you can do a copy function and do this both will achieve the same thing okay and do either of these things similarly on change line type is also a callback which is triggered when we are selecting a line type if we select polyline this will be triggered and it will pass the line type as polyline and it will update the state of line type which is again passed in the property therefore it will decompose the my map composible all these places where we are updating the state and passing it to the property as soon as either of these states are updated it will decompose the composable okay so let's see what's inside the my map composable so inside the my map composable there are a couple of beautiful states that I have declared so the very first one is the list of lat long objects which is basically going to store the uh the latlings of the markers that we add upon clicking on the map then we have a couple of states for the drop down so the first two is handling the state of the map time and the next two are handling the state of the line type problem okay so one is handling the expansion or basically the display of the drop down the other one is handling the text that is displayed on the button respectively in both the cases okay so as you can see what I'm doing here is for the map type by default I am showing it as normal capitalizing it this is basically a extension function that I have added similarly for the line type what I'm doing is if it is null I am displaying it I'm displaying the text as line type and as soon as the user chooses a certain type it will uh change it accordingly then we are defining the camera position state which is basically going to take the lat long of the uh the current marker as well as the zoom level so if you increase or decrease the value of this it will accordingly zoom in or zoom out so the default uh camera Position will be handled by this camera position state so for example if I make it as 5 F by default the camera will be zoomed out okay so you will see that it is it is now zoomed out okay so you can choose it accordingly you can try to change the values accordingly now after that what I have done here is that I have added a box impossible because we want to Overlay a couple of composables on top of one and there so the first one is the Google Map so this is the actual composable that we have Android dependency for which takes in the camera position state that we have defined here which takes in properties it also takes in lot of other things if you see if you hover on it you will see that it takes a lot of other positions utilize settings Interstate State uh change listener lot of things are there okay you can go through it and you can try to add values to those perspective properties as well too okay apart from that it also provides a call back on map click and it provides a Lambda function which Returns the lat long of the position where I have clipped okay so as soon as I click in anywhere on the map this particular Lambda will return by the last one of that particular position where I have clicked for so what I am doing here is that antenna unless the line type is that is I'm not I haven't selected any line type until unless that I am updating the lat long list by the lat long that is provided on the click on the map so as soon as I click here now the lat long list will have three values the first is the default Latino second will be the click that I did over here third will be the not long at this particular position now to display the marker what we have to do is we have to iterate through the lat long list so I'm entering through the lat long list and I'm calling the marker composable which uses the mark state which takes in the position that is the lat long to actually display the marker and that particular lat long position it also takes in a couple of more properties title and snippet basically if you click on the market this is the title this is the snippet you can change it accordingly and the icon so icon is basically the marker icon so what I'm doing here is that if the value of change again is true then I'm updating it with the custom drawable if it is false I'm just passing menu so now will basically display the default marker but this icon takes in something called bitmap descriptor okay so to create a descriptor from the drawable I have created a extension function which takes in the resource ID it converts to a drawable which converts and then converts to a bitmap a canvas and then finally a to a bitmap descriptor okay so once that is called it will return back a bitmap descriptor object and it will pass to the icon so as soon as I click on custom marker it is basically changing the value of change icon to true passing the reliable to this function which is returning the bitmap descriptor and passing it to Icon if I again click on default marker it is single back to false now this particular logic of true and false is handed over here as we've already discussed okay now after that uh inside the map itself uh we are going to display the poly lines and polygons so for doing that I am just checking if the line type that I have provided in the property is it polyline if it is then we are calling the polyline composible and passing the lat long list and defining the the color of the polyline and if it is polygon we are passing the lat long list as well as the fill color in stroke color and this rock width this also has a lot of properties as you can see you can go through it similarly for polygon it also has a lot of properties inside it possible basically have polyline support after that we have added a composable column which is basically handling the buttons so the first one is simple the custom marker button so which basically is calling the on change marker icon which is basically updating the value of change icon to true or false so if it is true we are calling we okay we are passing the default Market text if it is false we are passing the custom Market text I've added some space after that then added a row now this section is handling the drop down for the the map type we already have a button which is updating the state of the drop down menu to be displayed that is basically to be expanded or not if you click on it it is expanding it okay and we have provided a text for the button which is again a state that is map type menu selected text this is again updating depending upon the map type that we have selected so by default it is normal that is why it is showing it as normal and then an icon which is basically the drop down icon now for the drop down my name actually we have added a composable for it which takes in two parameters the first one is the state of expansion for this we are providing the map type manual expanded state which is updating on the click of the button request which is basically triggered when we are clicking outside the drop down so if you are clicking outside the router it is we are changing it to false which is basically closing the drop down now inside this we have to iterate through the map types and for each map type we are going to display a drop menu drop down menu item okay that is what we are doing here and we are passing a text inside it to display each of these text in the drop the menu item by passing the map type which is which we are getting from the map type values now on clicking on the respective menu item three things are happening we are calling the Callback function as by passing the clicked map type we are updating the text of the button and we are closing the drop down so these things are happening accordingly so as soon as we click on resp on my new item that is passing the type which is going to trigger this which is going to update it therefore decomposing the required part of the composable and then it is calling the or updating the state on the drop down to false which is closing the drop down now uh after this I've added on this space and here we have added a condition that if the list now that long list is more than one then only we are going to show the row for the selection of line type so for what happens here is start by default or in this case we are having only one value therefore this is not satisfied and that row is not visible but as soon as we click on the map this is now having more than one value this is true before it is displaying this row this is again uh having the same functionality for the drop down we're having a button which is updating the state of the drop down as soon as the set is updated to true this is called since we are passing that particular state to this particular property and if you are clicking on side the drop down it is updating it to false but after that what we are doing here is that we are displaying the polygon only if we have more than two markers so polygon requires three markers to be displayed since we are going to calculate the surface area so this area requires at least three lat long uh positions so what I'm doing here is that if this is satisfied if we are having less than three lat long list size and removing the polygon all right and in this scenario this is the case that this is satisfied therefore polygon won't be visible only polyline will be visible okay and after that I'm migrating through the line types and displaying the respective Downton menu items and same thing is happening here that as soon as I click on the menu item it is passing that I type to the Callback on the change line type updating the text and closing the drop down so if I click on polyline it will change it to polyline it will close a text but in the other case if we have more than two markers in that scenario this won't be satisfied therefore polygon will also be visible and if I click on polygon it will display the polygon text it will update to show the surface area it will update to show the uh area covered and it will close the in drop down menu also I have added another button for clearing all these things so this is what is happening here so as soon as we click on the clear button it is okay by default I mean the current Lackland position so the original should be intact right so the original that one should be entered that is what is happening here now for calculating the distance and the surface area what I have done here is that I have again added a condition that if the line type is not null okay and I've added up when Clause here that when the line type is falling line we are going to display a text with the content inside displaying total distance so if I do this if I choose polyline this will update the type of line type to polyline therefore this is satisfied and therefore this will be triggered because this is also satisfied because line type is polyline for now and it will call this block of code now this block is basically displaying the total distance and the formatted value of the total distance calculated so calculating the calculating the distance I'm called uh calculated distance which takes in the lat long list here what we are doing is very simple that we are using something called spherical neutil which is provided by the Google Maps util dependence interview added which already has a function for computing the distance between two points so in our case since we are having more than two points I have written a simple logic where we are hydrating through the the lat long list and we are calculating the distance between between each point and adding it to the variable and I'm returning it as kilometer so by default it will return it as meters I'm just converting it to kilometers away so this function basically to reiterate takes in the lat long list it then calculates the distance between two points and since we have more than two points I have to run a for blue and calculate the distance between each points and add the total and update the total accordingly and then convert it to kilometers and then pass it so that is what is happening here and then we are just formatting the value to show two up to two decimal points so again this is a relative function which is basically formatting to display up to two decimal points similarly for in case of polygon so in case of polygon what is happening here is again line type is not null and the type of line type is polygon right the value of line type is polygon so this will be triggered and we are showing total surface area and we are again calling the formatted value which takes which is interning intern calling calculate surface area function which is again similar to the previous function taking the lat long list inside it and if you are having a so this will never be a case but just to handle the the scenarios we have added this that if the lat long list dot size is less than three it will return to point zero because otherwise it won't be able to calculate and it will throw an error but apart from that we just need to call the spherical util.com compute area now this compute area automatically Returns the area of the uh between the later on values provided and it provides it in as square meters so that is why I haven't changed it so to rehydrate I'm passing the lat long list I'm thinking of it is uh the size is less than three this then I'm returning it to us as 0.0 because otherwise this will throw an error if the lat long this size is less than 3 but in our case since our UI doesn't permit itself this will never happen again and then we are calling these spherical util dot compute area which is basically Computing the area between the points that they have provided between the locations that we have provided which in turns this will return the double value and we are again formatting it to show up to two decimal points and we have placed the text View at the bottom so that's pretty much it for the entire project I think it's quite a long video since I wanted to go through each of these things uh in depth but I hope you liked the video so if you have any questions regarding this if you have any other queries or if you want me to create videos on some topics he's writing the comment section below and if you have watched in the end do like the video and subscribe the channel thank you

Channel: YoursSohail

Views: 3,062

Keywords: Mobile App Development, Google Maps Integration, Custom Markers, Map Type, Polylines, Polygons, Android UI, Android Jetpack, Android UI Framework, Location Services, Android Tutorials, Android Projects, Android Coding, Android Development Tutorial, Google Maps API, Android Development Tips, Android Studio Projects, Android UI Design, Android Developer, Android App Tutorial

Id: mF6V73vkQGA

Length: 36min 23sec (2183 seconds)

Published: Sat Jul 29 2023