WEBVTT

00:00:07.380 --> 00:00:15.390
In this video we are going to use the direction service of the Google Maps javascript's API to calculate

00:00:15.450 --> 00:00:18.580
the route between New York and Toronto.

00:00:18.780 --> 00:00:21.390
And then we're going to show us on a map like this.

00:00:21.600 --> 00:00:28.890
Also we'll be able to calculate the driving distance between these two cities and also the traveling

00:00:28.890 --> 00:00:30.070
site.

00:00:30.840 --> 00:00:31.480
OK.

00:00:31.830 --> 00:00:43.760
So first let's create a new file and it's back up our previous mileposts and creates a new file and

00:00:43.760 --> 00:00:47.180
it's called it's direction service.

00:00:47.790 --> 00:00:50.970
Those BHP.

00:00:53.290 --> 00:00:55.670
It's opened this file using Ragatz

00:01:04.030 --> 00:01:07.440
let's copy code from the previous file and keep only

00:01:10.530 --> 00:01:13.890
the code where we created our map.

00:01:14.300 --> 00:01:14.630
OK

00:01:15.090 --> 00:01:26.330
.

00:01:30.050 --> 00:01:32.350
OK let's save this.

00:01:32.370 --> 00:01:33.160
Open the file

00:01:47.420 --> 00:01:57.160
OK and change the map type to roadmap.

00:02:01.270 --> 00:02:03.420
Ok that's better.

00:02:05.010 --> 00:02:11.620
Also let's change the title to direction service.

00:02:14.580 --> 00:02:15.410
OK.

00:02:15.430 --> 00:02:19.470
And also we're going to need only one button there.

00:02:20.040 --> 00:02:20.630
OK.

00:02:20.850 --> 00:02:24.180
So that's the least the other two.

00:02:24.640 --> 00:02:25.680
And the first one

00:02:32.100 --> 00:02:37.090
to calculate.

00:02:45.270 --> 00:02:45.720
OK

00:02:47.410 --> 00:02:50.420
.

00:02:52.320 --> 00:02:57.720
Now we are going to create a function calculates roots which is going to be called once we click on

00:02:57.720 --> 00:02:59.280
the calculator doesn't.

00:02:59.650 --> 00:03:00.300
OK.

00:03:00.570 --> 00:03:06.120
So unclick we are going to call this function call.

00:03:06.240 --> 00:03:09.610
It's OK.

00:03:09.870 --> 00:03:11.490
So it has defined this function

00:03:20.120 --> 00:03:29.870
.

00:03:31.620 --> 00:03:41.430
Ok so first of all we are going to create a request so the request is going to send some information

00:03:41.430 --> 00:03:50.280
to the API including the origin of our routes the destination of our routes and any other options like

00:03:50.280 --> 00:03:53.180
the traveler mode and so on.

00:03:53.340 --> 00:03:54.150
OK.

00:03:54.150 --> 00:04:00.100
So we're going to create a variable Corley's request.

00:04:01.440 --> 00:04:08.760
So it's going to be an object where we're going to place a few properties so we can associate with the

00:04:08.760 --> 00:04:11.820
origin of our roots.

00:04:11.820 --> 00:04:12.810
OK.

00:04:12.970 --> 00:04:17.630
And let's say that to New York.

00:04:19.660 --> 00:04:26.050
OK let's have a destination.

00:04:26.970 --> 00:04:27.480
Toronto

00:04:36.170 --> 00:04:40.200
another prop. We can use it's the traveling mode.

00:04:41.160 --> 00:04:42.310
OK.

00:04:42.630 --> 00:04:53.610
So if you want to say this to driving then the syntax is Google not maps dots trouble mode

00:04:57.030 --> 00:05:00.060
and then driving in copies of it it's OK.

00:05:00.140 --> 00:05:10.760
There are other modes we can use we can use walking bicycling or transit.

00:05:11.340 --> 00:05:12.910
OK.

00:05:13.760 --> 00:05:15.950
Now our request is ready.

00:05:16.460 --> 00:05:22.340
So the next step is to pass the request to a function called Roots.

