WEBVTT

00:00:11.220 --> 00:00:18.540
Now if the request is successful we want to show a message where we can have the formatted address the

00:00:18.540 --> 00:00:20.530
coordinates and the postcode.

00:00:20.970 --> 00:00:25.360
So to do that we're going to create a few variables one of each of these elements.

00:00:25.500 --> 00:00:33.980
So one variable for the formatted address.

00:00:36.030 --> 00:00:44.640
And we're going to use the adjacent files against the forms and address so the formatted address is

00:00:45.180 --> 00:00:46.150
right there.

00:00:46.580 --> 00:00:47.120
OK.

00:00:47.340 --> 00:00:57.000
So to access these elements we need to access the data file first using the data variable and then we're

00:00:57.000 --> 00:01:00.280
going to go inside the results array.

00:01:01.450 --> 00:01:10.460
OK so we're going to be looking at the first elements is the elements of index 0 inside our array.

00:01:11.400 --> 00:01:13.850
So this element is an objects.

00:01:14.230 --> 00:01:14.600
OK.

00:01:14.610 --> 00:01:21.110
And we are looking at the form as an address which is one option inside these objects which access the

00:01:21.120 --> 00:01:30.750
option are we going to use a dot followed by the name of the option which is formatted address.

00:01:30.860 --> 00:01:32.130
All right.

00:01:32.550 --> 00:01:39.100
Now to get the latitude it creates a variable.

00:01:40.440 --> 00:01:49.380
So in the same way we can get the data in the file and then go inside the results array and then looking

00:01:49.440 --> 00:01:52.590
at the elements of index 0.

00:01:53.070 --> 00:02:01.010
And this time we are looking at the geometry option.

00:02:02.280 --> 00:02:03.480
OK.

00:02:03.830 --> 00:02:14.760
And to get the latitude we need to go first to location which is an option of the geometry objects

00:02:18.570 --> 00:02:24.610
and then longitude which is an option of location.

00:02:25.870 --> 00:02:26.720
OK.

00:02:27.090 --> 00:02:33.340
And again it gets the longitude the same way.

00:02:36.570 --> 00:02:41.230
Instead of lychee there is going to have it.

00:02:42.600 --> 00:02:44.590
OK.

00:02:45.840 --> 00:02:48.580
Now let's get the postcode.

00:02:49.020 --> 00:02:53.260
So it creates a variable postcode.

00:02:55.800 --> 00:03:01.900
So if we look at our Jason File the post code is right there

00:03:04.890 --> 00:03:12.960
so our postcode is inside an object and it corresponds to one of the options of the objects which is

00:03:12.960 --> 00:03:14.720
the long name or the short name.

00:03:14.730 --> 00:03:22.410
So let's say you want to use the long the so we could be tempted to access this property the same way

00:03:22.560 --> 00:03:24.690
we have done with the other variables.

00:03:24.690 --> 00:03:33.150
But the issue of course here is that there are other objects which also have goes a long named property

00:03:33.160 --> 00:03:33.590
.

00:03:33.780 --> 00:03:39.360
But a difference between those objects and the one we are looking at is not the types property of these

00:03:39.420 --> 00:03:42.150
objects is postal code.

00:03:42.330 --> 00:03:50.550
So what we need to do here is cycled through all these objects and check which one is having a type's

00:03:50.880 --> 00:03:59.490
property equal to postal code and then for that's one store the long name which is the postcode inside

00:03:59.520 --> 00:04:01.640
our postcode variable.

00:04:02.930 --> 00:04:03.550
OK.

00:04:04.170 --> 00:04:11.220
So to do this we're going to use a function called each.

00:04:11.280 --> 00:04:14.310
So the syntax is dollar sign dot each.

00:04:14.880 --> 00:04:19.390
So this function is going to take a couple of parameters.

00:04:19.500 --> 00:04:22.690
So the first barometer is going to be an array.

00:04:22.950 --> 00:04:23.610
OK.

00:04:23.610 --> 00:04:27.950
So in our case the array is the address components array.

00:04:28.020 --> 00:04:30.330
So this array is an array of objects.

00:04:30.700 --> 00:04:31.210
OK.

00:04:31.500 --> 00:04:36.250
So we're going to need to cycle through the objects of this array.

00:04:37.170 --> 00:04:42.400
So to get that array we're going to use the data variable which we first our adjacent file or decent

00:04:42.450 --> 00:04:43.630
objects.

00:04:44.340 --> 00:04:45.090
OK.

00:04:45.090 --> 00:04:51.930
And then we're going to go to the results array and we are looking at the elements of index 0 of that

00:04:51.990 --> 00:04:53.570
scary.

00:04:53.850 --> 00:05:00.910
And then we are looking at the property address components

00:05:04.020 --> 00:05:13.520
OK which is an array itself or it's now the second promiser is going to be a function.

00:05:13.520 --> 00:05:18.800
So this function is going to have two parameters.

00:05:19.700 --> 00:05:26.420
So the first Bar-Mitzvah is going to be the index of each of these elements as we are cycling through

00:05:26.420 --> 00:05:29.640
them and it's quality index.

