WEBVTT

00:00.040 --> 00:02.440
Welcome back up in the main activity.

00:02.600 --> 00:05.440
Then remove these greetings.

00:05.680 --> 00:08.240
Now let's create our composable.

00:08.440 --> 00:10.600
So remove the scaffold.

00:10.600 --> 00:15.560
And inside this theme we need to define our composable.

00:15.840 --> 00:19.440
I'll name it as Uber Clone map.

00:19.480 --> 00:21.840
Let's start with this composable.

00:22.080 --> 00:31.920
So inside Kotlin Plus Java, this package create a new package named as screens inside the screens.

00:31.920 --> 00:34.160
Create a new Kotlin file.

00:34.200 --> 00:36.960
Name it as Uber clone.

00:37.920 --> 00:44.760
Inside this file, create a new composable function named as Uber Clone map.

00:44.760 --> 00:55.080
Since we're gonna include our map, some overlays, and the screen, um, contains the map, the expandable

00:55.080 --> 01:00.080
fabs, some buttons, some scale bars, and other widgets.

01:00.120 --> 01:04.240
We're gonna include them inside a box layout.

01:04.320 --> 01:10.520
This box layout has a modifier dot fill maximum size.

01:10.520 --> 01:14.720
Inside this box, we're gonna include our map.

01:14.720 --> 01:18.620
So this is the first widget Google map.

01:18.740 --> 01:27.700
And as we learned before Google Map composable function, you can specify some attributes like the modifier

01:27.700 --> 01:30.780
modifier dot fill maximum size.

01:30.780 --> 01:34.780
You can set the width and the size as you want.

01:35.020 --> 01:43.180
The camera position we can set it and the properties like explaining the or changing the map style options.

01:43.460 --> 01:49.180
If you need more parameters, click on the Google Map decoration.

01:49.180 --> 01:56.500
You can set the modifier descendants, camera position, state content, local location, source UI

01:56.540 --> 02:02.660
settings map, click map location and button click and others.

02:02.700 --> 02:06.260
Okay, so this is the Google Map declaration.

02:06.260 --> 02:10.100
Now we are interested in the camera position state.

02:10.100 --> 02:24.060
So let me create here in this Uber clue, the camera position state equals to remember camera position

02:24.140 --> 02:24.860
state.

02:24.900 --> 02:32.890
The remember camera position state function is a part of Google Maps compose library.

02:32.930 --> 02:36.290
It's used to manage the camera position.

02:36.330 --> 02:39.570
The view of a Google map in Jetpack Compose.

02:39.690 --> 02:46.450
The purpose of using such a function is to track and control the map's camera state.

02:46.690 --> 02:48.290
The state position.

02:48.290 --> 02:50.170
State means position.

02:50.730 --> 02:53.490
Zoom, tilt, burning, and so on.

02:53.730 --> 02:57.610
Allowing programmatic updates to the map view.

02:57.650 --> 03:00.650
Moving the camera to the new location also.

03:00.690 --> 03:05.650
It observes user interactions when the user pans.

03:05.690 --> 03:09.130
Zoom the map and other gestures.

03:09.170 --> 03:09.970
Gestures.

03:10.170 --> 03:14.330
Okay, so this is how we use the camera position.

03:14.330 --> 03:19.770
We need to control the camera position programmatically.

03:19.770 --> 03:21.930
So I use this variable.

03:21.970 --> 03:24.810
Let me define this camera position.

03:24.810 --> 03:30.210
So camera position state equals to camera position state.

03:30.250 --> 03:39.450
You can define other properties like map style if you prefer any uh, any uh any style or any map style.

03:39.650 --> 03:41.810
But for now, we're good.

03:41.850 --> 03:45.650
I'm gonna use the default Google map style.