WEBVTT

00:00:07.440 --> 00:00:11.860
Congratulations for making it so far in the complete web development course.

00:00:11.910 --> 00:00:14.400
So very briefly what we have covered so far.

00:00:14.670 --> 00:00:21.450
We started by learning the basics a shemale and says and we managed to create Web sites and decoration

00:00:21.570 --> 00:00:22.760
and styling to them.

00:00:23.280 --> 00:00:29.820
And then we learned javascript's Andrei Querrey and we created interactive Web sites like games.

00:00:29.820 --> 00:00:35.940
And as soon as we learned Twitter was drop and we created responsive web sites which will adapt to any

00:00:35.940 --> 00:00:44.490
device size and after that we learned BHB and my Eskil and we created dynamic web sites and database

00:00:44.490 --> 00:00:46.390
driven web sites.

00:00:46.590 --> 00:00:52.590
Then we moved to word Chris and we learned how to create powerful web sites like logs or e-commerce

00:00:52.590 --> 00:00:54.320
websites.

00:00:54.330 --> 00:00:56.810
Now we are going to move to something different.

00:00:56.820 --> 00:00:58.580
We're going to learn API eyes.

00:00:58.590 --> 00:01:04.070
So what's an API API stands for application programming interface.

00:01:04.800 --> 00:01:11.290
And it's used to exchange data between our Web sites or application and an external application.

00:01:11.760 --> 00:01:19.260
So the way it works is as following We are developers we are going to send a request to the API and

00:01:19.260 --> 00:01:25.580
the API is going to forward the requests to the application in question if the request is allowed.

00:01:25.710 --> 00:01:31.560
Sometimes we are going to have limits in terms of the number of requests we can have a limited number

00:01:31.560 --> 00:01:33.930
of requests per hour per day.

00:01:34.190 --> 00:01:34.720
Okay.

00:01:34.950 --> 00:01:42.840
And then if the application accepts our request is going to return some data and then we can manipulate

00:01:42.930 --> 00:01:47.360
that data inside our application or web sites.

00:01:47.370 --> 00:01:54.210
So in this chapter we are going to focus on the Google Maps API so Google Maps comes with many API is

00:01:54.560 --> 00:01:58.170
that can communicates all sorts of data with our websites.

00:01:58.500 --> 00:02:05.460
We can use Google Maps API is to embed a map on our Web sites we can customize the map by adding many

00:02:05.460 --> 00:02:11.530
features including markers for windows showing data about locations.

00:02:11.580 --> 00:02:19.710
We can also add animations and so on we can use Google Maps API to get directions between two locations

00:02:19.710 --> 00:02:20.580
.

00:02:20.700 --> 00:02:27.780
Also we'll see applications where we can use API is to calculate the driving distance between two cities

00:02:28.230 --> 00:02:36.150
or four months an address or gets the postcode of a certain address will also cover obligations where

00:02:36.150 --> 00:02:43.230
we can use the maps a Abts to search nearby locations will cover other applications where we use API

00:02:43.230 --> 00:02:45.720
is to fill in location inputs.

00:02:46.080 --> 00:02:48.360
Once the user starts typing.

00:02:48.720 --> 00:02:54.060
So for example if you have a setting inputs and once the users are signing with city even before they

00:02:54.060 --> 00:02:58.470
finish we're going to Otsuka bleeds that's sitting.

00:02:58.980 --> 00:03:07.860
So all this is going to help us bring more interactivity and comfits to our user experience.

00:03:08.340 --> 00:03:14.070
Now to get started with the Google Maps API is willing to go to the Google Maps development Web sites

00:03:14.190 --> 00:03:18.660
which is developers both Google does come for large maps.

00:03:18.750 --> 00:03:24.310
So once you learn that you would need to log in using a Gmail account if you don't have one.

00:03:24.300 --> 00:03:28.470
Just make sure you create one and then you log in.

00:03:28.470 --> 00:03:36.120
So we've got several types of Google Maps API is the ones we're going to be looking at in our course