00:05:22.400 --> 00:05:29.850
So this function or method is a method of the directions service.

00:05:30.210 --> 00:05:30.700
OK.

00:05:31.050 --> 00:05:35.910
So let's just add the commons here pass the request

00:05:42.200 --> 00:05:45.140
to the root method.

00:05:45.580 --> 00:05:46.060
OK.

00:05:46.350 --> 00:05:51.100
So to use the aroos method we need to create a direction service object.

00:05:51.120 --> 00:05:55.510
So let's do that before the calculate rootes function.

00:05:55.750 --> 00:05:57.220
OK.

00:05:58.880 --> 00:06:05.280
So we are going to create a direction service

00:06:10.440 --> 00:06:11.410
object.

00:06:11.820 --> 00:06:16.020
OK then we're going to use to

00:06:19.440 --> 00:06:21.610
use the roots method.

00:06:22.430 --> 00:06:23.000
OK.

00:06:23.250 --> 00:06:28.080
And as it does we're going to get the results for our requests.

00:06:29.530 --> 00:06:31.270
OK.

00:06:33.440 --> 00:06:41.420
So let's create an object and call it directions service.

00:06:41.480 --> 00:06:43.080
OK.

00:06:43.460 --> 00:06:50.360
Using the constructor directions service is going to use the keyword new and then the constructor is

00:06:50.710 --> 00:06:57.030
Google that maps those directions says.

00:06:57.060 --> 00:07:00.200
So capital the capital S..

00:07:01.070 --> 00:07:08.020
OK so now we are ready to use that object for the root method.

00:07:09.190 --> 00:07:13.420
OK.

00:07:17.120 --> 00:07:21.800
So the aroos method is going to take a couple of times.

00:07:21.870 --> 00:07:23.030
So the first one

00:07:26.310 --> 00:07:31.520
is going to be our requests as we have just created there.

00:07:32.060 --> 00:07:33.080
Okay.

00:07:33.320 --> 00:07:43.070
The second barometer is a function which will take a couple of promises a results paramecia which is

00:07:43.070 --> 00:07:47.350
going to contain the returned data from the API.

00:07:47.610 --> 00:07:54.260
And the other promiser is the Seychelles which is going to be also returned by the API.

00:07:55.280 --> 00:07:57.070
OK.

00:07:57.620 --> 00:07:59.090
Now let's do something simple.

00:07:59.120 --> 00:08:09.480
So we're going to check the status first and if the status is OK then we are going to print the results

00:08:09.560 --> 00:08:10.580
in our console.

00:08:10.880 --> 00:08:11.570
OK.

00:08:11.570 --> 00:08:18.440
So to check the value of the sages going to use an IF statements.

00:08:19.720 --> 00:08:24.010
OK.

00:08:24.320 --> 00:08:29.120
So to check if the seisures is OK we're going to check its value against the following value which is

00:08:29.120 --> 00:08:37.880
Google dot maps bought by our action all directions stages.

00:08:38.190 --> 00:08:40.330
That's OK.

00:08:42.090 --> 00:08:48.440
So in this case we are going to log the results in the console console.

00:08:48.470 --> 00:08:51.740
Don't look for results.

00:08:52.950 --> 00:08:53.860
OK.

00:08:53.920 --> 00:08:57.560
Just having a quick check the princes does I put.

00:08:57.570 --> 00:09:04.020
There is supposed to be the end of the root function.

00:09:04.060 --> 00:09:07.130
All right there and it's obvious to me.

00:09:07.480 --> 00:09:15.150
Now let's save our code and refresh the page.

00:09:15.170 --> 00:09:24.720
Now if we click on the button and then have 12 then we can see our results there.

00:09:25.160 --> 00:09:27.560
So the results we've got here is an object.

00:09:27.750 --> 00:09:29.040
So it's click on it.

00:09:29.780 --> 00:09:34.500
So inside these objects we've got a few elements.

00:09:35.630 --> 00:09:37.430
OK.

00:09:37.430 --> 00:09:40.880
So for example we can see our requests.

00:09:41.690 --> 00:09:48.900
That's our destination the origin and the traveler mode as we put in our code.

