Welcome back.
In this video, we're gonna learn how to add buttons and UI overlays in Google Maps.
Google maps in Jetpack Compose can be enhanced with custom UI elements like buttons, cards, and other
overlays.
Let's start with floating action buttons on map.
In order to add the overlays, I'm gonna add and include this Google map inside the box layout.
So this box layout contains the Google map and the other UI components.
Copy and move this Google map.
Move it inside the box layout.
Okay, now inside the box layout, we need to create a floating action button.
Floating action button.
And this action button has many parameters like on click the position modifier, content, color and
others we are interested in specifying the on click and when the user clicks this button, we need to
launch a camera position state and for example, animate and zoom in and so on.
So scope plant launch because we need to control the camera position state.
And here let me go up camera position state dot animate go to for example I'm gonna travel to uh Europe.
So camera update factory new camera position.
And here I need to pass the lat long and the duration.
So lat long of Paris 4886.
Here we need to pass camera position variable.
And inside it we need to include the lat long as we did here.
So I'm not creating anything new I'm just updating and moving the camera position to Paris.
So there would be a button here that allows us, when the user click it to navigate and animate the
camera towards Paris.
Okay, so similar to what we've done before, set the zoom level to ten.
F set the tilt to zero degrees and set the blurring to zero degrees.
Okay, this is the camera and this is animate.
Let me remove those.
And we can include an icon or any other composable.
Let me include the icon icons dot default dot for example home go to Paris.
Okay this is the icon.
Don't miss to add and close the parentheses and the on.
Click close it by this and the floating action button.
Remove this and paste it here.
Okay this is our floating action button.
Let me run and you can specify of course the parameters of the.
box.
So modifier equals to modifier dot fill maximum size.
Run again and here we go.
If we run again the application we noticed the fab is displayed.
And then the map.
So this is the fab and the map is overlapped.
This is very simple error because I can cut this floating action button and place it below the Google
map.
Okay.
It's very simple.
We can we can solve it by pasting this under the Google Maps.
This is for marker and this is for the set content.
Place this inside it.
Okay so we have the Google map.
This is the scope of the Google map from here.
Sorry from here to here to the marker.
And under the Google map we placed the floating action button.
Let me run and see.
Here we go.
This is our floating action button.
Click on it.
Here we go.
This is Paris.
And congratulations guys.
We can specify the animation duration.
For example, if I want five seconds I can specify it as 5000.
Outside this and the duration in milliseconds run again.
This is our map.
Click home.
You can notice it takes five seconds okay.
With zoom level ten, tilt zero degrees and bearing zero degrees.
Okay.
This is our floating action button that we placed above the Google Maps.
So the trick here is to create a box layout and put the map inside it, and then use other Composables
like floating action button.
Okay, this is a very good example.
We can use it in order to place elements and UI elements above the Google Maps UI.