00:03:36.420 --> 00:03:43.770
is the web browsers API is and the web services API is save for look as the web browser API is.

00:03:43.950 --> 00:03:51.110
These will include API is like the javascript API which we are going to use to embed maps in our web

00:03:51.110 --> 00:03:53.110
website and customize them.

00:03:53.540 --> 00:04:00.570
We've got other API is like the Google Places API which is a library of the JavaScript API and are going

00:04:00.570 --> 00:04:08.450
to use it to do things like nearby searches and also other things like ozer completing a location in

00:04:08.460 --> 00:04:09.840
woods.

00:04:10.830 --> 00:04:18.750
Now if we look at the Web services API is they will include API like the geocoding API which will give

00:04:18.750 --> 00:04:23.120
us the geographic coordinates of a certain address.

00:04:24.420 --> 00:04:28.720
So to get started we going need to get a key.

00:04:28.980 --> 00:04:30.620
So weve got two types of keys.

00:04:30.630 --> 00:04:38.730
Weve got the server keys and the browser keys server keys are required by server side API APC's browser

00:04:38.730 --> 00:04:44.360
keys are required by web browser API Yes.

00:04:44.910 --> 00:04:45.510
OK.

00:04:45.750 --> 00:04:51.230
But recently some web browser API is socity requiring services.

00:04:51.510 --> 00:04:51.950
OK.

00:04:52.170 --> 00:04:53.840
So what are we going to do.

00:04:53.910 --> 00:05:01.440
We're going to get wonky which is a server key and he's going to work for server side API and also for

00:05:01.710 --> 00:05:02.880
web browser API.

00:05:03.110 --> 00:05:03.650
OK.

00:05:03.690 --> 00:05:13.880
So it's quick on the gets a key button and then click on continue.

00:05:13.910 --> 00:05:16.270
Now we're going to need to create a new product.

00:05:16.410 --> 00:05:19.450
So it is just click on continue.

00:05:23.040 --> 00:05:26.490
Then you can give the key a name and then click on creates

00:05:29.590 --> 00:05:33.630
just make sure that you protect the key because it's a secret key.

00:05:33.810 --> 00:05:36.570
So that's the value of the key.

00:05:36.720 --> 00:05:37.790
OK.

00:05:37.980 --> 00:05:40.450
So just click on OK.

00:05:42.180 --> 00:05:43.670
So now you've got wonky.

00:05:43.930 --> 00:05:47.040
That's a server key.

00:05:47.510 --> 00:05:52.800
Now to enable a certain API we need to go to the API section.

00:05:52.800 --> 00:05:59.460
So for example in our first example we want to embed a map in our web sites so we're going to use the

00:05:59.490 --> 00:06:01.530
Google Maps javascript API.

00:06:01.760 --> 00:06:02.520
So it's critical it's

00:06:05.430 --> 00:06:09.420
let's enable it.

00:06:09.660 --> 00:06:11.040
OK so let's go back

00:06:15.440 --> 00:06:20.380
later on we're going to use the Google Maps geocoding API.

00:06:20.690 --> 00:06:21.510
Just click on that's

00:06:25.010 --> 00:06:26.140
when it's enabled already.

00:06:26.220 --> 00:06:27.880
OK.

00:06:29.620 --> 00:06:32.540
OK.

00:06:33.500 --> 00:06:36.390
Now Elliston's creating our examples.

00:06:36.480 --> 00:06:40.470
So everything we are going to be doing in this chapter is going to be server side which means we're

00:06:40.470 --> 00:06:43.170
going to be using PSP files.

00:06:43.170 --> 00:06:47.010
So we're going to open my file FCP.

00:06:47.000 --> 00:06:49.520
You can use your free accounts as you've done before.

00:06:49.830 --> 00:06:54.230
So I'm going to use the complex web developments called Web sites for this.