00:05:30.050 --> 00:05:35.580
The second trimester is going to be the elements itself which is the objects.

00:05:35.780 --> 00:05:36.080
OK.

00:05:36.080 --> 00:05:41.870
Each of these objects let's call its elements.

00:05:41.870 --> 00:05:48.740
Now what we need to do is as we are cycling through these objects we are going to check if the objects

00:05:48.870 --> 00:05:53.130
as a Types property equal to postal code.

00:05:53.150 --> 00:05:53.810
So if

00:05:59.380 --> 00:06:00.320
the elements

00:06:02.670 --> 00:06:06.660
Cypess property is equal to postcode

00:06:09.050 --> 00:06:21.110
right then we are going to use the long name of elements and stories inside our post-quake variable

00:06:21.120 --> 00:06:21.270
.

00:06:21.410 --> 00:06:36.240
So it said the postcode variable to the elements long the right and then it will return false to stop

00:06:36.250 --> 00:06:36.580
the loop.

00:06:36.600 --> 00:06:36.830
OK

00:06:42.250 --> 00:06:44.390
OK let's save this.

00:06:44.600 --> 00:06:51.050
So now we've got all our variables and we are ready to use them to create our message.

00:06:51.070 --> 00:06:51.330
OK.

00:06:51.340 --> 00:06:55.290
And then change the ASML content of our output Dave.

00:06:55.460 --> 00:07:03.650
So now let's access the output.

00:07:10.540 --> 00:07:19.660
So are you going to use its ID and change Ishmail contents using the same method.

00:07:20.250 --> 00:07:20.510
OK

00:07:23.890 --> 00:07:34.420
so we're going to start with formatted address.

00:07:37.750 --> 00:07:42.800
OK so let's use B tags to make these Vold

00:07:55.590 --> 00:07:58.270
Capulets.

00:07:59.780 --> 00:08:00.690
OK.

00:08:01.050 --> 00:08:06.170
And then going on and now we need the formatted address variable

00:08:12.620 --> 00:08:15.010
which is right there.

00:08:15.920 --> 00:08:16.630
OK.

00:08:16.910 --> 00:08:18.470
And then

00:08:21.880 --> 00:08:23.690
we're going to have a line break

00:08:33.410 --> 00:08:34.040
and then

00:08:37.310 --> 00:08:39.320
we're going to have the coordinates

00:08:48.530 --> 00:08:51.900
in a place as well inside the size to make is bold

00:08:51.900 --> 00:09:00.340
.

00:09:06.030 --> 00:09:07.980
OK.

00:09:09.130 --> 00:09:10.140
And then going on

00:09:12.810 --> 00:09:20.060
they're to right latitude longitude and then we'll use the latitude and longitude variables.

00:09:20.290 --> 00:09:20.870
OK so

00:09:25.810 --> 00:09:26.340
that is huge.

00:09:26.360 --> 00:09:45.790
And then we can illustrate very well then dots or color that is used and then let's add the dotted variable

00:09:49.610 --> 00:09:50.050
and then

00:09:54.190 --> 00:09:55.640
close the process

00:09:59.120 --> 00:10:05.630
and a dot and then a break.

00:10:07.850 --> 00:10:10.400
OK then we can have the postcode

00:10:24.500 --> 00:10:26.500
OK.

00:10:26.720 --> 00:10:31.660
And finally let's add a thought of the end of the postcard

00:10:33.940 --> 00:10:36.250
.

00:10:37.070 --> 00:10:37.760
Let's check.

00:10:37.760 --> 00:10:41.590
Everything is fine in its place.

00:10:41.610 --> 00:10:43.130
Yes.

00:10:43.820 --> 00:10:47.000
You don't say that things

00:10:48.660 --> 00:10:50.770
.

00:10:51.920 --> 00:10:56.450
OK so it is save and try our code.

00:10:57.140 --> 00:10:59.570
So if you're appraised the page.

00:11:00.140 --> 00:11:01.660
Now if he writes an address there

00:11:08.930 --> 00:11:10.550
click on the button.

00:11:10.550 --> 00:11:11.890
Now we can see our message.

00:11:12.040 --> 00:11:12.660
OK

00:11:17.270 --> 00:11:22.450
let's try something else.

00:11:27.420 --> 00:11:28.570
OK.

00:11:28.930 --> 00:11:36.000
So I think just other thought of the end of the formatted address are right there.

00:11:36.220 --> 00:11:43.310
Save and try these again.

00:11:43.990 --> 00:11:44.440
OK.

00:11:44.540 --> 00:11:49.310
If you don't place any address we get requests as successful.

00:11:49.310 --> 00:11:52.300
Perfect.

00:11:52.820 --> 00:12:01.210
Now to finish up what we need to do is center the map in the address.

00:12:01.220 --> 00:12:01.660
OK.

00:12:01.820 --> 00:12:07.460
And also creates a mike so to center the map

00:12:10.850 --> 00:12:16.350
we are going to use a method of the map objects which is set Sensa.

00:12:17.330 --> 00:12:17.960
OK.

