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 appear.
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
Map 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 HMO 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 glucosamine 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 dot to yes
file just write out Google by itself will very quickly see an error message here that says cannot find
any named Google.
It's 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 on side of our project.
We need to help 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 faker J.S. 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 e-mail file as well.
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 J dot com.
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 it type definition file
is at types slash and in the name of the library.
We are using.
So in this case the technical name or as it was added to is 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 API which is exactly what
we are using so we can take a look at the documentation.
It's not really gonna 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 to back inside my terminal.
I'll do an npm install at types slash Google Maps
once I've got that added in I can then flip back over to my editor then once again inside of my index
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.
In fact I can actually hover over this.
It's gonna say something called a namespace which we're going to learn about later on side this course.
Remember anytime that we want to inspect a third party library we're even something that we wrote out
as well just be technical.
We can hold down that command key 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't 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.