00:06:54.440 --> 00:07:03.840
So I'm going to create a new folder inside the root directory of my website and get of course is nine

00:07:03.840 --> 00:07:07.810
dots Google Maps.

00:07:08.120 --> 00:07:08.790
OK.

00:07:09.360 --> 00:07:17.750
And also going to create the same folder inside my complex web development course folder.

00:07:17.870 --> 00:07:22.630
Make sure you do the same so that you can backup all your files.

00:07:22.640 --> 00:07:25.560
So course it's the same.

00:07:25.560 --> 00:07:29.300
So Google Maps.

00:07:30.240 --> 00:07:32.550
OK let's open this one.

00:07:32.850 --> 00:07:37.210
Let's create our first file Cola's introduction.

00:07:37.560 --> 00:07:40.380
Those BHB.

00:07:42.550 --> 00:07:44.120
OK.

00:07:44.550 --> 00:07:50.480
So in our first example we want to embed a map in our web sites.

00:07:50.750 --> 00:07:54.700
So this is the output we would like to get to.

00:07:56.480 --> 00:07:57.310
OK.

00:07:57.330 --> 00:08:01.010
So you want a map inside our Web sites.

00:08:01.050 --> 00:08:11.730
So what we're going to do is open a file using rockets control.

00:08:15.500 --> 00:08:17.330
OK.

00:08:17.430 --> 00:08:20.250
And also lets access this file

00:08:28.300 --> 00:08:34.060
so we get the address of the Web sites.

00:08:34.980 --> 00:08:45.310
All the boy 9 that Google maps and then the name of the file is one dot introduction.

00:08:45.630 --> 00:08:50.170
Most ph B.

00:08:50.910 --> 00:08:53.430
So at the moment it's a blank page.

00:08:53.970 --> 00:08:59.760
And this is what we want to create.

00:08:59.970 --> 00:09:05.500
Now let's just open the Google Maps folder inside the complete web development course folder.

00:09:05.760 --> 00:09:09.320
OK well you can see our backed up files later on.

00:09:09.450 --> 00:09:14.620
So we're going to need to open the introduction file again.

00:09:14.710 --> 00:09:18.670
Oh OK.

00:09:19.380 --> 00:09:21.820
So we're going to size our page from scratch.

00:09:21.990 --> 00:09:29.210
I'm going to get inspired from the documentation inside the Google Maps development Web sites.

00:09:29.880 --> 00:09:30.840
OK.

00:09:30.870 --> 00:09:33.190
But I'm going to explain things in a really simple way.

00:09:33.380 --> 00:09:36.410
So let's start out from scratch.

00:09:36.440 --> 00:09:44.160
So we're going to have a dog type said to himself wish him a 5.

00:09:44.610 --> 00:09:50.060
And then we can have him all elements that are inside.

00:09:50.070 --> 00:09:55.130
We're going to have the head element and the body elements

00:10:00.540 --> 00:10:00.750
.

00:10:01.060 --> 00:10:01.740
OK.

00:10:01.950 --> 00:10:03.950
So in the head elements.

00:10:04.300 --> 00:10:10.850
Let's give our page a title.

00:10:10.840 --> 00:10:13.560
So I'm going to call its introduction

00:10:16.870 --> 00:10:22.270
or since we're going to be introduced to the Google Maps javascript's API I'm going to quote his introduction

00:10:22.270 --> 00:10:28.690
to Google Apps javascript API.

00:10:29.760 --> 00:10:30.590
OK.

00:10:31.170 --> 00:10:37.680
And then we're going to have a viewport meta data.

00:10:38.120 --> 00:10:39.890
OK.

00:10:41.160 --> 00:10:47.340
So the name is viewport.

00:10:48.960 --> 00:10:53.340
And we're going to do two things we're going to set the initial scale to one.

00:10:53.550 --> 00:11:00.180
When we load the page and also we're going to allow the user to zooming in on these amounts.

00:11:00.180 --> 00:11:07.180
The user is still going to be able to zoom inside the map or zoom them up in and out.

