WEBVTT 00:00.120 --> 00:00.960 Welcome back. 00:01.240 --> 00:06.920 In this video, we're gonna learn how to add buttons and UI overlays in Google Maps. 00:07.160 --> 00:15.400 Google maps in Jetpack Compose can be enhanced with custom UI elements like buttons, cards, and other 00:15.440 --> 00:16.320 overlays. 00:16.360 --> 00:20.840 Let's start with floating action buttons on map. 00:20.880 --> 00:31.560 In order to add the overlays, I'm gonna add and include this Google map inside the box layout. 00:31.560 --> 00:39.320 So this box layout contains the Google map and the other UI components. 00:39.480 --> 00:42.880 Copy and move this Google map. 00:43.040 --> 00:46.560 Move it inside the box layout. 00:46.600 --> 00:55.240 Okay, now inside the box layout, we need to create a floating action button. 00:55.520 --> 00:58.640 Floating action button. 00:58.640 --> 01:08.160 And this action button has many parameters like on click the position modifier, content, color and 01:08.160 --> 01:15.750 others we are interested in specifying the on click and when the user clicks this button, we need to 01:16.030 --> 01:22.710 launch a camera position state and for example, animate and zoom in and so on. 01:22.710 --> 01:28.950 So scope plant launch because we need to control the camera position state. 01:28.950 --> 01:40.990 And here let me go up camera position state dot animate go to for example I'm gonna travel to uh Europe. 01:41.110 --> 01:44.590 So camera update factory new camera position. 01:44.750 --> 01:49.990 And here I need to pass the lat long and the duration. 01:50.230 --> 01:56.230 So lat long of Paris 4886. 01:56.230 --> 01:59.790 Here we need to pass camera position variable. 01:59.790 --> 02:04.910 And inside it we need to include the lat long as we did here. 02:04.910 --> 02:13.390 So I'm not creating anything new I'm just updating and moving the camera position to Paris. 02:13.390 --> 02:21.630 So there would be a button here that allows us, when the user click it to navigate and animate the 02:21.630 --> 02:23.910 camera towards Paris. 02:24.070 --> 02:31.270 Okay, so similar to what we've done before, set the zoom level to ten. 02:31.310 --> 02:38.670 F set the tilt to zero degrees and set the blurring to zero degrees. 02:38.710 --> 02:42.830 Okay, this is the camera and this is animate. 02:43.070 --> 02:45.350 Let me remove those. 02:45.470 --> 02:51.510 And we can include an icon or any other composable. 02:51.510 --> 03:00.310 Let me include the icon icons dot default dot for example home go to Paris. 03:00.430 --> 03:02.550 Okay this is the icon. 03:02.590 --> 03:07.070 Don't miss to add and close the parentheses and the on. 03:07.070 --> 03:12.110 Click close it by this and the floating action button. 03:12.110 --> 03:14.270 Remove this and paste it here. 03:14.310 --> 03:18.190 Okay this is our floating action button. 03:18.190 --> 03:24.950 Let me run and you can specify of course the parameters of the. 03:25.780 --> 03:26.420 box. 03:26.420 --> 03:31.580 So modifier equals to modifier dot fill maximum size. 03:31.620 --> 03:33.660 Run again and here we go. 03:33.860 --> 03:39.140 If we run again the application we noticed the fab is displayed. 03:39.140 --> 03:41.860 And then the map. 03:41.860 --> 03:44.580 So this is the fab and the map is overlapped. 03:44.820 --> 03:54.900 This is very simple error because I can cut this floating action button and place it below the Google 03:54.900 --> 03:55.580 map. 03:55.620 --> 03:56.100 Okay. 03:56.300 --> 03:57.740 It's very simple. 03:57.740 --> 04:04.780 We can we can solve it by pasting this under the Google Maps. 04:04.820 --> 04:10.180 This is for marker and this is for the set content. 04:10.180 --> 04:12.580 Place this inside it. 04:12.620 --> 04:15.780 Okay so we have the Google map. 04:15.940 --> 04:19.900 This is the scope of the Google map from here. 04:20.060 --> 04:23.660 Sorry from here to here to the marker. 04:23.660 --> 04:28.460 And under the Google map we placed the floating action button. 04:28.460 --> 04:30.060 Let me run and see. 04:30.220 --> 04:31.300 Here we go. 04:31.460 --> 04:33.540 This is our floating action button. 04:33.540 --> 04:34.500 Click on it. 04:34.540 --> 04:35.300 Here we go. 04:35.580 --> 04:37.140 This is Paris. 04:37.300 --> 04:39.500 And congratulations guys. 04:39.500 --> 04:42.660 We can specify the animation duration. 04:42.660 --> 04:50.980 For example, if I want five seconds I can specify it as 5000. 04:51.020 --> 04:55.980 Outside this and the duration in milliseconds run again. 04:56.020 --> 04:57.220 This is our map. 04:57.340 --> 04:58.340 Click home. 04:58.500 --> 05:03.260 You can notice it takes five seconds okay. 05:03.300 --> 05:09.540 With zoom level ten, tilt zero degrees and bearing zero degrees. 05:09.580 --> 05:10.100 Okay. 05:10.220 --> 05:17.300 This is our floating action button that we placed above the Google Maps. 05:17.300 --> 05:28.420 So the trick here is to create a box layout and put the map inside it, and then use other Composables 05:28.420 --> 05:30.900 like floating action button. 05:30.980 --> 05:34.580 Okay, this is a very good example. 05:34.580 --> 05:41.860 We can use it in order to place elements and UI elements above the Google Maps UI.