00:12:18.050 --> 00:12:26.060
And we can use an object.

00:12:27.990 --> 00:12:32.210
With the lawsuit and loitered vollies.

00:12:32.420 --> 00:12:39.830
So for the last year they're going to use the lights you'd very well and fully loaded you'd be going

00:12:39.830 --> 00:12:42.200
to use the noise very dependable

00:12:49.350 --> 00:12:49.610
OK

00:12:54.370 --> 00:13:01.710
save and try this.

00:13:02.090 --> 00:13:05.300
Now you can see that our map is centered in the address.

00:13:05.360 --> 00:13:06.070
OK.

00:13:06.140 --> 00:13:08.130
Now let's change the zoom level.

00:13:08.630 --> 00:13:09.790
OK.

00:13:10.490 --> 00:13:17.120
So to take you to zoom level again we're going to use another method of the map object

00:13:20.150 --> 00:13:23.160
which is said zoom capsule's Ed

00:13:25.990 --> 00:13:30.260
and this go for 14.

00:13:32.010 --> 00:13:37.460
Let's try again.

00:13:37.490 --> 00:13:39.430
And perfect is working.

00:13:40.370 --> 00:13:43.040
Now we need to create a marker.

00:13:43.520 --> 00:13:43.790
OK

00:13:43.790 --> 00:13:50.980
.

00:13:51.380 --> 00:13:57.800
So he's going to create a variable marker.

00:13:58.340 --> 00:14:01.840
So we're going to use a construct say for our market as we did before.

00:14:02.100 --> 00:14:04.250
So going to use the keyword new.

00:14:04.400 --> 00:14:11.810
And then Google Maps those marked with capital M and inside these constructs are we going to place our

00:14:11.810 --> 00:14:13.020
markers options.

00:14:13.160 --> 00:14:16.480
OK.

00:14:16.490 --> 00:14:27.160
So first we want this marker to show on our map so going to set the property to maps objects and for

00:14:27.170 --> 00:14:27.800
the position

00:14:30.830 --> 00:14:37.820
we is the same position we use to sense our map.

00:14:39.070 --> 00:14:40.140
Okay.

00:14:40.830 --> 00:14:43.310
And also it is some animation.

00:14:43.310 --> 00:14:47.400
So as the market gets dropped on our map.

00:14:47.720 --> 00:14:53.090
So for dropping use google those maps animation the Capitol a.

00:14:53.330 --> 00:14:56.280
And then drop capitalisms.

00:14:56.510 --> 00:14:58.350
So let's save this.

00:14:59.110 --> 00:15:03.720
And two.

00:15:05.630 --> 00:15:08.020
And then we can see Amaka.

00:15:08.030 --> 00:15:14.630
Now the issue is if we try again we're going to have another market other to open up and we try if we

00:15:14.630 --> 00:15:15.650
try another address

00:15:26.210 --> 00:15:28.940
we're going to have even another that.

00:15:30.230 --> 00:15:31.220
OK.

00:15:31.490 --> 00:15:33.740
So we're going to end up with too many markers on our map.

00:15:33.890 --> 00:15:41.750
So to solve this are you going to do we are going to define the variable marker at the beginning of

00:15:41.750 --> 00:15:42.260
our code

00:15:48.600 --> 00:15:55.490
.

00:15:58.880 --> 00:16:02.630
And inside the code we are just going to set the variable

00:16:07.180 --> 00:16:08.520
to the new marker.

00:16:08.870 --> 00:16:15.160
But before we do that we are going to check if the marker is there or not.

00:16:15.170 --> 00:16:18.390
If he's there we're going to need to delete it.

00:16:18.720 --> 00:16:21.830
If he's not there we're going to create and you Mark.

00:16:21.890 --> 00:16:32.270
So just before creating the Mocca we're going to check if Mark is there deleted.

00:16:33.470 --> 00:16:44.900
So if the marker is there so if he's there then he's going to have a value if it's not there then it's

00:16:44.900 --> 00:16:45.990
going to be undefined.

00:16:46.040 --> 00:16:49.970
So we're checking if the marker is not defined.

00:16:50.670 --> 00:16:50.960
OK

00:16:51.120 --> 00:16:57.040
.

00:16:58.100 --> 00:17:02.950
So if he's not undefined we're going to need to delete it and just delete a marker.

00:17:03.230 --> 00:17:08.330
We need to use the method set up.

00:17:08.360 --> 00:17:13.130
We use the value you know inside the property.

00:17:13.750 --> 00:17:14.200
OK.

00:17:14.360 --> 00:17:22.920
So now if we save this and try again.

00:17:27.230 --> 00:17:29.510
OK.

00:17:29.510 --> 00:17:30.890
Now let's try another address

00:17:30.890 --> 00:17:40.260
.

00:17:42.350 --> 00:17:45.990
So the first marker has been deleted.

00:17:46.370 --> 00:17:51.080
And we have only one matka at all times.

00:17:51.800 --> 00:17:55.420
And our OP is now complete in the next video.

00:17:55.520 --> 00:18:00.100
We're going to learn how to perform nearby searches using the Google Maps javascript's API