WEBVTT 00:00.080 --> 00:01.080 Welcome back. 00:01.120 --> 00:06.920 In this video, we're gonna allow the user to remove the markers from the screen. 00:06.920 --> 00:09.120 So we created those markers. 00:09.120 --> 00:17.200 When the user clicks on any marker, the selected marker custom info window will appear and change the 00:17.200 --> 00:18.920 latitude and longitude. 00:18.960 --> 00:27.440 Now we're gonna change this close button and make it as remove marker. 00:27.480 --> 00:29.160 Remove marker. 00:29.160 --> 00:33.840 And on click we need to set the selected marker to null. 00:34.160 --> 00:40.480 Then we need to remove it from the selected markers. 00:40.480 --> 00:46.400 If markers contains the position we need to markers dot remove. 00:46.440 --> 00:56.520 Since we have two types of markers, one with single tap on marker on map and the other type is long 00:56.560 --> 00:57.360 press. 00:57.560 --> 01:01.120 So we have two types of markers blue and red. 01:01.160 --> 01:03.520 The red is single click. 01:03.800 --> 01:06.440 The blue is long click. 01:06.640 --> 01:14.770 So we need to make this conditional check if markers dot contains position. 01:15.130 --> 01:16.130 If the marker. 01:16.170 --> 01:21.850 This marker is contained in single tapped markers, then go and remove it. 01:22.010 --> 01:27.130 Otherwise, remove it from the long pressed markers. 01:27.330 --> 01:30.890 So long clicked markers dot remove position. 01:30.890 --> 01:31.770 Let me run. 01:31.810 --> 01:32.690 Here we go. 01:32.930 --> 01:35.970 Now let's create different markers. 01:36.010 --> 01:38.530 Now let's click remove marker. 01:38.850 --> 01:40.130 Click on this. 01:40.130 --> 01:42.650 Click on this and the. 01:42.850 --> 01:47.970 You notice that the selected and the custom info window is not appearing. 01:48.170 --> 01:49.170 So like this. 01:49.370 --> 01:52.890 Select this and we can remove markers. 01:53.090 --> 01:55.610 Okay so there is a bug here. 01:55.650 --> 01:59.730 We set the selected marker to null at the first. 01:59.730 --> 02:02.850 And this is not not good. 02:02.890 --> 02:04.770 We need to make it at the end. 02:04.810 --> 02:11.570 Let me check create markers remove marker and the info window is not appearing. 02:11.730 --> 02:14.050 I think there is an error in the logic. 02:14.050 --> 02:21.970 So if I create a new markers and those are having the same, you notice that they are not changed. 02:22.210 --> 02:28.290 This is being solved because I missed something very important. 02:28.410 --> 02:30.890 So here we have two types. 02:30.930 --> 02:34.410 The long clicked markers and the markers. 02:34.450 --> 02:35.930 The single tap markers. 02:35.970 --> 02:36.450 Okay. 02:36.530 --> 02:46.930 Whenever you click on any marker of the single tap markers, we need to set here the onclick onClick 02:47.090 --> 02:55.690 and specify the marker, the selected marker or my selected marker or single selected marker. 02:55.810 --> 02:58.610 Selected marker equals to single. 02:58.650 --> 03:00.370 Selected marker. 03:00.490 --> 03:05.170 The position and return to to consume the event. 03:05.170 --> 03:09.810 Similar to that we need to do in the long clicked markers. 03:10.050 --> 03:15.850 Specify the onClick single selected marker, not single selected. 03:15.850 --> 03:22.970 It's long, selected long and here long selected marker position. 03:22.970 --> 03:24.170 Consume that event. 03:24.210 --> 03:24.570 True. 03:24.610 --> 03:26.090 Let me run again. 03:26.130 --> 03:28.820 Add markers on the screen. 03:28.860 --> 03:38.140 If I want to remove this or check this, you are updating the info card and remove the marker. 03:38.140 --> 03:39.500 We remove this. 03:39.500 --> 03:43.100 Click on this marker or this marker. 03:43.300 --> 03:45.700 Everything is working fine. 03:45.700 --> 03:50.420 Now we can remove any marker dynamically from the list. 03:50.580 --> 03:53.900 Also let me test the long pressed once. 03:53.940 --> 03:58.380 So here I need to create three markers. 03:58.620 --> 04:05.500 Remove the middle and you can notice that everything is working fine. 04:05.500 --> 04:07.300 So congratulations guys. 04:07.540 --> 04:08.860 What we've done here. 04:09.060 --> 04:16.900 We added the remove functionality to our application using this custom info window. 04:17.100 --> 04:20.820 So let me make a quick recap what we've done here. 04:21.180 --> 04:27.500 As I said before, we use the selected marker in order to create this custom info window. 04:27.780 --> 04:35.780 And this selected marker will be used in order to initialize the position of the selected marker on 04:35.780 --> 04:36.580 map click. 04:36.580 --> 04:43.300 We added a selected marker equals to the my lat long, which is the parameter of the map. 04:43.460 --> 04:51.420 Click lambda expression in the same way on map long click, we use this lat long to assign the selected 04:51.420 --> 04:52.260 marker. 04:52.500 --> 05:02.060 Then we add it inside the markers and the long clicked markers, which are the mutable state list of 05:02.460 --> 05:03.420 lat long. 05:03.460 --> 05:06.340 We added the onClick parameter. 05:06.380 --> 05:12.580 We set the selected market to single selected marker to position, and the same way we added this to 05:12.620 --> 05:14.540 the long selected marker. 05:14.660 --> 05:23.620 Then we created those codes inside the button and we set this condition. 05:23.620 --> 05:30.860 If the marker, the selected marker contains the position, the selected one the selected marker, then 05:30.860 --> 05:33.140 go and remove from the markers and markers. 05:33.780 --> 05:36.340 Define the single tapped markers. 05:36.580 --> 05:40.660 Otherwise go and remove it from the long clicked markers. 05:40.660 --> 05:47.340 Because we have two types of markers, the single tapped one and the long pressed markers.