00:11:07.380 --> 00:11:12.360
But any other elements in our page he's not going to be able to zoom in or not.

00:11:12.690 --> 00:11:13.800
So we're going to use

00:11:17.310 --> 00:11:19.350
the content.

00:11:19.630 --> 00:11:30.610
And inside we're going to set the initial scale to one OK and then coma and also the user scaleable

00:11:34.290 --> 00:11:36.060
to know.

00:11:36.960 --> 00:11:40.800
OK.

00:11:41.520 --> 00:11:49.210
Now let's add a style elements.

00:11:49.520 --> 00:11:52.210
We're going to define some signing later.

00:11:52.950 --> 00:11:58.410
OK.

00:12:05.590 --> 00:12:06.370
OK.

00:12:06.390 --> 00:12:09.590
And then let's move to the body elements.

00:12:10.360 --> 00:12:18.480
So at the end of the body elements we are going to create a script elements to embed our javascript

00:12:18.510 --> 00:12:19.470
API.

00:12:20.010 --> 00:12:22.480
So we need to give is a source of abuse.

00:12:22.770 --> 00:12:24.930
So the same size is going to be as following.

00:12:25.050 --> 00:12:37.170
So it's going to be a CPS going on for as large as lunch and then maps that Google API is dot com and

00:12:37.170 --> 00:12:41.920
therefore slush maps for Sly's API for slush.

00:12:42.010 --> 00:12:50.690
James questionmark and then we're going to add our key Okay following key equals nine.

00:12:50.880 --> 00:12:56.250
So together you get to go back to the Web site where we created our key and then click on credentials

00:12:58.010 --> 00:13:05.010
and we can just select our key and compete on that.

00:13:07.190 --> 00:13:15.060
OK so now we have invaded our Google Maps javascript API.

00:13:15.680 --> 00:13:21.520
Quick change that we need the kind of encoding meta elements.

00:13:22.530 --> 00:13:25.540
And that's going to be UTF 8.

00:13:25.790 --> 00:13:26.640
OK.

00:13:26.640 --> 00:13:29.640
Now to create our map.

00:13:29.640 --> 00:13:36.330
First of all we need to create an Ishmail element a div and then we can write some javascript code to

00:13:36.330 --> 00:13:38.130
create the map inside.

00:13:38.670 --> 00:13:40.110
So this creates our first

00:13:43.210 --> 00:13:51.010
give us an ID map for example and then we're going to create another script or the end of the elements

00:13:51.040 --> 00:13:51.920
.

00:13:52.810 --> 00:13:53.890
OK.

00:13:54.030 --> 00:13:59.740
So first of all we need to create an object is called Map

00:14:04.340 --> 00:14:08.960
and to create this object we're going to need a constructor.

00:14:09.120 --> 00:14:14.250
So we will use the keyword new followed by the name of the constructor.

00:14:14.250 --> 00:14:19.170
The constructor is Google Maps dot map capital.

00:14:19.900 --> 00:14:22.590
And this construct is going to take a couple of formulas.

00:14:22.800 --> 00:14:26.710
So the first problem is to use the female elements which is our div.

00:14:27.150 --> 00:14:36.140
So you can access it using its ID and use the function gets elements by ID.

00:14:37.800 --> 00:14:39.170
OK.

00:14:39.200 --> 00:14:44.180
And the second promiser is an object defining the options of our map.

00:14:44.190 --> 00:14:53.360
So let's call this object's map options and define it before creating the map this why is it common

00:14:53.360 --> 00:15:01.030
that sets up options and creates this variable map options.

00:15:01.220 --> 00:15:07.660
So this is going to be an object and it's going to include a few options.

00:15:07.850 --> 00:15:12.230
So the first one is going to be the center of our map and that's the point where we sense our map in

00:15:12.230 --> 00:15:15.330
our case it's going to be loaded.

00:15:16.010 --> 00:15:23.230
So the sense of privacy is also an object that has got two properties the latitude and longitude.

