WEBVTT 00:00:06.870 --> 00:00:13.110 In this video we're going to create a simple application where are you going to be able to create markers 00:00:13.320 --> 00:00:16.650 by clicking on points on our map. 00:00:16.710 --> 00:00:22.410 So if you want to show them we're going to click on the show but we can also hide them. 00:00:22.560 --> 00:00:28.770 We can show them again and we can delete them completely from our map if we click on the delete button 00:00:28.770 --> 00:00:29.830 . 00:00:30.010 --> 00:00:34.200 And now if we try to show them again we're now going to be able to show them because we have deleted 00:00:34.200 --> 00:00:36.130 them completely. 00:00:36.150 --> 00:00:36.560 OK. 00:00:36.720 --> 00:00:40.730 So we can learn how to show hide and remove markers. 00:00:41.130 --> 00:00:47.730 So let's go to our Fire TV and creates a new file there. 00:00:47.790 --> 00:00:56.750 Call it show hide the Leitz Marcus BHB. 00:00:58.370 --> 00:00:59.040 OK. 00:00:59.380 --> 00:01:08.200 So just make sure you backup all the other files to your local folder. 00:01:11.820 --> 00:01:13.730 OK. 00:01:14.350 --> 00:01:16.890 Now let's open our file 00:01:16.890 --> 00:01:26.560 . 00:01:26.560 --> 00:01:29.510 That's going to be read don't you. 00:01:29.550 --> 00:01:31.940 Cried the deletes. 00:01:32.040 --> 00:01:36.520 Marcus those Ph.D.. 00:01:36.620 --> 00:01:38.790 They say it's a blank page. 00:01:38.790 --> 00:01:40.150 Now let's open the file 00:01:44.200 --> 00:01:48.270 . 00:01:51.660 --> 00:01:53.940 Let's copy the code from the previous one 00:01:54.020 --> 00:02:01.050 . 00:02:01.950 --> 00:02:03.420 Needs the title to 00:02:05.970 --> 00:02:14.230 show it deletes Mochis. 00:02:14.420 --> 00:02:15.530 OK. 00:02:15.570 --> 00:02:16.410 So first of all 00:02:19.410 --> 00:02:24.840 we want to be able to click on the map and create a market. 00:02:26.090 --> 00:02:30.330 Let's see if this can refresh our page. 00:02:31.740 --> 00:02:32.310 OK. 00:02:32.310 --> 00:02:41.130 Now let's first of all Dilys these two markers we created earlier so. 00:02:42.780 --> 00:02:52.300 So to remove a marker completely from our page we're going to use the marker object. 00:02:52.530 --> 00:02:54.540 So that's the least mark in number one. 00:02:55.050 --> 00:02:55.770 OK. 00:02:55.800 --> 00:03:02.880 And then to use the method set map and this time where are you going to give it as a barometer. 00:03:02.970 --> 00:03:04.090 No. 00:03:04.860 --> 00:03:05.570 OK. 00:03:05.840 --> 00:03:08.430 So if we save and refresh 00:03:12.130 --> 00:03:17.560 now our first marker is deleted and is really the second marker the same way. 00:03:17.910 --> 00:03:22.050 So it's going to be marked to say up. 00:03:23.240 --> 00:03:24.370 OK. 00:03:25.570 --> 00:03:35.440 Right now now let's create a marker once we click on a point on our map. 00:03:35.460 --> 00:03:42.890 So the way to do that is by adding a listener to the click event. 00:03:43.090 --> 00:03:47.380 OK so you are creating a market 00:03:51.330 --> 00:03:54.680 . 00:03:57.150 --> 00:04:08.760 First of all we're going to use the map object which is map and then we're going to add a listener using 00:04:08.820 --> 00:04:11.780 our listener method. 00:04:13.140 --> 00:04:16.580 OK. 00:04:16.590 --> 00:04:18.080 So he's going to say a couple of times. 00:04:18.080 --> 00:04:29.050 So the first one is the events which is click and the second promiser is a function to execute. 00:04:30.360 --> 00:04:39.060 When the event takes place or it's so in our case we're going to need the event object. 00:04:39.420 --> 00:04:40.860 So you can call it anything we want. 00:04:40.880 --> 00:04:46.800 I'm going to call this event and then we're going to create our mark. 00:04:47.940 --> 00:04:51.570 So we'll create a variable marker. 00:04:51.690 --> 00:04:54.880 He's going to be our objects marker. 00:04:55.410 --> 00:04:59.090 And then we're going to use the market constructor. 00:04:59.250 --> 00:05:02.220 So we use the new keyword. 00:05:02.550 --> 00:05:10.030 And then because structure is Google Maps don't Marka gate. 00:05:10.050 --> 00:05:14.010 And then we can play some options there. 00:05:15.480 --> 00:05:17.000 So they just use a variable. 00:05:17.010 --> 00:05:21.720 This is the marker options and the fight is just before creating the mark 00:05:31.080 --> 00:05:38.280 so we need a few properties inside the marker options. 00:05:38.460 --> 00:05:42.170 So we will need the position. 00:05:43.260 --> 00:05:49.140 So we want the position to be exactly the same point where we clicked and that's where we're going to 00:05:49.140 --> 00:05:56.170 use the event object to return the lassitude and longitude of the clicked point. 00:05:56.250 --> 00:06:04.130 So to do that we're going to access the event objects and then we're going to use the property latitude 00:06:04.470 --> 00:06:05.910 longitude. 00:06:06.810 --> 00:06:13.360 Let's now the map property which is our map objects. 00:06:13.560 --> 00:06:16.350 OK so if we save and try this 00:06:19.330 --> 00:06:23.270 one is really going to point to our map. 00:06:23.440 --> 00:06:26.440 We will see a mark. 00:06:27.000 --> 00:06:27.950 OK. 00:06:28.720 --> 00:06:30.430 Now fire up. 00:06:30.690 --> 00:06:33.490 We don't want to see the market straight away. 00:06:33.610 --> 00:06:40.330 We would like to start somewhere and then only show the markers once we click on the show. 00:06:41.500 --> 00:06:47.360 So to do this we're going to create an array where are we going to place all our markers. 00:06:47.370 --> 00:06:47.950 OK. 00:06:47.980 --> 00:06:50.580 So just before the listener 00:06:55.480 --> 00:06:57.840 creates an array 00:07:01.990 --> 00:07:14.760 where we store the Marcus OK and we are going to take out the map property from our Marka options 00:07:18.850 --> 00:07:20.040 and right after this 00:07:23.070 --> 00:07:29.480 once we create our matka we are going to store it inside the array. 00:07:29.510 --> 00:07:33.030 OK. 00:07:35.380 --> 00:07:41.120 So it is create irate. 00:07:41.880 --> 00:07:45.270 So we're going to call it Marcus. 00:07:45.490 --> 00:07:52.890 It's going to be an empty array at the beginning to store the marker in the array. 00:07:53.010 --> 00:08:01.260 We're going to go see the array markers and we're just going to use the push method of the array and 00:08:01.260 --> 00:08:10.390 then the promiser is going to be our mark objects right now to show Mark is going to create creates 00:08:10.410 --> 00:08:11.040 a button 00:08:14.650 --> 00:08:19.850 . 00:08:21.320 --> 00:08:21.690 OK 00:08:24.900 --> 00:08:26.530 let's write some checks in there. 00:08:26.560 --> 00:08:29.610 Show existing markers 00:08:32.790 --> 00:08:37.670 and we want to execute a function once we click on the button. 00:08:38.280 --> 00:08:44.070 So we're going to use the On Click attributes. 00:08:45.430 --> 00:08:50.990 OK equal the name of the function so it is called this function. 00:08:51.000 --> 00:09:00.710 So Mark is going to define this function inside our code. 00:09:03.470 --> 00:09:07.950 OK so let's write a comment. 00:09:08.250 --> 00:09:14.770 So Mark is stored in the array. 00:09:18.180 --> 00:09:18.510 So 00:09:23.280 --> 00:09:31.240 we are going to cycle through all the markers inside the mark is right. 00:09:32.230 --> 00:09:32.930 OK. 00:09:33.220 --> 00:09:41.310 And for each one we can assist the map property using the method set up as we've done earlier. 00:09:41.360 --> 00:09:41.740 OK. 00:09:41.760 --> 00:09:53.760 So we get to access each Mocca using its index and then we get to use the sets my property and the problem 00:09:53.860 --> 00:09:56.360 here is going to be our map objects. 00:09:56.880 --> 00:09:58.370 OK. 00:09:59.670 --> 00:10:09.050 So to cycle through all the elements we're going to use an index I which in each case as zero. 00:10:10.000 --> 00:10:11.080 OK. 00:10:11.760 --> 00:10:26.100 And it's going to go until the last of our markers array minus 1 and every time we increment indexed 00:10:26.130 --> 00:10:28.650 by 1. 00:10:29.080 --> 00:10:29.890 So it is save 00:10:31.870 --> 00:10:34.320 and try this 00:10:38.630 --> 00:10:41.160 you click on many points there. 00:10:41.380 --> 00:10:44.210 I click on the button that you can see on markers. 00:10:44.500 --> 00:10:45.580 OK. 00:10:45.830 --> 00:10:47.860 Now let's add another button. 00:10:47.870 --> 00:10:49.660 Hide markers from the map. 00:10:49.880 --> 00:10:56.270 So this button is going to hide the markers without deleting them completely which means that we can 00:10:56.260 --> 00:10:57.200 show them again. 00:10:58.030 --> 00:10:59.210 So this creates this puzzle 00:10:59.240 --> 00:11:05.690 . 00:11:11.110 --> 00:11:12.420 All right. 00:11:12.830 --> 00:11:19.870 Mark is from them and this time we're going to define another function that we're going to execute once 00:11:19.880 --> 00:11:21.230 we click on the button. 00:11:21.900 --> 00:11:22.890 OK. 00:11:23.380 --> 00:11:27.320 Let's call it clear markers 00:11:28.730 --> 00:11:31.370 . 00:11:33.860 --> 00:11:36.790 OK so it's a comment there 00:11:39.860 --> 00:11:41.040 right. 00:11:41.120 --> 00:11:45.450 Markers fill them up. 00:11:45.500 --> 00:11:50.800 It's going to specify that they are still in our array. 00:11:50.920 --> 00:11:51.900 OK. 00:11:52.340 --> 00:11:54.430 So they're not going to be deleted completely. 00:11:54.470 --> 00:11:56.110 There is going to be hit. 00:11:56.690 --> 00:11:57.050 OK. 00:11:57.080 --> 00:12:01.970 So the function is clear markers. 00:12:03.400 --> 00:12:07.580 So again we're going to cycle through all the markers inside our array. 00:12:07.630 --> 00:12:12.590 So this copy the same code. 00:12:15.730 --> 00:12:24.880 And rather than setting in the property we're we can do here we're going to hide the markings so to 00:12:24.910 --> 00:12:34.040 hide a marker we use the method set up and the promise is going to be No. 00:12:35.540 --> 00:12:37.410 OK. 00:12:38.680 --> 00:12:42.360 So all the markers are actually deleted from the map. 00:12:42.970 --> 00:12:52.030 OK but we are going to keep these markers inside our array. 00:12:52.030 --> 00:12:52.680 All right. 00:12:53.140 --> 00:12:59.810 So now it's the last button we're going to remove the mark is completely. 00:13:00.230 --> 00:13:02.750 And before doing that just test our code. 00:13:03.010 --> 00:13:04.430 Make sure that this is working. 00:13:04.660 --> 00:13:14.430 So if I refresh the page it is click on a few points you can see the markers and we can hide them. 00:13:14.980 --> 00:13:19.240 OK then we can show them again because they are still inside our array. 00:13:19.880 --> 00:13:20.330 OK. 00:13:20.600 --> 00:13:28.850 Now let's add the third button which will delete our markers from the array. 00:13:29.050 --> 00:13:29.440 So 00:13:32.500 --> 00:13:43.970 is the button and some text Sexta remove markers completely. 00:13:44.240 --> 00:13:49.410 So this means that we get to be removing the markers from our array. 00:13:50.650 --> 00:13:59.480 Let's create a function that leads Machias which is going to the least the markers from the array. 00:14:01.930 --> 00:14:09.480 So the lead Mark is for all the gray. 00:14:13.000 --> 00:14:13.460 OK. 00:14:13.490 --> 00:14:13.880 So 00:14:16.630 --> 00:14:26.500 this function is going to the the markers first from the map and then take them out of the array. 00:14:27.190 --> 00:14:33.490 So to do that we're going to use the clear markers function first to delete them from the map. 00:14:33.880 --> 00:14:34.440 OK. 00:14:34.660 --> 00:14:37.870 And then we're going to delete them from the array. 00:14:38.040 --> 00:14:45.480 And there is an easier way to do that just by setting the array to an empty array. 00:14:45.520 --> 00:14:49.020 So now we lost all the information about those markers. 00:14:49.020 --> 00:15:01.330 So when I received this refresh and I click on a few points we can show the markers we can delete them 00:15:01.340 --> 00:15:02.110 up. 00:15:02.360 --> 00:15:07.810 OK but they're assuming the array if we show them again and we click on the remote markers completely 00:15:08.920 --> 00:15:12.910 then we have deleted them from the map and also delete them from the array. 00:15:13.070 --> 00:15:15.180 And now we can't show them anymore. 00:15:16.030 --> 00:15:17.790 OK. 00:15:19.100 --> 00:15:25.900 In the next video we are going to create some animation to show when we are dropping many markers on 00:15:25.900 --> 00:15:31.980 our map.