WEBVTT 00:00:11.360 --> 00:00:17.910 In this video we are going to get introduced to the Google Maps geocoding API and then we'll use the 00:00:17.910 --> 00:00:24.330 API to build an application that will take any address return the formatted address. 00:00:24.330 --> 00:00:28.860 Also the demographic coordinates of our address and the postcode. 00:00:29.310 --> 00:00:34.550 And then it will show the address on a map with a high zoom level and pinpoint the address using a Mac 00:00:34.550 --> 00:00:35.600 . 00:00:35.820 --> 00:00:44.200 So first of all let's have a look at our documentation inside the Google Maps development's website 00:00:44.260 --> 00:00:44.580 . 00:00:44.910 --> 00:00:45.250 OK. 00:00:45.270 --> 00:00:48.650 Followed by documentation for slushed geocoding. 00:00:49.200 --> 00:00:55.950 So in this website you can find a lot of documentation about the decoding API so to explain what's geocoding 00:00:55.980 --> 00:01:06.060 is OK and then it will explain things like usage limits by the way we will need a server side key which 00:01:06.060 --> 00:01:07.840 we are already using. 00:01:08.430 --> 00:01:15.790 For you this limits with the free accounts or freaky we can get 2500 free requests per day. 00:01:15.900 --> 00:01:16.510 OK. 00:01:16.940 --> 00:01:22.230 And that's quite generous if you think you need more and that's then you need to enable billing. 00:01:22.390 --> 00:01:25.480 So by clicking on that link and then follow the process. 00:01:26.130 --> 00:01:38.730 So now to use geocoding the way to do that is by sending a request so the request is going to be as 00:01:38.850 --> 00:01:40.710 you are all in this column. 00:01:41.460 --> 00:01:48.010 So inside the Arel we are going to have two main components the output formats and the parameters. 00:01:48.450 --> 00:01:56.130 So the output formats can be either Jason or SML are going to come back to these innovators and then 00:01:56.130 --> 00:02:01.250 the promises they were include things like our address and our society. 00:02:01.670 --> 00:02:02.620 OK. 00:02:03.210 --> 00:02:05.670 So let's have a look at one example 00:02:08.670 --> 00:02:15.050 so you can use this example by inserting the Silverside key. 00:02:15.070 --> 00:02:23.820 So if I click on the key there and then choose a key to insert so it needs to be a service ID so going 00:02:23.820 --> 00:02:25.670 to click on insert. 00:02:25.680 --> 00:02:37.260 Now we can copy this URL using the icon and then if we paste the URL when our address bar then this 00:02:37.260 --> 00:02:38.360 is what we get. 00:02:38.880 --> 00:02:42.190 So this is a Dasen outputs. 00:02:42.720 --> 00:02:43.620 OK. 00:02:43.770 --> 00:02:51.240 Of course Dasen because our outputs Parminter is Jason. 00:02:51.240 --> 00:02:54.050 Later on are we going to use an Excel outputs. 00:02:54.330 --> 00:02:57.370 But for now let's understand where Jason is. 00:02:57.510 --> 00:03:02.710 So Jason is a syntax for storing and exchanging data. 00:03:02.910 --> 00:03:11.040 It will return data in a human readable format and we can manipulate Jason using javascript. 00:03:11.550 --> 00:03:18.890 And the reason why is because first of all it's an object and it contains objects and arrays in sight 00:03:18.890 --> 00:03:19.500 . 00:03:19.860 --> 00:03:24.720 So we can use javascript's and equerry functions to manipulate it. 00:03:24.780 --> 00:03:32.850 So inside our Jason our boots or objects you can see things like the formatted address of the address 00:03:32.850 --> 00:03:34.840 we passed in the URL. 00:03:35.190 --> 00:03:35.860 OK. 00:03:36.090 --> 00:03:39.940 You can also see the law issued and longitude of our address. 00:03:40.110 --> 00:03:41.700 You can see the postcode. 00:03:42.350 --> 00:03:44.060 OK. 00:03:44.130 --> 00:03:53.100 So we understand later how to manipulate this file or objects using javascript's Jay equerry and retrieve 00:03:53.160 --> 00:03:55.430 all the data we want. 00:03:56.140 --> 00:03:59.450 Now let's go back to the SML outputs. 00:03:59.520 --> 00:04:01.650 So it's exactly the same syntax. 00:04:01.710 --> 00:04:04.010 We're just going to replace Dasent with SML 00:04:12.270 --> 00:04:15.180 and now we are getting an XML file. 00:04:15.690 --> 00:04:19.330 So ex-MIL stores data in trees. 00:04:19.920 --> 00:04:29.590 OK so this is different from Jason which will store data in objects and arrays. 00:04:29.640 --> 00:04:36.360 So Jason is closer in his structure to object oriented languages. 00:04:36.360 --> 00:04:43.290 So this makes it very easy to import data from a decent file into languages like javascript's. 00:04:43.580 --> 00:04:44.340 OK. 00:04:44.610 --> 00:04:50.940 So in our code later we're going to use a Jasen output. 00:04:50.970 --> 00:05:01.030 Now let's go to our FCP creates a new file and starts building our application. 00:05:01.080 --> 00:05:06.910 So this name is decoding API with Ph. 00:05:07.940 --> 00:05:09.290 OK. 00:05:10.170 --> 00:05:12.130 Now let's open the file using brackets 00:05:17.900 --> 00:05:28.530 Erlass copy the code from the previous file and change the title to decoding API. 00:05:29.360 --> 00:05:38.360 So are you going to keep only the code where we created the map gave you this. 00:05:38.460 --> 00:05:40.370 And now let's open the file 00:05:40.380 --> 00:05:47.430 . 00:05:54.470 --> 00:05:55.430 OK. 00:05:57.020 --> 00:06:04.870 So once we click on the de-code button we are going to execute the function de-code address. 00:06:05.090 --> 00:06:06.800 OK so let's create this function 00:06:06.800 --> 00:06:24.400 . 00:06:26.360 --> 00:06:29.190 So first of all we need to create our u r l. 00:06:29.360 --> 00:06:31.670 So we're going to source inside a variable. 00:06:31.670 --> 00:06:32.910 You are ill. 00:06:33.670 --> 00:06:34.240 OK. 00:06:34.430 --> 00:06:42.480 So let's go back to the Google Maps website and gets the URL from there. 00:06:44.850 --> 00:06:49.640 You can just click on that icon if you want to to copy the URL 00:06:53.850 --> 00:06:57.140 in this space inside. 00:06:57.390 --> 00:06:58.390 It's 00:07:02.800 --> 00:07:03.130 OK 00:07:06.410 --> 00:07:08.070 now inside you are ill. 00:07:08.120 --> 00:07:11.050 We want to use the address imposed by the user. 00:07:11.240 --> 00:07:13.850 So let's replace the current address 00:07:16.830 --> 00:07:21.520 OK with the address given by the user. 00:07:21.650 --> 00:07:26.390 So to do that we're going to access this computer and guess the value of the inputs so that KIMMONS 00:07:27.160 --> 00:07:30.920 gets elements by my ID. 00:07:33.380 --> 00:07:34.540 OK. 00:07:34.790 --> 00:07:42.530 And the ID of the inputs is address that we need to use the value property to guess the value of our 00:07:42.530 --> 00:07:43.520 inputs. 00:07:44.050 --> 00:07:48.630 OK so now what Start with something simple let's just open this you know. 00:07:48.870 --> 00:07:49.710 OK. 00:07:50.120 --> 00:07:50.540 So 00:07:53.900 --> 00:08:02.370 we're going to use a method open up window and we're going to pass the URL in the province. 00:08:02.930 --> 00:08:06.680 So to save this refresh our page. 00:08:08.290 --> 00:08:08.640 OK. 00:08:08.660 --> 00:08:15.790 Now let's try and address that. 00:08:16.470 --> 00:08:22.540 Then click on the button and now we can see where Dasen file. 00:08:23.900 --> 00:08:27.260 So our Dasen objects contains two elements. 00:08:27.260 --> 00:08:34.850 The results elements which is in the right and the stage is elements which is a string representing 00:08:34.880 --> 00:08:36.460 the status of our requests. 00:08:36.530 --> 00:08:39.870 If the request is successful the status is OK. 00:08:40.610 --> 00:08:42.560 So it's a place this file. 00:08:42.560 --> 00:08:45.660 We're going to need a day query function called get Jason. 00:08:45.860 --> 00:08:50.300 So first of all let's get equerry an embed is in our file. 00:08:50.820 --> 00:08:56.890 So let's use Google CDN for that. 00:08:58.610 --> 00:09:05.690 And these guys take Querrey and it's copied from there. 00:09:05.750 --> 00:09:10.960 Now let's place this script just before scripts. 00:09:11.760 --> 00:09:12.620 OK. 00:09:12.890 --> 00:09:18.370 So the function is called adjacent. 00:09:18.620 --> 00:09:26.580 So the syntax is dollar sign don't get Jason is going to take a couple of promises. 00:09:26.780 --> 00:09:31.350 So the first parameter is going to be r u r l. 00:09:31.970 --> 00:09:37.240 The second Brahmi set is a function which will take 1 promiser data for example. 00:09:37.930 --> 00:09:38.210 OK. 00:09:38.210 --> 00:09:40.570 Where are we going to store the data in the file. 00:09:40.920 --> 00:09:42.620 OK so 00:09:46.580 --> 00:09:52.960 let's write some code inside this function so let's alert the status of our request. 00:09:53.480 --> 00:10:02.090 So to access the seizures we're going to access the data in the file and then the status property file 00:10:02.120 --> 00:10:05.790 is data and then switches. 00:10:06.620 --> 00:10:07.390 OK. 00:10:07.730 --> 00:10:15.190 So let's save this and refresh our page. 00:10:15.530 --> 00:10:23.960 So if we try to click on the button without using any address there the message is going to say 0 results 00:10:23.960 --> 00:10:24.560 . 00:10:24.610 --> 00:10:28.220 And the reason is because we didn't give any address. 00:10:28.250 --> 00:10:29.980 OK. 00:10:30.180 --> 00:10:34.680 And you can see the stages there zero results and we don't have any results. 00:10:34.880 --> 00:10:36.740 Now if we try and address that 00:10:44.720 --> 00:10:53.420 now the status is OK and we've got results that now we are going to write some code to check if the 00:10:53.450 --> 00:10:55.140 request is successful. 00:10:55.160 --> 00:11:01.670 So if it's successful then we are going to formis the address like this and show the coordinates and 00:11:01.680 --> 00:11:02.500 postcode. 00:11:02.870 --> 00:11:08.360 Otherwise if it's not successful for example if we don't give any address in the inputs then we're going 00:11:08.360 --> 00:11:11.870 to show a message saying request and successful. 00:11:12.020 --> 00:11:15.720 So you to need a div where we're going to place all these messages. 00:11:16.070 --> 00:11:25.120 So this creates a div right after the button and let's give you some ID outputs. 00:11:25.970 --> 00:11:26.880 OK. 00:11:27.170 --> 00:11:35.790 So to check if the request is successful we're going to use the status property of the Dasen file. 00:11:36.680 --> 00:11:37.340 So if 00:11:40.280 --> 00:11:41.060 the status 00:11:43.640 --> 00:11:49.830 is OK then we're going to write some code there to execute. 00:11:49.930 --> 00:11:53.710 Otherwise we're going to have some other code. 00:11:53.840 --> 00:11:58.030 So let's start with the scenario where it's not successful. 00:11:58.220 --> 00:12:02.960 So we are going to access the outputs using these ID 00:12:05.290 --> 00:12:15.770 and we we're going to change it's a shemale content to the message that we hear requests and successful 00:12:16.270 --> 00:12:17.540 . 00:12:18.350 --> 00:12:19.220 OK. 00:12:20.120 --> 00:12:21.830 So it save our code. 00:12:22.100 --> 00:12:32.420 And before we try that legist comments that line where we open the URL OK it's save and refresh the 00:12:32.420 --> 00:12:34.520 page. 00:12:34.700 --> 00:12:40.100 And now if you don't splays any address in the inputs and click on the geocoder button we can see a 00:12:40.100 --> 00:12:42.040 message to request and successful. 00:12:42.280 --> 00:12:47.670 OK.