1 00:00:00,920 --> 00:00:05,250 In the last section we installed Google maps into our project as one side note here just to really make 2 00:00:05,250 --> 00:00:06,690 sure everything is set up correctly. 3 00:00:06,690 --> 00:00:11,070 You can open up your console inside the browser and just write out Google like so and you should see 4 00:00:11,070 --> 00:00:13,020 an object like that appear. 5 00:00:13,020 --> 00:00:17,240 If you don't see that once again it means something was not set up correctly. 6 00:00:17,330 --> 00:00:21,090 All right so now we've got everything going we can start to think about how we're going to add in Google 7 00:00:21,090 --> 00:00:23,220 Map support to our project. 8 00:00:23,220 --> 00:00:25,570 So this is kind of an interesting scenario. 9 00:00:25,680 --> 00:00:31,680 Usually when we make use of typescript we install dependencies using NPM and we import them with normal 10 00:00:31,710 --> 00:00:34,220 import statements like the one you see right here. 11 00:00:34,230 --> 00:00:40,320 However this time around we have added in a script directly to our HMO file and so that script is going 12 00:00:40,320 --> 00:00:43,640 to be added into our project as a global variable. 13 00:00:43,650 --> 00:00:48,300 It means that essentially inside of our console over here you notice how I just typed out Google by 14 00:00:48,300 --> 00:00:48,950 itself. 15 00:00:48,960 --> 00:00:54,300 This is a goat glucosamine now to Google a global variable that is available everywhere inside of our 16 00:00:54,300 --> 00:00:58,340 project without import statements or anything like that. 17 00:00:58,440 --> 00:01:03,360 The only issue is that right now if we flip back over to our editor and inside of our index dot to yes 18 00:01:03,360 --> 00:01:08,790 file just write out Google by itself will very quickly see an error message here that says cannot find 19 00:01:08,880 --> 00:01:10,270 any named Google. 20 00:01:10,450 --> 00:01:16,080 It's the reason we are seeing this is that typescript just doesn't understand that there is a global 21 00:01:16,260 --> 00:01:19,230 variable available inside of our project. 22 00:01:19,230 --> 00:01:23,790 So we need to help typescript understand that we need to help typescript understand that there will 23 00:01:23,790 --> 00:01:26,630 be a global variable available on side of our project. 24 00:01:26,760 --> 00:01:33,030 We need to help understand the different methods that are available on this Google object so to do so 25 00:01:33,120 --> 00:01:36,690 we're going to install another type definition file. 26 00:01:36,690 --> 00:01:39,600 Remember we spoke about type definition files just a little bit ago. 27 00:01:39,660 --> 00:01:45,000 We installed one for faker J.S. the goal of a type definition file is to help typescript understand 28 00:01:45,210 --> 00:01:48,510 how a third party javascript library works. 29 00:01:48,750 --> 00:01:56,070 We can use these type definition files not only for NPM modules but also for script tags added in directly 30 00:01:56,070 --> 00:01:58,650 to our e-mail file as well. 31 00:01:58,800 --> 00:02:04,160 Let's take a look at the documentation for the type definition file we're going to add. 32 00:02:04,160 --> 00:02:07,180 Once again I'm going to go to NPM J dot com. 33 00:02:07,220 --> 00:02:11,890 The only reason I really want to pull up the documentation here is so you can see the name of the package. 34 00:02:11,930 --> 00:02:15,920 Remember the general goal that we use or the general name that we use to get it type definition file 35 00:02:15,920 --> 00:02:19,190 is at types slash and in the name of the library. 36 00:02:19,190 --> 00:02:20,170 We are using. 37 00:02:20,280 --> 00:02:26,000 So in this case the technical name or as it was added to is definitely type project was Google Maps 38 00:02:26,030 --> 00:02:28,460 like so that's what we are really looking for. 39 00:02:28,470 --> 00:02:33,470 So you'll see right here type definition files for Google Maps javascript API which is exactly what 40 00:02:33,470 --> 00:02:36,670 we are using so we can take a look at the documentation. 41 00:02:36,680 --> 00:02:40,700 It's not really gonna tell us a whole bunch besides the fact that yep this thing exists and you can 42 00:02:40,700 --> 00:02:45,230 use it to have typescript understand what is going on inside that library. 43 00:02:45,230 --> 00:02:47,330 So let's install this type definition file. 44 00:02:47,330 --> 00:02:53,060 This is going to tell typescript that there is a global variable called Google and all the different 45 00:02:53,060 --> 00:02:57,600 properties and functions that it has to back inside my terminal. 46 00:02:57,710 --> 00:03:02,320 I'll do an npm install at types slash Google Maps 47 00:03:05,100 --> 00:03:09,540 once I've got that added in I can then flip back over to my editor then once again inside of my index 48 00:03:09,540 --> 00:03:17,060 dot t yes file I'm gonna write out Google like so and now when I do that I don't get any error message. 49 00:03:17,100 --> 00:03:19,380 In fact I can actually hover over this. 50 00:03:19,470 --> 00:03:23,990 It's gonna say something called a namespace which we're going to learn about later on side this course. 51 00:03:24,120 --> 00:03:29,310 Remember anytime that we want to inspect a third party library we're even something that we wrote out 52 00:03:29,310 --> 00:03:30,810 as well just be technical. 53 00:03:30,810 --> 00:03:36,040 We can hold down that command key or control key and then click on that thing like so. 54 00:03:36,060 --> 00:03:43,040 So here's that type definition file for the Google Maps Javascript SDK once again we can use this type 55 00:03:43,040 --> 00:03:47,420 definition file to get a better idea of how to work with this library. 56 00:03:47,420 --> 00:03:52,460 We can't pull up the documentation or we can just try to read this stuff and figure out what is going 57 00:03:52,460 --> 00:03:53,060 on. 58 00:03:54,180 --> 00:03:54,480 All right. 59 00:03:54,480 --> 00:03:59,780 So now we've got access to Google Maps like 100 percent for real this time inside of our project. 60 00:03:59,790 --> 00:04:02,940 Let's take a quick pause right here and continue in the next video. 61 00:04:02,940 --> 00:04:05,070 We're going to finally get a map to appear on the screen.