In the last section, we installed Google Maps into our project as one side note here, just to really
make sure everything is set up correctly, you can open up your console inside the browser and just
write out Google like so.
And you should see an object like that up here.
If you don't see that once again, it means something was not set up correctly.
All right, so now we've got everything going, we can start to think about how we're going to add in
Google Maps support to our project.
So this is kind of an interesting scenario.
Usually when we make use of typescript, we install dependencies using NPM and we import them with normal
import statements like the one you see right here.
However, this time around, we have added in a script directly to our HTML file.
And so that script is going to be added into our project as a global variable.
It means that essentially inside of our console over here, you notice how I just typed out Google by
itself.
This is a goat to me now to Google a global variable that is available everywhere inside of our project
without import statements or anything like that.
The only issue is that right now, if we flip back over to our editor and inside of our index dots file
just right out, Google by itself will very quickly see an error message here that says cannot find
any name Google.
The reason we are seeing this is that TypeScript just doesn't understand that there is a global variable
available inside of our project.
So we need to help TypeScript understand that.
We need to help TypeScript understand that there will be a global variable available inside of our project.
We need to help it understand the different methods that are available on this Google object.
So to do so, we're going to install another type definition file.
Remember, we spoke about type definition files just a little bit ago.
We installed one for Fakher JS.
The goal of a type definition file is to help TypeScript understand how a third party JavaScript library
works.
We can use these type definition files not only for NPM modules but also for script tags added in directly
to our HTML file as well.
So let's take a look at the documentation for the.
Type definition file, we're going to add once again, I'm going to go to NPM Dotcom and the only reason
I really want to pull up the documentation here is so you can see the name of the package.
Remember the general goal that we use or the general name that we use to get a type definition file
is at types and then the name of the library we are using.
So in this case, the technical name or as it was added to the definitely type project was Google Maps
like.
So that's what we are really looking for.
So you'll see right here type definition files for Google Maps, JavaScript at API, which is exactly
what we are using so we can take a look at the documentation.
It's not really going to tell us a whole bunch besides the fact that, yep, this thing exists and you
can use it to have TypeScript understand what is going on inside that library.
So let's install this type definition file.
This is going to tell TypeScript that there is a global variable called Google and all the different
properties and functions that it has.
So back inside my terminal, I'll do an NPM install at Type's Google Maps.
Once I've got that added in, I can then flip back over to my editor and then once again inside of my
index file, I'm going to write out Google like so.
And now when I do that, I don't get any error message.
In fact, I can actually hover over this is going to say something called a namespace, which we're
going to learn about later on inside this course.
Remember, any time that we want to inspect a third party library or even something that we wrote out
as well, just be technical.
We can hold down that command or control key and then click on that thing like so.
So here's that type definition file for the Google Maps JavaScript SDK.
Once again, we can use this type definition file to get a better idea of how to work with this library,
we can pull up the documentation or we can just try to read this stuff and figure out what is going
on.
All right, so now we've got access to Google Maps, like 100 percent for real, this time inside of
our project.
Let's take a quick pause right here and continue in the next video.
We're going to finally get a map to appear on the screen.