WEBVTT 00:00:07.390 --> 00:00:13.320 In this video you're are going to write the scripts code and build all the functionalities up. 00:00:13.320 --> 00:00:20.490 So first of all we'll need to embed the Google Maps javascript's API including the places API so we 00:00:20.490 --> 00:00:30.160 can go back to the autocomplete file and just get the script elements from there. 00:00:30.290 --> 00:00:38.540 So let's copy that somewhere in our index those BHB file. 00:00:40.620 --> 00:00:41.550 OK. 00:00:41.940 --> 00:00:50.130 And also this link this file to our javascript file by creating a new script elements 00:00:58.920 --> 00:01:02.200 save this go back to the just cause file. 00:01:02.340 --> 00:01:09.750 So we're going to start by creating a map so to save time we can do is copy the code straight away from 00:01:09.810 --> 00:01:11.980 one of the files we built earlier. 00:01:12.450 --> 00:01:13.120 OK. 00:01:13.500 --> 00:01:21.410 So that's the code for setting the options and those the code for creating them up. 00:01:22.360 --> 00:01:25.530 OK. 00:01:25.770 --> 00:01:32.300 Now we need to make sure that we're linking the map to the right a shemale elements. 00:01:32.770 --> 00:01:35.700 So in our case the ID of the 00:01:39.090 --> 00:01:43.060 containing elements is Google map. 00:01:44.520 --> 00:01:52.200 OK so if we save this and refresh the page 00:02:02.260 --> 00:02:03.840 now we can see our map there. 00:02:04.100 --> 00:02:05.990 OK. 00:02:06.690 --> 00:02:13.120 Now to create the directions service and the direction rendered objects and also bind this last object 00:02:13.120 --> 00:02:19.230 to the map we can use exactly the same code we used in the direction service session. 00:02:19.900 --> 00:02:20.760 OK. 00:02:21.000 --> 00:02:29.760 So we're going to copy the same code and paste it there. 00:02:30.400 --> 00:02:35.100 Now we're going to move to the calculates roots function. 00:02:35.100 --> 00:02:36.900 So in the same session 00:02:39.840 --> 00:02:43.270 we created a similar function. 00:02:43.270 --> 00:02:49.080 Ok so what are we going to do we are going to copy this function and then we're going to customize it 00:02:49.230 --> 00:02:51.060 for our needs 00:02:51.070 --> 00:03:03.950 . 00:03:16.830 --> 00:03:22.020 OK so we need to create the requests first. 00:03:23.560 --> 00:03:24.890 That's what we're doing here. 00:03:25.380 --> 00:03:26.110 OK. 00:03:26.490 --> 00:03:32.220 So the origin we're going to get it from the origin inputs 00:03:35.180 --> 00:03:47.720 so we can replace New York with documents gets elements by id and the ID of the origin is from. 00:03:47.850 --> 00:03:54.510 And then we get the value of the input using the value property. 00:03:55.080 --> 00:03:55.330 OK. 00:03:55.350 --> 00:03:58.590 We're going to do the same thing for the destination 00:04:01.510 --> 00:04:04.680 and we're going to replace from with two. 00:04:05.480 --> 00:04:07.160 OK. 00:04:08.490 --> 00:04:14.260 Now after creating the request we're going to pass the request to the roots method. 00:04:14.700 --> 00:04:16.060 And that's what we're doing here. 00:04:16.350 --> 00:04:18.240 OK. 00:04:19.470 --> 00:04:25.840 So let's takeouts the console the log line. 00:04:29.870 --> 00:04:32.550 And now we are going to check if the is OK. 00:04:32.690 --> 00:04:37.580 We're going to run some code and if he's not OK we can run some other code. 00:04:39.390 --> 00:04:47.550 So if the stages is OK we are going to change the e-mail content of the output box to something like 00:04:47.550 --> 00:04:48.170 this. 00:04:48.420 --> 00:04:50.080 OK so let's copy that 00:04:55.080 --> 00:05:00.940 and let's access the output box using his ID which is which. 00:05:01.980 --> 00:05:03.780 And let's change a shemale 00:05:09.240 --> 00:05:14.360 to something like this so we're going to place a div in inside 00:05:20.090 --> 00:05:24.200 a socialist paste that text. 00:05:25.190 --> 00:05:28.340 So let's give this div a class 00:05:33.850 --> 00:05:36.700 let's info. 00:05:37.950 --> 00:05:41.880 OK to have this nice blue styling. 00:05:42.560 --> 00:05:49.910 OK so we're going to replace the origin 00:05:54.810 --> 00:05:55.380 using 00:06:01.190 --> 00:06:02.810 the value of the origin. 00:06:02.880 --> 00:06:12.570 OK so that's Look humans get elements by ID from value. 00:06:16.490 --> 00:06:19.480 OK you need to replace all that's 00:06:29.720 --> 00:06:31.580 OK and 00:06:38.450 --> 00:06:39.990 let's replace the destination 00:06:51.530 --> 00:06:56.530 with the value of the destination. 00:06:59.400 --> 00:07:01.740 OK. 00:07:03.220 --> 00:07:10.370 So we have a dot there and a line break just before 2:00. 00:07:12.290 --> 00:07:14.270 OK. 00:07:15.410 --> 00:07:19.010 Now let's replace the driving distance 00:07:26.000 --> 00:07:29.100 with the value that we get there. 00:07:29.380 --> 00:07:29.700 OK 00:07:34.460 --> 00:07:36.910 let's break after that that's 00:07:45.110 --> 00:07:49.880 OK and let's replace the value of the duration 00:07:55.010 --> 00:08:00.140 using the duration value. 00:08:03.070 --> 00:08:09.390 OK say code the alert line. 00:08:09.800 --> 00:08:11.860 And now our box looks fine. 00:08:11.930 --> 00:08:12.680 OK. 00:08:12.680 --> 00:08:21.360 Now to display the roots we're going to keep the same code and if the state see is not OK we are going 00:08:21.360 --> 00:08:23.980 to have an else statement 00:08:26.410 --> 00:08:29.560 . 00:08:30.890 --> 00:08:44.060 So we are going to delete the route from the map so to do that we're going to use the direction or that 00:08:44.040 --> 00:08:47.640 direction to display object. 00:08:47.880 --> 00:08:48.290 OK. 00:08:48.290 --> 00:09:00.560 And then we're going to use the method set directions and this time we are going to pass an object 00:09:03.380 --> 00:09:06.340 with an empty root's array. 00:09:06.920 --> 00:09:17.210 OK so if we do this then all the roots in our map are going to be deleted. 00:09:18.170 --> 00:09:19.590 OK. 00:09:20.300 --> 00:09:29.010 And then we want to sensor them up in London so to do that we're going to use the map objects and the 00:09:29.030 --> 00:09:43.230 methhead sets sensor Sensa and we're going to use the variable My attitude longitude corresponding to 00:09:43.350 --> 00:09:45.010 land. 00:09:46.270 --> 00:09:46.820 Okay. 00:09:47.030 --> 00:09:53.630 And finally we need to show the alert message or the error message 00:10:00.140 --> 00:10:08.110 in the US box so we can assess the e-mail contents of the books this time to you Dave 00:10:10.330 --> 00:10:14.190 . 00:10:15.850 --> 00:10:17.900 OK. 00:10:24.170 --> 00:10:26.330 So can I give this Dave a class 00:10:31.410 --> 00:10:32.770 alert danger. 00:10:33.420 --> 00:10:34.450 OK. 00:10:34.670 --> 00:10:38.550 To get a styling like this. 00:10:39.160 --> 00:10:41.230 OK. 00:10:41.420 --> 00:10:46.630 Let's right could not retrieve driving distance. 00:10:48.730 --> 00:10:49.710 OK. 00:10:49.790 --> 00:10:51.470 And finally 00:10:55.490 --> 00:11:01.910 we're going to create the auto complete objects for those inputs. 00:11:02.390 --> 00:11:10.060 So let's go back to the auto complete session and see how we did that. 00:11:11.270 --> 00:11:13.460 So this copy this piece of code 00:11:18.920 --> 00:11:24.920 . 00:11:25.910 --> 00:11:30.360 Ok so for each input we're going to create one object. 00:11:31.110 --> 00:11:34.320 So for the first input let's call it auto complete one. 00:11:34.610 --> 00:11:39.690 It's going to take two promises the inputs and the options of the inputs. 00:11:39.710 --> 00:11:48.860 So for the first input we're looking at the elements of ID from and for the options. 00:11:48.860 --> 00:11:50.390 Let's keep the same options for both 00:11:52.150 --> 00:11:56.520 . 00:11:59.140 --> 00:11:59.900 OK. 00:12:00.200 --> 00:12:05.330 Now this creates the second auto complete over objects. 00:12:05.480 --> 00:12:09.290 So that's going to be input too. 00:12:09.960 --> 00:12:15.820 That's going to be two rather from let's call this one auto complete two. 00:12:16.050 --> 00:12:19.480 We're looking at input too. 00:12:20.200 --> 00:12:21.470 OK. 00:12:21.500 --> 00:12:25.370 Now if we save and refresh the page 00:12:28.930 --> 00:12:30.630 again we can see our map. 00:12:30.830 --> 00:12:40.350 Let's try something let's go from London to Paris so it completes its work let's admit. 00:12:40.930 --> 00:12:46.050 OK so we can see the roots and we can see the output box. 00:12:46.190 --> 00:12:47.670 It's really some solid. 00:12:48.090 --> 00:12:48.960 OK. 00:12:49.250 --> 00:12:57.200 So the driving this is is it kilometer is what we would like to be in miles. 00:12:58.670 --> 00:13:00.250 OK. 00:13:00.950 --> 00:13:05.390 So let's go back to the request 00:13:09.010 --> 00:13:12.050 OK and change metric to 00:13:14.690 --> 00:13:17.240 Imperial. 00:13:17.340 --> 00:13:17.910 OK. 00:13:17.940 --> 00:13:27.550 So I say this refresh for London to fit. 00:13:28.530 --> 00:13:29.130 No. 00:13:29.170 --> 00:13:31.030 It's Miles. 00:13:31.520 --> 00:13:39.820 Now that's some signing to the so this goes to the CSX file. 00:13:41.070 --> 00:13:44.900 Oh it's boots books. 00:13:45.020 --> 00:13:49.710 It's going to access the books using its ID outputs. 00:13:52.540 --> 00:13:59.130 Let's censor the text using the text align property. 00:13:59.170 --> 00:14:11.790 Also let's change the font size for 2 am and let's say this check 00:14:21.230 --> 00:14:26.930 that looks better. 00:14:27.560 --> 00:14:37.380 Now let's add some margin. 00:14:40.550 --> 00:14:43.800 So you can add a little bit of margin of the top and bottom. 00:14:43.970 --> 00:14:45.790 So it is going to be 20. 00:14:45.860 --> 00:14:51.500 And then the zero or to the left and right so it's 00:15:03.200 --> 00:15:08.980 ok we'll need a break just before the driving distance. 00:15:08.990 --> 00:15:12.710 So if we go back to code 00:15:16.760 --> 00:15:21.250 that line break there 00:15:29.360 --> 00:15:39.030 and now it looks better now let's try with one input only and see the error message. 00:15:39.400 --> 00:15:45.890 And now let's try again with both inputs. 00:15:47.450 --> 00:15:52.370 OK so if we miss any inputs we see that we delete the roots. 00:15:52.490 --> 00:15:52.750 OK. 00:15:52.760 --> 00:15:57.770 And we sent a them up in London and if we try with a good one 00:16:00.590 --> 00:16:05.330 then we can see the again. 00:16:08.810 --> 00:16:13.760 And now our OP is complete. 00:16:17.060 --> 00:16:24.710 Congratulations you have just created a professional up using a C Ss javascript's bootstrap and Google 00:16:24.710 --> 00:16:25.850 Maps API. 00:16:26.210 --> 00:16:31.580 You had a chance to review and proxies many of the skills you learned in the complete web development 00:16:31.580 --> 00:16:34.800 course if you created something different. 00:16:34.940 --> 00:16:40.040 Then I would be very interested in seeing what you have done so please share with me and other students 00:16:40.040 --> 00:16:40.390 . 00:16:40.460 --> 00:16:45.740 I look forward to seeing you finishing other projects and becoming a highly skilled and professional 00:16:45.830 --> 00:16:51.930 web developer.