WEBVTT 00:00:09.270 --> 00:00:15.780 In this video we are going to get introduced to geocoding using the Google Maps javascript API so you 00:00:15.780 --> 00:00:21.810 can to create a simple application where we can get the geographic coordinates of any address. 00:00:21.930 --> 00:00:23.860 So if we type and address that. 00:00:24.190 --> 00:00:34.410 OK so for example moderate and click on the Code button then we can see the address coordinates and 00:00:34.410 --> 00:00:40.130 also we going to center our map in that location and create a mock. 00:00:40.580 --> 00:00:42.230 OK. 00:00:42.620 --> 00:00:46.830 Try anything else. 00:00:49.580 --> 00:00:50.770 OK. 00:00:51.030 --> 00:01:00.350 So it just creates a new file in our fight FCP and call its geocoding. 00:01:00.480 --> 00:01:01.070 Most PSP 00:01:10.310 --> 00:01:12.420 is copy the content from the previous file 00:01:21.720 --> 00:01:25.320 and change the title to 00:01:27.950 --> 00:01:29.520 cuckolding. 00:01:30.030 --> 00:01:35.640 Using Google Maps javascript API 00:01:39.130 --> 00:01:42.780 and lets keep only the code where we create the map 00:01:46.640 --> 00:01:50.480 . 00:01:52.470 --> 00:01:53.820 Now let's open a file 00:01:53.850 --> 00:02:01.010 . 00:02:08.380 --> 00:02:09.750 OK. 00:02:10.980 --> 00:02:14.830 So first of all we are going to create an input. 00:02:15.160 --> 00:02:21.240 So is going to be a text input right out of the map 00:02:25.380 --> 00:02:37.140 type text and its place a placeholder in the saying address and also give us an ID address so the button 00:02:37.140 --> 00:02:38.370 is going to say this time 00:02:40.980 --> 00:02:45.060 G-code address. 00:02:48.520 --> 00:02:49.350 OK. 00:02:49.380 --> 00:02:54.960 And we're going to create a function later to execute once we click on the Musson and are going to call 00:02:54.960 --> 00:02:59.580 it dear code address. 00:02:59.580 --> 00:03:02.710 OK. 00:03:06.150 --> 00:03:17.340 So right after creating the map really define our function OK so create the code function 00:03:17.340 --> 00:03:24.500 . 00:03:24.900 --> 00:03:31.020 So first of all we're going to need to create a geocoder object as we only need one method belonging 00:03:31.020 --> 00:03:41.680 to these objects so we before the function Let's create an object. 00:03:44.580 --> 00:03:49.460 So the method we're going to be using is the de-code method. 00:03:50.770 --> 00:03:51.090 OK. 00:03:51.120 --> 00:03:59.560 So let's call this object's decoder and we can we use a constructor which is Google. 00:03:59.560 --> 00:04:04.890 Those maps dots do you code Silje. 00:04:05.290 --> 00:04:15.580 OK so now let's use the method G-code of these objects. 00:04:16.050 --> 00:04:19.410 So this method is going to take a couple of times. 00:04:19.410 --> 00:04:22.160 This is the first problem and so is the request. 00:04:22.580 --> 00:04:23.420 OK. 00:04:23.940 --> 00:04:28.680 And the second parameter is a function. 00:04:29.730 --> 00:04:34.690 He's going to have a couple of promises. 00:04:34.710 --> 00:04:40.290 First one is the result in quality results or results. 00:04:40.500 --> 00:04:42.680 And the second one is the. 00:04:43.470 --> 00:04:44.460 OK. 00:04:44.760 --> 00:04:52.270 So rather than defining the requests outside of function we can do is give the value of the request 00:04:52.270 --> 00:04:53.790 straight away here. 00:04:54.180 --> 00:05:07.070 So it's going to be an object and we're going to be using only one property which is address. 00:05:07.170 --> 00:05:07.700 OK. 00:05:07.950 --> 00:05:15.750 So in our case we want to retrieve the address from the value of our inputs so we can access the inputs 00:05:15.750 --> 00:05:16.580 using its ID 00:05:23.220 --> 00:05:36.910 K which is address and then you get the value of that thing it's all right now inside the function. 00:05:36.920 --> 00:05:40.390 So let's write the code to execute. 00:05:41.820 --> 00:05:45.980 So first of all we are going to check our status. 00:05:46.270 --> 00:05:46.870 OK. 00:05:47.010 --> 00:05:48.960 So if the status is OK 00:05:51.670 --> 00:06:05.490 and the OK value corresponds to Google dot maps those geocoder status that's OK they're going to write 00:06:05.490 --> 00:06:06.340 some code there. 00:06:06.510 --> 00:06:07.070 OK. 00:06:07.370 --> 00:06:12.390 If he's not OK we're going to send this message saying 00:06:15.860 --> 00:06:20.490 do you code not successful pay. 00:06:20.850 --> 00:06:24.100 And we just price the status that 00:06:26.860 --> 00:06:29.350 OK. 00:06:29.970 --> 00:06:37.140 Now if we refresh a page and try without imposing any address 00:06:39.960 --> 00:06:44.200 we see that we are in the second scenario where the stage is not OK. 00:06:44.250 --> 00:06:44.680 OK. 00:06:44.760 --> 00:06:53.710 And the reason is we have zero results because we haven't sent any address inside our request. 00:06:53.930 --> 00:06:54.420 OK. 00:06:54.540 --> 00:07:03.750 Now if our request is or if a status is successful Let's have a look at our results objects. 00:07:03.750 --> 00:07:07.710 So this log is in the console. 00:07:08.410 --> 00:07:08.660 OK 00:07:10.810 --> 00:07:14.360 . 00:07:15.880 --> 00:07:26.190 It's click on Save and refresh the page now and it's right something there. 00:07:26.290 --> 00:07:32.590 Don't click on the button 12 to see the console. 00:07:32.910 --> 00:07:35.420 So it's an array. 00:07:35.490 --> 00:07:36.430 OK. 00:07:37.000 --> 00:07:43.260 It was an object inside the array and you've got a few elements there. 00:07:43.570 --> 00:07:50.160 We're interested in the geometry elements which is an objects an inside the image we have of course 00:07:50.160 --> 00:07:55.470 the location which is called the latitude and longitude. 00:07:55.680 --> 00:07:56.700 So if we try 00:08:00.060 --> 00:08:01.230 to send alerts message 00:08:05.760 --> 00:08:10.670 using the geometry location. 00:08:12.350 --> 00:08:13.200 So this right 00:08:17.730 --> 00:08:19.020 address coordinates 00:08:23.570 --> 00:08:26.340 on and then followed by 00:08:28.830 --> 00:08:30.600 results. 00:08:30.690 --> 00:08:36.050 So we're looking at the elements of index 0 K 00:08:39.300 --> 00:08:50.880 which is an object and then we go into the geometry property and then the location property. 00:08:51.260 --> 00:08:54.910 Great imagery and then location. 00:08:55.000 --> 00:08:58.170 So now if we save and refresh the page 00:09:01.000 --> 00:09:02.610 that puts anything there 00:09:06.900 --> 00:09:07.890 click on the button. 00:09:08.160 --> 00:09:14.880 Now you can see our last message showing the address coordinates. 00:09:15.000 --> 00:09:20.060 Now we're going to use the same value. 00:09:20.580 --> 00:09:32.040 Ok to censor our map in this location so to do that we are going to use the map objects and then the 00:09:32.040 --> 00:09:35.910 method sets sensor OK. 00:09:36.150 --> 00:09:44.460 And as a barometer we're going to put Vaswani save the refresh 00:09:48.000 --> 00:09:55.380 then we try anything there click on the button Cassiar alerts message and then the map is going to be 00:09:55.390 --> 00:09:56.860 censored in that location. 00:09:57.170 --> 00:09:57.870 OK. 00:09:57.870 --> 00:10:01.980 Also we can create a marker using the same value. 00:10:03.060 --> 00:10:08.060 So we create a variable marker. 00:10:08.670 --> 00:10:12.400 I'm going to use the marker constructor. 00:10:14.500 --> 00:10:15.390 OK. 00:10:15.990 --> 00:10:22.450 And you can place the properties of the marker straight away there. 00:10:23.250 --> 00:10:28.300 So the map is now a map. 00:10:28.300 --> 00:10:31.620 There's the map object and the position 00:10:34.110 --> 00:10:36.350 is that location. 00:10:36.430 --> 00:10:37.150 OK. 00:10:37.700 --> 00:10:41.520 They save this and refresh. 00:10:42.910 --> 00:10:46.850 OK let's try something there. 00:10:48.880 --> 00:10:52.540 Now we are in New York and we can see the mike. 00:10:53.210 --> 00:10:54.730 All right. 00:10:55.080 --> 00:11:00.120 In the next video we're going to look at coding using the geocoding API