1
00:00:00,840 --> 00:00:05,100
In the last section, we installed Google Maps into our project as one side note here, just to really

2
00:00:05,100 --> 00:00:08,820
make sure everything is set up correctly, you can open up your console inside the browser and just

3
00:00:08,820 --> 00:00:10,170
write out Google like so.

4
00:00:10,440 --> 00:00:12,540
And you should see an object like that up here.

5
00:00:12,930 --> 00:00:16,350
If you don't see that once again, it means something was not set up correctly.

6
00:00:17,200 --> 00:00:20,770
All right, so now we've got everything going, we can start to think about how we're going to add in

7
00:00:20,770 --> 00:00:22,400
Google Maps support to our project.

8
00:00:23,140 --> 00:00:25,210
So this is kind of an interesting scenario.

9
00:00:25,600 --> 00:00:31,690
Usually when we make use of typescript, we install dependencies using NPM and we import them with normal

10
00:00:31,690 --> 00:00:33,470
import statements like the one you see right here.

11
00:00:34,120 --> 00:00:38,830
However, this time around, we have added in a script directly to our HTML file.

12
00:00:39,280 --> 00:00:43,600
And so that script is going to be added into our project as a global variable.

13
00:00:43,610 --> 00:00:48,280
It means that essentially inside of our console over here, you notice how I just typed out Google by

14
00:00:48,280 --> 00:00:48,690
itself.

15
00:00:48,910 --> 00:00:54,820
This is a goat to me now to Google a global variable that is available everywhere inside of our project

16
00:00:54,940 --> 00:00:57,600
without import statements or anything like that.

17
00:00:58,360 --> 00:01:03,730
The only issue is that right now, if we flip back over to our editor and inside of our index dots file

18
00:01:03,940 --> 00:01:08,830
just right out, Google by itself will very quickly see an error message here that says cannot find

19
00:01:08,830 --> 00:01:09,730
any name Google.

20
00:01:10,620 --> 00:01:16,840
The reason we are seeing this is that TypeScript just doesn't understand that there is a global variable

21
00:01:16,840 --> 00:01:18,490
available inside of our project.

22
00:01:19,180 --> 00:01:21,430
So we need to help TypeScript understand that.

23
00:01:21,430 --> 00:01:26,320
We need to help TypeScript understand that there will be a global variable available inside of our project.

24
00:01:26,690 --> 00:01:31,420
We need to help it understand the different methods that are available on this Google object.

25
00:01:32,290 --> 00:01:36,160
So to do so, we're going to install another type definition file.

26
00:01:36,640 --> 00:01:39,490
Remember, we spoke about type definition files just a little bit ago.

27
00:01:39,610 --> 00:01:41,560
We installed one for Fakher JS.

28
00:01:42,040 --> 00:01:47,650
The goal of a type definition file is to help TypeScript understand how a third party JavaScript library

29
00:01:47,650 --> 00:01:48,130
works.

30
00:01:48,670 --> 00:01:56,080
We can use these type definition files not only for NPM modules but also for script tags added in directly

31
00:01:56,080 --> 00:01:57,490
to our HTML file as well.

32
00:01:58,710 --> 00:02:01,530
So let's take a look at the documentation for the.

33
00:02:02,680 --> 00:02:07,660
Type definition file, we're going to add once again, I'm going to go to NPM Dotcom and the only reason

34
00:02:07,660 --> 00:02:11,620
I really want to pull up the documentation here is so you can see the name of the package.

35
00:02:11,900 --> 00:02:15,910
Remember the general goal that we use or the general name that we use to get a type definition file

36
00:02:15,910 --> 00:02:19,870
is at types and then the name of the library we are using.

37
00:02:20,290 --> 00:02:26,040
So in this case, the technical name or as it was added to the definitely type project was Google Maps

38
00:02:26,050 --> 00:02:26,200
like.

39
00:02:26,230 --> 00:02:27,790
So that's what we are really looking for.

40
00:02:28,450 --> 00:02:33,310
So you'll see right here type definition files for Google Maps, JavaScript at API, which is exactly

41
00:02:33,310 --> 00:02:36,620
what we are using so we can take a look at the documentation.

42
00:02:36,640 --> 00:02:40,570
It's not really going to tell us a whole bunch besides the fact that, yep, this thing exists and you

43
00:02:40,570 --> 00:02:44,330
can use it to have TypeScript understand what is going on inside that library.

44
00:02:45,160 --> 00:02:46,930
So let's install this type definition file.

45
00:02:47,290 --> 00:02:53,050
This is going to tell TypeScript that there is a global variable called Google and all the different

46
00:02:53,050 --> 00:02:54,940
properties and functions that it has.

47
00:02:55,890 --> 00:03:02,310
So back inside my terminal, I'll do an NPM install at Type's Google Maps.

48
00:03:05,020 --> 00:03:09,190
Once I've got that added in, I can then flip back over to my editor and then once again inside of my

49
00:03:09,190 --> 00:03:13,270
index file, I'm going to write out Google like so.

50
00:03:13,720 --> 00:03:16,400
And now when I do that, I don't get any error message.

51
00:03:17,020 --> 00:03:21,670
In fact, I can actually hover over this is going to say something called a namespace, which we're

52
00:03:21,670 --> 00:03:23,350
going to learn about later on inside this course.

53
00:03:24,070 --> 00:03:29,320
Remember, any time that we want to inspect a third party library or even something that we wrote out

54
00:03:29,320 --> 00:03:30,550
as well, just be technical.

55
00:03:30,760 --> 00:03:35,280
We can hold down that command or control key and then click on that thing like so.

56
00:03:36,040 --> 00:03:40,300
So here's that type definition file for the Google Maps JavaScript SDK.

57
00:03:41,290 --> 00:03:46,890
Once again, we can use this type definition file to get a better idea of how to work with this library,

58
00:03:47,350 --> 00:03:52,450
we can pull up the documentation or we can just try to read this stuff and figure out what is going

59
00:03:52,450 --> 00:03:52,750
on.

60
00:03:54,040 --> 00:03:59,050
All right, so now we've got access to Google Maps, like 100 percent for real, this time inside of

61
00:03:59,050 --> 00:03:59,560
our project.

62
00:03:59,740 --> 00:04:02,650
Let's take a quick pause right here and continue in the next video.

63
00:04:02,890 --> 00:04:05,080
We're going to finally get a map to appear on the screen.