WEBVTT

00:00:07.530 --> 00:00:10.470
Now let's go through the logic of our OP.

00:00:10.470 --> 00:00:16.010
So once we load the page we're going to load them up just like this.

00:00:16.830 --> 00:00:17.610
OK.

00:00:17.850 --> 00:00:21.150
So I'm up at the beginning is censored in London.

00:00:21.630 --> 00:00:29.400
Now if we click on the submit button we're going to create a request using the values inside our inputs

00:00:30.570 --> 00:00:35.150
and we're going to pass those requests to the directions service objects.

00:00:35.160 --> 00:00:38.430
So for example if we go for something like Toronto

00:00:42.660 --> 00:00:46.480
to New York OK.

00:00:46.770 --> 00:00:48.480
If we click on the submit button.

00:00:48.630 --> 00:00:55.470
Now we are creating a request repassing that request of the berichten service objects if the request

00:00:55.470 --> 00:00:57.390
is successful which is our case here.

00:00:57.540 --> 00:00:58.870
We're going to do two things.

00:00:59.040 --> 00:01:05.100
We're going to show the routes on the map using the directions around the object and also going to show

00:01:05.100 --> 00:01:07.010
the distance and duration.

00:01:07.020 --> 00:01:14.400
Inside this box if the request is not successful for example if we missing any input

00:01:17.400 --> 00:01:24.390
then we are going to delete any routes from our map and sensor them up in the original points which

00:01:24.390 --> 00:01:25.410
is London.

00:01:25.860 --> 00:01:29.540
And after that we're going to show the error message.

00:01:30.130 --> 00:01:30.810
OK.

00:01:31.530 --> 00:01:38.070
So now that we understood the logic of the OP we are ready to translate this logic into javascript code

00:01:38.070 --> 00:01:41.340
structure.

00:01:41.340 --> 00:01:47.100
Now that we understood the logic of our app we are ready to move to the javascript's code structure

00:01:47.110 --> 00:01:47.550
.

00:01:48.000 --> 00:01:54.390
So first of all we are going to create the map so it will set the map options and then we'll use the

00:01:54.390 --> 00:01:56.310
options to create the map.

00:01:56.490 --> 00:02:03.510
After that we can create a direction service objects which will need to use the routes method that would

00:02:03.510 --> 00:02:12.810
give us the results for our requests and then we're going to create a directions around the object which

00:02:12.810 --> 00:02:14.820
we'll use to display the roots.

00:02:15.300 --> 00:02:17.120
And then we will bind.

00:02:17.340 --> 00:02:21.580
Their actions around the object to our map.

00:02:21.630 --> 00:02:28.020
After that we can create the calculate root function which we will execute once we click on the submit

00:02:28.050 --> 00:02:28.790
button.

00:02:29.280 --> 00:02:32.880
So inside this function we'll do a few things.

00:02:32.880 --> 00:02:40.710
So first we're going to create our requests and then we can pass that request to the roots method of

00:02:40.710 --> 00:02:43.810
the directions service objects.

00:02:44.640 --> 00:02:52.740
And then if the status is OK we're going to guess the distance and time and show them in that box.

00:02:52.800 --> 00:03:00.570
Also we're going to display the roots using the directions around the objects if the status is not OK

00:03:00.580 --> 00:03:01.030
.

00:03:01.200 --> 00:03:07.120
We go into the least the routes from the map and we get a sense of the map in London again.

00:03:08.220 --> 00:03:15.190
And finally we'll need to create the autocomplete objects for all our inputs.

00:03:15.480 --> 00:03:21.710
So in the next video we are going to write our javascript's code and build the functionalities of our

00:03:21.750 --> 00:03:22.040
app