WEBVTT

00:00.080 --> 00:09.520
Learned about the camera position, the initial zoom level, the Google map types, and other things.

00:09.880 --> 00:13.160
Now let's move to learn about markers.

00:13.520 --> 00:20.920
Adding markers to a Google map in Jetpack Compose allows you to highlight specific location.

00:21.200 --> 00:27.040
If I want to make a new pin here, place a new pin in Singapore.

00:27.240 --> 00:37.880
All I need is to go to that Google map and here inside the scope of it, create a new marker marker

00:38.000 --> 00:40.960
and import the class of the marker.

00:41.000 --> 00:49.360
This is a composable function control and left mouse to open the the definition and the composable function

00:49.360 --> 00:50.200
of marker.

00:50.400 --> 00:56.240
We have different parameters, different attributes like the state.

00:56.240 --> 01:00.200
And this is by the way, the most important attribute.

01:00.360 --> 01:05.080
The marker state tracks the markers position and visibility.

01:05.120 --> 01:10.190
It's of type marker state marker, state control and left click.

01:10.470 --> 01:14.990
We have one parameter is the position, which is lat long.

01:15.030 --> 01:19.990
You remember the lat long the latitude and longitude variable.

01:20.110 --> 01:23.950
So inside the marker we can define a state.

01:23.950 --> 01:26.630
And inside the state we define.

01:26.750 --> 01:32.990
The position of the marker can be updated programmatically and the marker composable.

01:33.030 --> 01:42.870
The actual marker displayed on the on the map requires a marker state, accepts optional title, snippet

01:42.870 --> 01:44.190
and click handlers.

01:44.390 --> 01:49.630
Uh, the others uh, and the other uh like attributes are optional.

01:49.670 --> 01:50.110
Okay.

01:50.270 --> 01:57.910
But the most important thing is the marker state, which handles and the tracks the markers position

01:57.910 --> 01:59.390
and visibility.

01:59.430 --> 02:09.270
For example, let me start by adding the state attribute and here use the marker new marker state.

02:09.310 --> 02:15.150
Alt plus enter to import it and set the position to Singapore.

02:15.310 --> 02:18.940
Singapore is a variable that we defined before.

02:19.260 --> 02:21.620
It's of type lat long.

02:21.660 --> 02:23.500
Scroll up lat long.

02:23.900 --> 02:26.380
This is the Singapore variable.

02:26.420 --> 02:26.900
Okay.

02:27.100 --> 02:28.300
This is the marker.

02:28.340 --> 02:31.180
We put it inside the Singapore.

02:31.340 --> 02:31.900
Okay.

02:32.060 --> 02:33.540
Let me run.

02:33.540 --> 02:37.220
And you can notice this is our marker.

02:37.260 --> 02:37.820
Okay.

02:38.140 --> 02:45.980
If we zoom out you can notice that this is our marker in Singapore.

02:46.020 --> 02:48.740
Now let's customize this marker.

02:48.780 --> 02:53.100
We can add for example title and snippet.

02:53.300 --> 03:01.180
Marker Singapore and snippet is a small title a small description under the title.

03:01.220 --> 03:02.580
Let me run again.

03:02.620 --> 03:03.420
Here we go.

03:03.540 --> 03:07.740
If I click on the marker Singapore marker in the Singapore.

03:08.020 --> 03:08.420
Okay.

03:08.460 --> 03:10.940
Did you notice that the snippet here.

03:11.100 --> 03:11.580
Okay.

03:11.780 --> 03:14.060
So this is our marker.

03:14.100 --> 03:22.940
If we go back to the marker declaration we have anchor alpha draggable flat icon and others.

03:23.060 --> 03:23.540
Okay.

03:23.740 --> 03:26.850
Let me show you for example alpha.

03:27.090 --> 03:30.850
Set alpha equals to 0.5 f.

03:30.930 --> 03:31.490
Run.

03:31.530 --> 03:36.490
It controls the visibility of the marker and the transparency.

03:36.530 --> 03:42.250
You can notice that the color of this marker is 50% off.

03:42.290 --> 03:45.970
Okay we have anchor draggable flat icon.

03:45.970 --> 03:47.850
We can customize the icon.

03:47.850 --> 03:57.770
So for example if I need to switch this ordinary icon and replace it by another one another image.

03:57.770 --> 04:00.410
Let me create the icon here val.

04:00.650 --> 04:13.810
Custom icon equals to bitmap description factory script or factory default marker and set the bitmap

04:14.010 --> 04:16.930
descriptor factory dot.

04:16.970 --> 04:21.770
Read and set the icon to custom icon run.

04:21.770 --> 04:28.970
Again, I am getting the default icon default marker and set it to Azure.

04:29.130 --> 04:33.730
I can set it to other colors like magenta.

04:33.770 --> 04:34.530
And here we go.