00:09:49.130 --> 00:09:52.270
Also we can have a look on the routes.

00:09:52.600 --> 00:09:55.230
So for these requests we've got 1 routes returned.

00:09:55.340 --> 00:10:02.490
OK because in the array of one route and if you click on that because an object

00:10:07.740 --> 00:10:13.250
if you go to the legs we will find other bits of information insight and other objects.

00:10:13.590 --> 00:10:14.180
OK.

00:10:14.250 --> 00:10:18.630
So for example we can get the distance of our roots.

00:10:18.810 --> 00:10:19.680
OK.

00:10:19.690 --> 00:10:30.030
So does the distance in miles index for what's the value here is the value in meters and can convert

00:10:30.030 --> 00:10:31.150
that to kilometers an hour.

00:10:31.200 --> 00:10:38.280
Kodachrome 2 that's the duration index formats.

00:10:38.820 --> 00:10:39.510
Okay.

00:10:39.840 --> 00:10:45.640
And also in seconds.

00:10:46.140 --> 00:10:54.840
So let's use this set of information to create our last message which is going to show the traveling

00:10:54.840 --> 00:11:00.500
distance in kilometers and also the traveling sign.

00:11:01.120 --> 00:11:05.450
OK.

00:11:06.630 --> 00:11:15.390
To make it easy and get straight away the distance in text format as a value in kilometers.

00:11:15.540 --> 00:11:22.560
We can change one of the properties of the requests which is called the unit system and we can set that

00:11:22.560 --> 00:11:26.360
to the metric system rather than the imperial system.

00:11:26.640 --> 00:11:36.230
OK so let's go back to our requests and just add another property there which is unit system.

00:11:37.270 --> 00:11:38.610
OK.

00:11:38.760 --> 00:11:48.770
To say that symmetric the value is going to be Google Docs maps bought unit system that's metric right

00:11:49.030 --> 00:11:49.610
.

00:11:50.010 --> 00:11:54.040
So by default it's imperial but we want to go for metric.

00:11:54.520 --> 00:11:55.180
OK.

00:11:55.860 --> 00:12:01.860
So now if I save and refresh the page

00:12:05.760 --> 00:12:08.550
click on the button.

00:12:08.550 --> 00:12:19.890
Now if you're going side objects Roots first elements and then legs those elements the distance this

00:12:19.890 --> 00:12:24.200
time is going to be in the text format in economics.

00:12:24.420 --> 00:12:32.030
OK so let's create our last message.

00:12:32.940 --> 00:12:33.180
So

00:12:37.830 --> 00:12:42.920
it just makes a comment that gets distance and time.

00:12:43.910 --> 00:12:44.990
OK.

00:12:45.480 --> 00:12:47.400
So let's

00:12:56.360 --> 00:12:58.180
be traveling this sense

00:13:02.730 --> 00:13:03.730
is.

00:13:04.470 --> 00:13:05.180
OK.

00:13:05.460 --> 00:13:09.170
Let's add the value of the distance in text format.

00:13:09.240 --> 00:13:14.260
So first of all we are going to use the results objects.

00:13:14.590 --> 00:13:15.470
OK.

00:13:15.520 --> 00:13:19.800
But is how objects there.

00:13:19.800 --> 00:13:30.880
And then we are accessing the roots array and we are looking at the first elements of the roots array

00:13:30.920 --> 00:13:31.740
.

00:13:32.340 --> 00:13:34.560
OK.

00:13:35.070 --> 00:13:45.390
And then inside that's elements we are looking at legs which is also on the right and we are interested

00:13:45.390 --> 00:13:49.220
in the first elements which is an object.

00:13:50.560 --> 00:13:51.120
OK.

00:13:51.400 --> 00:13:58.710
Index the index 0 and then inside those elements which is an object we are looking at the distance property

00:13:58.720 --> 00:14:00.110
.

00:14:01.440 --> 00:14:02.490
OK.

00:14:02.970 --> 00:14:06.180
Which is an object.

00:14:06.610 --> 00:14:12.820
And inside the objects we are looking at the text property of objects.

