WEBVTT 00:00.080 --> 00:00.960 Welcome back. 00:01.000 --> 00:07.280 In this video we're going to create a custom info window for every marker on the map. 00:07.520 --> 00:15.120 So for example if you create a new marker on the map, click on it and new custom info window being 00:15.120 --> 00:15.920 displayed. 00:16.080 --> 00:22.800 To do so, we need to create a variable called Selected marker. 00:22.840 --> 00:24.680 This is a selected marker by. 00:24.680 --> 00:30.320 Remember it's a mutable state of lat long and initialized as well. 00:30.480 --> 00:33.240 So this is the selected marker. 00:33.280 --> 00:41.320 The general selected marker, and we make it as a new variable mutable state of lat long. 00:41.360 --> 00:46.680 And this is outside the box and outside the Google map scope. 00:47.000 --> 00:47.400 Okay. 00:47.440 --> 00:52.080 So make sure that it's included inside the set content. 00:52.160 --> 01:02.200 Then inside the Google map parameters we need to modify the on map click we create. 01:02.200 --> 01:06.800 If you remember we create markers by two ways. 01:06.920 --> 01:15.440 If you tap on the marker on the map, you create a red marker, and if you long click on the map, you 01:15.440 --> 01:17.280 will create a new marker. 01:17.480 --> 01:19.680 And it's in blue. 01:19.720 --> 01:26.880 Okay so we have two ways on map click and on map long click here. 01:27.040 --> 01:38.640 We need to create and assign the selected marker to marker dot or my lat long dot position. 01:38.680 --> 01:43.360 Or you can directly assign them the selected marker equals to my left long. 01:43.640 --> 01:51.320 Also, you can set it to true to consume the event also on a map along a click. 01:51.520 --> 01:58.040 We have created the animation to the camera in the previous videos and before the camera. 01:58.040 --> 02:02.040 We need to set the same as we did here. 02:02.240 --> 02:07.040 The selected marker equals to lat long, which is. 02:07.040 --> 02:10.080 This is which is this variable okay. 02:10.160 --> 02:11.280 lat long. 02:11.440 --> 02:14.440 Then we need to consume the event. 02:14.440 --> 02:17.240 So this launch this is the scoop. 02:17.440 --> 02:20.040 And here return true. 02:20.080 --> 02:21.720 The third step. 02:21.880 --> 02:25.360 We need to create a custom info window. 02:25.360 --> 02:29.280 Scroll up here inside the box. 02:29.400 --> 02:39.040 If we scroll down you can see this green line green vertical line indicating the scoop of the box and 02:39.040 --> 02:39.920 the content. 02:39.920 --> 02:41.800 And this is the end of the box. 02:41.840 --> 02:55.120 Okay, outside the box we need to create the custom info window selected marker dot let and here set 02:55.120 --> 02:59.600 the position as a Lambda expression parameter. 02:59.640 --> 03:04.120 Now let's explain this conditional display of a card. 03:04.160 --> 03:12.040 We need to create a condition to display a card when the selected marker exists, and how to position 03:12.040 --> 03:23.040 and style it so the safe call let selected marker is on a nullable variable, which is a lat long and 03:23.040 --> 03:24.640 a custom marker object. 03:24.640 --> 03:35.440 And this question mark dot let syntax means if the selected marker is not null, execute the block. 03:35.440 --> 03:39.960 So let me write this note again. 03:40.240 --> 03:41.600 This question mark dot. 03:41.600 --> 03:42.720 Let checks. 03:42.720 --> 03:51.640 If the selected marker is not null, then go and execute this block and the position here inside the 03:51.640 --> 03:56.560 block is a reference to the non null selected marker. 03:56.840 --> 04:02.960 Inside this we need to create the cart composable, which is a material design container with optional 04:02.960 --> 04:05.160 elevation and rounded corners. 04:05.360 --> 04:11.200 And inside the cart we're gonna set the modifier the elevation and other composable. 04:11.240 --> 04:11.720 Okay. 04:11.880 --> 04:20.030 So let me start creating our custom window which is the marker here, which is the custom info window. 04:20.310 --> 04:23.230 The card text or three. 04:23.270 --> 04:28.150 I need to add the let the longitude and this button. 04:28.190 --> 04:36.950 Okay, start with card and inside this card set the modifier to modifier dot line. 04:36.990 --> 04:49.470 You can set the align to alignment dot top center, then set the padding to 16 dpi dot width in maximum 04:49.510 --> 04:51.590 250 dpi. 04:51.910 --> 04:54.790 Set the elevation to eight dpi. 04:54.910 --> 05:00.070 Okay, inside this card we can create a new column. 05:00.110 --> 05:04.990 This column contains the text Composables and the button. 05:04.990 --> 05:07.670 Set the modifier 16 dpi. 05:07.910 --> 05:13.950 And inside the scope of this column, create the text custom window. 05:14.390 --> 05:15.950 Custom info window. 05:15.990 --> 05:19.430 You can set the title of the marker. 05:19.470 --> 05:21.950 You can set it as selected marker. 05:21.990 --> 05:28.270 This is the first text we can set it as a title by making a style to it. 05:28.270 --> 05:34.470 Then another text for the latitude, another text for the longitude. 05:34.470 --> 05:39.910 Then we need to create another composable, which is the button on click. 05:40.110 --> 05:42.790 Set the selected marker to null. 05:43.190 --> 05:50.150 Set the modifier to alignment end and the text here close. 05:50.190 --> 05:55.950 Okay, this is our Kotlin containing three texts and one button. 05:55.950 --> 05:58.510 And here we have the card. 05:58.550 --> 05:59.510 Let me check. 05:59.710 --> 06:02.950 We need to solve this elevation create. 06:03.270 --> 06:10.510 Let me see the elevation and we need to specify the card elevation which is card defaults. 06:10.750 --> 06:11.950 Card defaults. 06:12.190 --> 06:19.350 We need to set the elevated shape or default elevation card elevation. 06:19.390 --> 06:20.710 Set it to ADP. 06:20.870 --> 06:23.910 Set the default elevation to ADP. 06:23.990 --> 06:32.190 Here we need to pass the card defaults at first, Then we call the card elevation ATP. 06:32.230 --> 06:32.790 Okay. 06:33.230 --> 06:36.390 This is how we solve the card elevations. 06:36.550 --> 06:40.510 Now we need to solve this modifier line. 06:40.550 --> 06:47.430 We need to move it because it's outside any composable like Kotlin or box. 06:47.470 --> 06:47.950 Okay. 06:48.510 --> 06:53.910 We use dot align in columns or rows or box. 06:53.950 --> 06:57.390 Let's run our application and see if it's working. 06:57.430 --> 07:05.310 Create a new marker and you can notice that the selected marker is displaying the latitude and longitude 07:05.310 --> 07:07.630 and the close button here. 07:07.670 --> 07:09.190 Another okay. 07:09.230 --> 07:15.590 You can notice it's changing whenever I create any new any new marker. 07:15.630 --> 07:17.310 I quit by mistake. 07:17.390 --> 07:26.990 Let me create a long click marker and you can notice it's working fine with the long click and the newly 07:26.990 --> 07:28.750 created markers. 07:28.990 --> 07:33.830 Okay, you see this is how we create the custom info window.