WEBVTT 00:00:07.480 --> 00:00:14.420 In this video we are going to add some advanced animation for our is once we show them on the map. 00:00:14.460 --> 00:00:16.730 So the way is going to work is as following. 00:00:16.860 --> 00:00:20.960 Once we click on a certain group of points on our map. 00:00:21.440 --> 00:00:22.200 OK. 00:00:22.710 --> 00:00:25.470 And then click on the show button. 00:00:26.300 --> 00:00:33.420 Our markers are going to appear one by one with a certain time delay between one marker and the other 00:00:33.420 --> 00:00:34.650 . 00:00:34.710 --> 00:00:35.300 OK. 00:00:35.670 --> 00:00:39.190 So let's go ahead and create this. 00:00:39.290 --> 00:00:51.180 They're going to go back to my Phi FCP creates a new file and call it drop markers and you mention those 00:00:51.180 --> 00:00:54.550 BHP. 00:00:54.930 --> 00:00:55.260 OK 00:00:58.260 --> 00:01:00.060 let's open the file using brackets 00:01:03.240 --> 00:01:06.870 and let's copy the same code from the previous file 00:01:06.870 --> 00:01:18.640 . 00:01:18.660 --> 00:01:19.740 Let's open our file 00:01:27.530 --> 00:01:36.010 . 00:01:37.020 --> 00:01:38.120 OK. 00:01:39.270 --> 00:01:42.420 Now let's change the title to 00:01:46.110 --> 00:01:50.800 Mark is animation. 00:01:53.960 --> 00:01:55.260 OK. 00:01:55.590 --> 00:02:03.120 So at the moment if we click on a group of points inside our map and then click on the show button we 00:02:03.120 --> 00:02:07.820 see our markers and all of them they appear at the same time with no animation. 00:02:08.240 --> 00:02:08.720 OK. 00:02:08.970 --> 00:02:09.420 So 00:02:12.540 --> 00:02:20.820 at the moment we are using the show markers function which is just setting for each marker inside our 00:02:20.820 --> 00:02:21.960 markers array. 00:02:21.970 --> 00:02:26.700 It's setting the map object where the marker should appear. 00:02:27.120 --> 00:02:41.100 OK so now we want to use a timing event function which will create a certain time gap between one marker 00:02:41.280 --> 00:02:42.670 appearing and the other. 00:02:42.900 --> 00:02:43.570 OK. 00:02:44.100 --> 00:02:50.500 So the function we're going to be using is said time out. 00:02:51.110 --> 00:02:55.690 But if we use it straight away here for some reason it's not going to work. 00:02:56.460 --> 00:02:56.980 OK. 00:02:57.120 --> 00:03:05.540 So what I'm going to do going to create another function when they copy this line of code and then creates 00:03:05.580 --> 00:03:06.500 another function. 00:03:06.780 --> 00:03:12.310 Let's call it odd Marka with delay. 00:03:12.760 --> 00:03:13.380 OK. 00:03:13.520 --> 00:03:18.910 We're going to keep the eye promiser inside this function. 00:03:19.410 --> 00:03:21.390 So let's define this function 00:03:24.280 --> 00:03:33.700 and marker with delay. 00:03:38.130 --> 00:03:41.760 Let's use the time outs function. 00:03:42.330 --> 00:03:44.550 So this function is going to take a couple of promises. 00:03:44.550 --> 00:03:49.720 So the first one is going to be a function OK. 00:03:50.100 --> 00:03:56.930 And the second one is going to be the delay in milliseconds. 00:03:57.030 --> 00:04:00.600 So let's go for a fixed delay of 200 milliseconds for now 00:04:03.510 --> 00:04:07.840 let's write our code inside the curly brackets are the function. 00:04:08.460 --> 00:04:16.950 So first of all we want to set the map objects using the line of code as we copied earlier. 00:04:17.340 --> 00:04:18.080 OK. 00:04:18.330 --> 00:04:23.370 So this will create our marker or show the marker inside the map. 00:04:23.550 --> 00:04:32.440 Also we want to add some animation to our matka to that as we have seen earlier. 00:04:32.820 --> 00:04:41.240 We can access the Markon we use the matka objects and then we use the method sets animation. 00:04:42.100 --> 00:04:42.730 OK 00:04:45.360 --> 00:04:53.620 so we're looking at dropping the market so the volume is going to be Google dot maps. 00:04:53.730 --> 00:04:57.960 Those animation that drop in capital letters. 00:04:58.670 --> 00:04:59.390 OK. 00:04:59.810 --> 00:05:05.060 Our function is going to take a barometer I guess we're using inside our code. 00:05:05.400 --> 00:05:11.300 And also we just make sure the name of the function is the same as in the. 00:05:11.460 --> 00:05:16.950 OK now let's save and refresh our page. 00:05:17.190 --> 00:05:24.890 Now if I click on a group of points on a map and then click on the search button we can see the markers 00:05:24.930 --> 00:05:29.500 appearing all at the same time and we can see the drop animation. 00:05:29.510 --> 00:05:31.560 OK but that's not exactly what we want. 00:05:31.560 --> 00:05:37.080 Because we want all of them or we want them to appear like this. 00:05:37.080 --> 00:05:39.560 So one marker after the other. 00:05:40.510 --> 00:05:42.670 OK. 00:05:44.250 --> 00:05:46.260 Now let's have a quick look at our code. 00:05:46.350 --> 00:05:50.370 So once we click on the show button is going to call the function. 00:05:50.400 --> 00:05:57.200 So Marcuse So this function is going to call the function odd marker we delay for each market. 00:05:57.870 --> 00:06:07.860 So this function calls the time out function for each marker and it's going to odd a delay of 200 millisecond 00:06:08.100 --> 00:06:12.700 between clicking on the button and making the marker appear. 00:06:13.500 --> 00:06:22.200 So at the end once we click on the button marker number one on a zero is going to show up 200 milliseconds 00:06:22.260 --> 00:06:29.600 after the click Mark in the big one is going to show up also two or three seconds after the click Mark 00:06:29.620 --> 00:06:32.840 in the battue shows up 280 seconds after the click. 00:06:32.850 --> 00:06:39.120 So at the end all these markers begin to show up 200 seconds after clicking on the show button which 00:06:39.120 --> 00:06:42.360 means that going to appear at the same time. 00:06:43.200 --> 00:06:55.680 So if we create a delay which is related to I for example if we multiply 200 by I we're going to end 00:06:55.680 --> 00:06:58.130 up with a different situation. 00:06:58.200 --> 00:07:04.620 Now mark in the bizzarro is going to have a zero second delay Mark and the other one is going to have 00:07:04.650 --> 00:07:09.480 a 200 millisecond delay mark number one. 00:07:09.480 --> 00:07:13.810 Number two he's going to have a 400 meter second delay. 00:07:14.270 --> 00:07:14.790 OK. 00:07:15.150 --> 00:07:23.410 So which means once we click on the show button straight away mark in the zero appears and then 202 00:07:23.430 --> 00:07:29.510 seconds later marker number 1 appears and then 20 seconds later Mark and number two appears. 00:07:29.580 --> 00:07:30.660 And so on. 00:07:30.660 --> 00:07:31.130 All right. 00:07:31.440 --> 00:07:37.340 So let's see if our code try this and make sure that everything is working. 00:07:37.350 --> 00:07:47.860 So if I click on a group of points and then click on the button now we get exactly what we want. 00:07:48.090 --> 00:07:48.360 OK. 00:07:48.360 --> 00:07:54.660 So we've seen that mark in about one appeared straight away and then we had a delay of 200 milliseconds 00:07:54.870 --> 00:07:56.460 between one marker and the other 00:07:59.400 --> 00:08:00.530 in the next video. 00:08:00.690 --> 00:08:06.480 We are going to get introduced to the direction service which calculates the route between two locations 00:08:06.490 --> 00:08:11.210 .