00:15:23.480 --> 00:15:33.220
So for London the latitude is fifty one point five and the longitude is mine is 0.1.

00:15:33.600 --> 00:15:34.390
OK.

00:15:34.820 --> 00:15:39.130
So then to move to the next barometer we're going to use a condom.

00:15:39.230 --> 00:15:42.050
Let's set the zoom Valy.

00:15:42.310 --> 00:15:44.120
It's going to go for seven.

00:15:44.900 --> 00:15:47.950
And also we can choose the type of our map.

00:15:47.960 --> 00:15:52.460
There are a few types hybrid terrain roadmap and satellites.

00:15:52.460 --> 00:15:53.950
Let's go for satellites.

00:15:53.960 --> 00:16:03.850
So to set the type we're going to use the map type ID property and to set these two satellites the syntax

00:16:03.880 --> 00:16:09.950
is Google those maps dot map type ID.

00:16:10.050 --> 00:16:10.480
OK.

00:16:10.550 --> 00:16:12.450
Capital and capital T capital.

00:16:12.550 --> 00:16:17.550
I then thought light in capitalist's.

00:16:17.930 --> 00:16:27.200
So let's say this is a cover of the end of the definition of the object.

00:16:27.200 --> 00:16:29.090
Now if we refresh our page

00:16:32.510 --> 00:16:34.090
at the moment we don't see anything.

00:16:34.230 --> 00:16:39.870
And the reason why is our idea of the moon is it doesn't have any heights so let's go to the style and

00:16:39.860 --> 00:16:42.460
events and give our div a height.

00:16:42.920 --> 00:16:45.600
So we are using the elements using its ID.

00:16:45.880 --> 00:16:52.180
Let's give it a height for example 300 pixels.

00:16:52.420 --> 00:16:54.410
Save refresh.

00:16:55.120 --> 00:16:58.230
And now we can see our map OK.

00:16:58.820 --> 00:17:11.810
So if you want to guess exactly that we can set the height to 60 percent of the height of the page.

00:17:11.900 --> 00:17:24.200
But before we do that is we going to need to set the ACBL and the body to a height of a hundred percent

00:17:24.230 --> 00:17:25.920
.

00:17:27.650 --> 00:17:35.220
Let's use a percentage then let's save and refresh and see where it gets.

00:17:35.660 --> 00:17:44.210
Let's change the map type 2 satellites to a roadmap.

00:17:44.500 --> 00:17:47.150
OK we can do this.

00:17:47.180 --> 00:18:01.940
After creating the map so we let go of the end in the right setting the map type Id been construction

00:18:01.940 --> 00:18:03.390
.

00:18:03.700 --> 00:18:12.110
So to do this we can to access the object map that we defined earlier when we created our map and we

00:18:12.110 --> 00:18:17.540
going to use a method set map type ID.

00:18:17.970 --> 00:18:18.930
OK.

00:18:19.010 --> 00:18:26.770
And this method is going to take one barometer which is going to be following that same sex.

00:18:27.290 --> 00:18:31.740
Rather than satellites we're going to go for roadmap.

00:18:32.390 --> 00:18:40.210
OK so it is save and refresh and our type change to roadmap.

00:18:40.310 --> 00:18:41.690
OK.

00:18:42.200 --> 00:18:45.580
Now let's just make a quick change our code to make it more readable.

00:18:45.710 --> 00:18:52.970
So rather than defining the sensor inside the options I mean it's going to replace this with a variable

00:18:52.970 --> 00:18:54.320
.

00:18:54.320 --> 00:19:02.760
My latitude longitude and I'm going to define that variable at the beginning

00:19:07.400 --> 00:19:13.440
or just before creating the options.

00:19:17.060 --> 00:19:21.150
OK so we understood how to embed maps to our Web sites.

00:19:21.200 --> 00:19:26.570
So in the next video we're going to learn how to add markers and info windows to our maps