How To Use Google Maps In Jetpack Compose | Show Marker and InfoWindow on Map in Jetpack Compose

hi guys welcome back to coding Ambitions,  today we will learn about integrating Google   Maps in Android jetpack compose and showing  marker on the map so let's continue with that so this is the official documentation for  Android maps compose SDK so it recommends   us adding this and then this so let's first  add this this one is the compose SDK compose basically right and then it asks us to make sure to also  include the latest version of the maps   sdk for Android right if you go to this link you  will come here from here we need to add this one this is the maps Play services SDK  this one is required by Google Maps let's sync it and the next one is we need to add  API key for that we need the secrets plugin right   cross girl plugin so why do we need that secret  gradle plugin so suppose in the Manifest we need   to add one step here actually so that is like  this step so in the Manifest if we want to make   it this key available to the Manifest finite  for the Android manifest file from the local   properties file we will add it in the local dot  properties file from there to make it available   inside this Android manifest we need that Secrets  plugin right so let's add that scripts plugin this one will be in the project level Gradle find yeah you might be wondering why I'm doing this  because these documentations are according to   the groovy transcripts right but currently  we are using in the Android Now by default   kotlin has become the gutter language right so  don't get yes you can see that is the different   so earlier we were using The Groovy so  it was the build.gradle but now it uh it   is build.girl.kts right so few differences are  there and then we need to edit in the app level similar right let's sync it and the next step is in the  local dot properties file you can add your this   with this key and this value so you can add your  Maps API key first of all you need to set up if you check it every step is  given here for get started guide   get started with Google Maps platform so  if you go to Quick Start you will find   everything like how you can get  API key right fine so from here if these steps are mentioned we need to set  up the eagle projects and then you need to   copy the maps API key from there and then you  will have to use that right all the steps are   mentioned here but now I am assuming in this  video that you have got the maps API key right and then in the local properties you need to  add this right this is supposedly if Maps API   key this key and this value and finally this  I have already done so I'm not doing it here   so then we need to add this one in the Manifest yeah this one was already there I was  trying it so this one is already added here   right so here it is the that Grant Secrets  plugin comes to the rescue so how this   manifest will know like we have defined  this key in the local property so this   is where Gradle stickers plugin works so  that makes it available to this file right so related to that yeah so here they have  mentioned this step so man let's come back   to this point they have mentioned like how you  can get maps API key very quickly so let me just   quickly go through that so they have mentioned all  steps here you need to go to credentials page then   you need to like on the going it here so after  that you need to login and then you need to create   API key from there right so after creating the API  key you can copy that so they have mentioned the   steps here then let's coming back to that so now  it's added here that's what is the next step so so if you come here so yeah these are  the all steps now let's go back to here   they have recommended these and these are  optional so we did this clustering we can   use this one if we need scale bar then that's  for specific purposes right this is the common   one so we will be using that let's try  to check if it map is available or not   Google Map yeah it's available we can check it  so let's first of all create a composable here Google map view right and yeah we are accepting  the few parameters and then we can what will be   needed is we will be needed camera position state  right so this is basically this camera position   state is like State object that can be hosted  to controller observing the maps camera state   so camera setup basically for the like what  is the current current later on state right on Google Maps this is about that  this one we will be accepting from the parent composable and then  what we needed is on map loaded   this is callback so because we will  be keeping track of one variable   there because until map is not loaded  we will be showing a loader there right and what else we need I think  as of now we are good to go   let's keep moving so map UI settings few things  you need is like Pi remember so we will be   remembering them why we are remembering them is  I will come to that point we will demonstrate of   map UI settings map UI settings is basically  many settings are provided by this one you can   see location but enabled toolbar enabled or not  you can just go through them like June gestures   enabled so you can according to this first of all  you need to go through what are the UI features   in the MacBook map according to that what you  need you can enable or disable them here right   so we are not enabling Compass but later on I  will revert this and we'll see you Compass will   be available but now it will not be available  we need to add extension set value yeah fine   and similarly we need for more state so yeah  one question is like why we are remembering it   because suppose this this decomposes this view  recomposes so then we want to remember like   what was the settings what about the settings  of the map what were the properties all those   things right so that's why we are remembering  it here so that it can retain its state across   compositions you might I hope you may be now  knowing about what is remember remember is using   it's used for remembering this data cross the  composition is this composable is recomponed so   this value will be real it will not be changed  right it will use the previous value right then map properties properties so in map properties  also there are many options like   we need map type what kind of map we need so that  one and So This indoor indoor enabled there are a   few things like is my location enabled is traffic  enabled many things are there Max Zoom preferences   we can set maximum Zoom preferences there right  but currently we will be using it for map type   because we will be using normal map type map  type again can be different different types   you can see hybrid normal satellite terrain  you can try out these things just changing   this like after running this project and then  you can try out changing this that you will be   aware of what kind of maps are available type  of maps and now let's come to the Google Map so it has many properties let's  Supply modifiers here which we have   picked up from and on map loaded  right so that it will be triggered whenever map have been finished  loading and you can pass URL settings sorry note URL let's see UI settings map UI settings then maybe map  properties properties map properties what else maybe we need it let's go here and check it yeah currently I  think it's fine but if you will be needing   anything more than we can come back to it and last one is the content so this one is  the content so what we will be needing right   So currently yeah one thing is we need a state  here so that can we can name it location state this is where we need to remember marker state  and it will be like let's say uh let's take one India state so and that will be of coin lat long that's take India that long if you see because they will be showing markers thank you right it's not string itself float value right and according to this location let's  say this is the default location as well   so we will be creating a camera position  State Line we can name it may be default   camera position State like initially  what we will be what will be the   position state of the camera in the  Google Maps we need that right and camera positions Dot from lat long we can use  India State and let's say for zooming we can use   uh we are not we don't want it to be  much Zone because then it will be like showing the things in the detail so he  will not be able to see the map of India   it will be in the detail right in the data so  domain currently available like 4f so and this   one lets the full marker State we will be using  position is of lat long type so India state right and so here we have one thing we  were missing is camera position that   we need this one like it requires  this one and now let's say marker info window there are many types of  marker actually I will show you a few of them   the single one is like only marker but first let's see this one and this state to which it belongs oh it's it's the marker  state right so now it will be what we named it location state yeah this one  right and what are the properties we needed   draggable we can make it draggable so  that we will be able to drag the marker   right and we can use on click on click we can  show info window that will be covering later so   and what other properties are  there title we can give it a title or we can just give it like map title  simply right or maybe India map title fine let's comment this one initially yeah it requires  a return password to something here that's some   weird actually why we need to return  because we need something to do here   by why we are returning here this this is  where I didn't get this point but yeah let's so let's take it later so yeah this one is  let's try to see it if it's readable or not   currently only just passing the map view here  what are the parameters modifiers [Music]   this is optional let's say don't  pass it or maybe we can set it   right from here right modifier  Dot Max not Max height oops height let's assume 300 DB or maybe 350 DP right then it's camera position State let's give it  default camera position state and then on map map loaded and what we'll be doing on mapload  that will be implemented here camera position   State it's yeah it's asking for this is camera  position but it's asking for state right so we can use that here camera positions that remember [Music]  position state right and here we can use position let's apply this one position  is equal to default camera position which one is that it is default camera position  let's name it like so because this is not state we will give it as dead right and for its  default position is this one this   one is from this Indian at long  right fine and let's try to run it if you say it's on the full screen  right the marker is showing here   cool so let's try to drag it  yeah it's draggable as well   right so let's do one thing here first of  all it's not accepting this height right so let's take it inside box modifiers [Music] fill Max fight and inside that will be using it  yeah I know it works fine even we can give it   455 you can see zooming is working fine right  so now initially while this is not loading we   can show a loader as well here for that we  can show is Mac load it is equal to remember we can remember this state notable state of  initially it will be false right and here   inside this we can see if is map loaded is  true then we can show it and here we will   be setting it so because one map will be  loaded we need to update its value right did you find and if it is not loaded what will be showing  is circular progress indicator fine modifier dot wrap   content so each yeah it's here but we can align  it in the centers one more thing we can do how it is different so it will be full height will  be this much right and then this one will be there [Music]   so it can alignment Dot centers yeah it looks cool  so let's try to return it actually we are still doing one thing  wrong initially it will be showing   this condition we missed it here right we can try one thing here animated visibility  so it will be visible if anyone would value or you try it if not loaded  only then then maybe let's   make one change here so actually we are now  displaying this Google map view in that case   so let's do one thing here map will always  be there and if notice map loaded only then we will be showing this loader but  otherwise map will already be there right it's very simple we are displaying the map but  until this is not loaded we will be showing this circular progress indicator  right it's fine now let's let's show marker info window on clicking  this Mark right this is simple marker right its title is this one if you  click on its zooming so let's say uh let's take one variable here what we should name it we can name it show info window right submittable state of   false initiative false and on  click we will be doing what here if showing for window is true yes pretty true because you are using by  remember so it's already installed this surface let's find and now let's come back to this  point so One clicking of it if we show   location 10 dot show info window else we can hide right info window fine and then we can update this  showing for window equal to it's opposite right   we are toggling it [Music] yeah let's try to run it yeah it's saying  in the temp out this extension let's run it if you see now you can see this one is the improve into we click  again it's hiding first it's showing right fine so   but this is this default info window and which  shows its title but let's suppose we want to show custom info window right for that  we can use marker info window content   only its content will be only content will be customized  right what it's saying is yeah because otherwise it's returning from this  so let's comment it out and check with that it will show its title but let's  say here we apply some content right let's make it this is the easy way of  using it we don't need to call Value then this sometimes picks up from the cashier I  don't know what is issue with that packable if you see so initially   first time it's not showing but first time we need  to make it to you first time it will be true right let's take it again oh not this is wrong or you  did it at wrong place my bad that is this one for   marker info window we are different initially  we need to show more coming for window cool so let's check it yeah you can see  it's showing hiding showing height and   similarly one more type is there that  is if we use marker info window right   in this case what will happen is everything  will be customized you can see that option is   showing us only this content is showing it's  not using its default layout but it's using   everything from here but in the previous  case in this case what it was doing is it was only changing the content but using the  info window base layout from its default right   so guys this is about the mark integration of  Google Maps in a net pack composed and showing   the info window and we saw three different types  of info windows were there for with markers like   simple marker marker info window marker info  window content three were there so depending   upon our need we can do anything so if we need  completely customizable window then we can use   this one everything according private layout you  want to do then we can use this one if you want   to only change the content then we can do this one  if you only want to show title we can use Simple   marker right so this is guys all about integrating  Google Maps and showing markers if you like the   video please like comment and share so so you kind  of feeling will comment then it will motivate me   to create more content like this so till then take  care bye bye okay have a great time keep coding thank you [Music]

Channel: Coding Ambitions

Views: 1,783

Keywords: android app development, android jetpack compose, android studio, android tutorial, jetpack compose, jetpack compose tutorial, jetpack compose tutorials, jetpack compose ui, kotlin, kotlin tutorial, jetpack compose maps, jetpack compose google maps, jetpack compose mapview, jetpack compose mapbox, jetpack compose google map, jetpack compose google map marker, jetpack compose map marker info window, jetpack compose map markers

Id: -dSWmgSur8U

Length: 29min 8sec (1748 seconds)

Published: Mon Oct 02 2023