00:14:12.920 --> 00:14:14.620
All right.

00:14:14.640 --> 00:14:16.220
And let's carry on.

00:14:16.590 --> 00:14:17.640
Let's have a

00:14:21.270 --> 00:14:25.770
dot and then line break and then

00:14:28.680 --> 00:14:32.880
the traveling time is

00:14:35.640 --> 00:14:37.800
then it's odd the value.

00:14:38.130 --> 00:14:40.470
So for the time we're going to do exactly the same thing.

00:14:40.600 --> 00:14:45.350
But rather than accessing the distance object we can access the duration objects.

00:14:45.360 --> 00:14:45.670
OK.

00:14:45.670 --> 00:14:51.700
And also going to use the text for that.

00:14:56.040 --> 00:14:56.310
OK

00:15:04.030 --> 00:15:08.540
let's it.

00:15:09.150 --> 00:15:09.890
OK.

00:15:10.420 --> 00:15:10.900
OK.

00:15:10.980 --> 00:15:14.940
The princess is supposed to be that.

00:15:15.000 --> 00:15:16.210
OK.

00:15:17.130 --> 00:15:19.390
And that's the traveling distance.

00:15:19.520 --> 00:15:24.580
OK so let's save this and refresh our page.

00:15:24.810 --> 00:15:28.810
Now if we click on the button we can see our first message.

00:15:29.250 --> 00:15:34.560
So you can see traveling the science center 90 kilometers and the traveling time seven hours forty eight

00:15:34.560 --> 00:15:35.880
minutes.

00:15:35.910 --> 00:15:38.100
OK.

00:15:39.780 --> 00:15:46.380
Now let's pre-NST the route on the map like that's

00:15:49.890 --> 00:15:55.270
so to display the route we we're going to need a directions display object.

00:15:55.430 --> 00:15:56.210
OK which we are.

00:15:56.220 --> 00:15:59.890
We're going to create using a constructor.

00:16:00.300 --> 00:16:00.810
So

00:16:05.760 --> 00:16:06.990
it's created that.

00:16:07.280 --> 00:16:10.770
So create a

00:16:16.530 --> 00:16:17.460
directions

00:16:20.970 --> 00:16:24.930
display all around the object

00:16:27.900 --> 00:16:29.010
which we will use

00:16:32.160 --> 00:16:34.070
to these players.

00:16:35.190 --> 00:16:36.220
OK.

00:16:36.840 --> 00:16:41.910
So let's call it the action of this play.

00:16:42.310 --> 00:16:43.920
Now you can use the constructor

00:16:47.070 --> 00:16:51.010
directions render.

00:16:52.080 --> 00:16:54.250
OK.

00:16:57.000 --> 00:17:04.370
So we're going to use a method set directions of these objects to display our roots.

00:17:04.530 --> 00:17:10.370
But before we do that we need to bind this objects to our map so

00:17:18.120 --> 00:17:23.420
so binded our actions Aranda to the map.

00:17:23.460 --> 00:17:30.090
OK so to do that we're going to use the objects and they're going to use a method of this object.

00:17:30.530 --> 00:17:33.810
Set map OK.

00:17:34.740 --> 00:17:42.840
And we are going to use the map objects just specifying which map we are binding this object to.

00:17:42.840 --> 00:17:53.930
Now let's use the set directions method of these objects.

00:17:57.750 --> 00:17:59.310
OK so it is playing the root

00:17:59.320 --> 00:18:05.460
.

00:18:11.990 --> 00:18:15.810
So the method is six directions.

00:18:16.910 --> 00:18:21.370
It's going to take as a barometer the results.

00:18:22.740 --> 00:18:24.690
So let's save this.

00:18:25.650 --> 00:18:26.760
Refresh our page

00:18:31.020 --> 00:18:32.690
and click on the button.

00:18:32.870 --> 00:18:38.870
You can see our alerts message and now we can see the roots.

00:18:40.410 --> 00:18:47.330
All right in the next video we're going to get introduced to geocoding using the Google Maps javascript's

00:18:47.370 --> 00:18:47.850
API