Now that we've got our type definition file loaded up, TypeScript understands what is going on with
this Google library.
This first line of code right here is telling TypeScript that there's going to be a global variable
called Google.
On that variable, there's going to be a property called maps.
And on that property is going to be a bunch of different other properties that are listed out inside
this file to see everything that exists on this maps property.
We can hit command shift P or control shift.
If you're on Windows, this is going to pull open the Visual Studio Code command palette.
And then inside of here we're going to search for fold level two.
I'm going to select that like so.
So all that does is kind of condense some of these different sections of code.
So now we can see all the different properties that this maps object has.
So the maps object has a map property.
And as you might guess, we can use this class right here to create a new map and show it on the screen.
We can also see that this maps object has many other properties like padding map options, map type
ID, gesture, handling options, and you can basically just scroll down the list and this will give
you an overview of everything that's available inside this library.
Here's another one that's probably going to be relevant for us, something called marker.
Remember, we eventually want to show a marker on this map, so we might eventually have to take a look
at this thing right here to understand how to create a marker.
And the reason I want you to look through this is because I want you over time to get in the habit of
reading these type definition files to understand how a library works.
At the end of the day, sure, you can go and take a look at the at documentation on StackOverflow on
how to create a map.
You definitely can do that.
But to really grow as a developer, take a look at these type definition files.
They tell you to some degree everything you need to know about how to work with the library.
Sometimes, like in this case, there's a lot of stuff going on inside this file, and so it would be
a little bit of a stretch to only use this thing to understand how to create a map and show it on the
screen.
But nonetheless, I want you to kind of get in the habit of reading these type definition files.
So anyways, the point here is that this very first thing right here that gets exported, it means that
we've got the Google Maps Global Object, which has a Maps property, which has a map property, and
that map property, capital map is a class.
We can create an instance of this class right here to show a map on the screen.
So let's expand this section right here and get a better understanding of how this class works.
So whenever we create an instance of map, we're going to remember automatically called a constructor
function.
And we are told right here what arguments this constructor function requires.
So I don't really know, you know, necessarily a lot about what's going on here, but you can kind
of read this.
So take a look at it.
It says Map Div and that must be of type element.
If you hover over element, you'll get a little note here, just as a quick hint, an element is an
HTML element.
So by looking at just this constructor and using these hints right here, here's what you might arrive
at.
If you had like a reasonable amount of experience with Google Maps.
What this is essentially telling us is that we can create an instance of a map.
When we do so, we have to pass in a reference to an HTML element.
And, you know, just based on my experience of working with maps, that HTML element is probably going
to be where our Google map is going to be rendered inside of our HTML document.
So I know that was like a real big stretch in thinking, and it'd be kind of hard to connect those dots.
But once again, I just want you to get in the habit of trying to read these things and understand what's
going on.
This is like half the power of TypeScript right here reading these different types and using some little
hints inside of here to understand how these libraries work.
Having said that, let's give this a shot.
So I'm going to go back over to my index file back over here.
I'm going to clean up all that user and company stuff and comment out the two import statements.
Let's just focus on a map for right now.
So like I just mentioned, Google is a reference to the global variable.
If we put a dot here, we get a reminder that it has a maps property and if we put another dot, we
can see a list of all the different properties that belong to that maps object.
That's that big list of all those folded things we were just looking at.
So one of the things inside there is the map class, right?
We were just looking at that.
So we want to create an instance of a map class, to create an instance of something.
We put the new keyword in front of it and then we call it like so.
As soon as we write that out, we're going to get an error.
So it tells us very directly we were expected to call this map class or try to create an instance of
it with 1 to 2 arguments.
So we were expected to pass in that map div thing.
Remember, we are just looking at that inside the type definition file.
And like I said, this map div argument is supposed to be a reference to an HTML element of where we
want to place our map.
So we need to first create an HTML element to house the map and then pass a reference to it as the first
argument.
So I'm going to open up my indexed HTML file.
Over here, right above my script tag.
I'm going to create a div to a function as the essentially root or container for the map.
So I'm going to make a div with an ID of map.
I'm going to give it a style tag or a style property.
With a height of 100%.
Notice how height has a colon right after it, 100%, and then semi colon.
And I'm going to close that dive off like so.
So now we're going to get a reference to this right here and pass it as the first argument into that
constructor.
So I'm going to save the HTML file.
I'm going to close it.
And then to get a reference to that element, I'm going to use a document selector.
So I'll say document Dot.
Oh, what is it?
My mind is totally blank in here.
Get element by ID.
Yeah.
Sorry.
Sometimes the basics elude me, right?
Get element by ID because we just gave that thing an ID So the idea that did we just created was map
like.
So.
So notice the autocomplete that we get right here for the get element by ID function and we call that
we get back in HTML element.
It's not quite the element type that that map constructor was looking for, right?
It was saying, I want an element, but it seems like it's close enough.
We're going to learn a little bit more about how one type can function as another type in a little bit.
But right now, as soon as we add that code in, it looks like everything worked.
All right, Now, before we actually test this out, I want to look at the map type definition file
again.
So here's the constructor.
Once again, we passed in an HTML element as a first argument.
Now, you'll notice that there is a second argument list on here as well.
Notice how the second argument has a question mark right after that.
So whenever you see a question mark like that, it means that this is an optional argument.
We don't have to pass it in.
But if we can, if we want to.
And you'll notice that the type of this second argument is supposed to be map options.
So let's take a look at what map options is.
Notice how MAP options is an interface.
And remember, an interface is kind of like a description of an object in the different properties it
will have.
So if we look at map options right here and look at the interface, it might tell us about the different
options we can pass in to customize this map when it is created.
So I'm going to again hold down command and click on Map options.
And I'm taken to the definition for map options right here.
I'm going to expand this section.
And now we can take a look at all the different properties we can pass in to customize how the map looks.
Well, this is pretty awesome.
So we can scroll through here and notice how this time there are nice little comments to tell us exactly
how to customize the map.
So all the things that you see inside of here, these are all possible properties that we could pass
in as the second argument to this map constructor.
Like right here, we can take all these different properties we see right here and list them in right
here inside this second object.
So for you and I, we are concerned with two very specific options.
The very first one that we want to pass in is something called Zoom.
So I'm going to scroll down a little bit inside this map options interface.
And I'm going to look for one property inside of here called Zoom right here.
So notice how it says zoom in the question mark.
Remember that question mark means that this is an optional property.
We don't have to include if we don't want to.
But for you and I, we do.
So it says the initial map level zoom now kind of misleading.
It says right here that it is required even though it was marked as optional.
So that's kind of like, I don't know what's going on there.
They're saying it's required.
So yeah, we are going to pass it in ourselves and then it gives us some information about what different
valid values we can pass in for it.
So for us, valid values are numbers between zero and up to the maximum zoom level.
So we're going to use a starting zoom level of one, which is like pretty darn zoomed out.
So back inside of indexes, here's this second object.
Remember, this is the options object.
That's the interface definition we are looking at right now.
And I'm going to put in Zoom is one.
Notice how as soon as I started typing that, I got some autocomplete on Zoom right here.
We're seeing that autocomplete because TypeScript knows that.
The second argument to this constructor is supposed to be an object that satisfies that interface we
are just looking at.
So TypeScript is going to look at that interface definition and know that it can have a property called
Zoom, and that's why we are seeing it on the autocomplete right there.
So I'm going to add in that property and give it a value of one like so.
Okay.
One other property we're going to add in.
Again, it is one of the different options we can pass in under this map.
Options Interface.
So here's map options again.
I'm going to scroll down just a little bit more.
And we're looking for center right here.
Again, notice how even though it has a question mark right here, which means that it is technically
an optional property, they still say in their comment right here required.
So kind of misleading right there.
But I guess they're just doing their thing.
So this is saying that our map options object can have a center property.
And if it does, it must satisfy the type of being latitude, longitude or lat longitude.
Literal.
So in our case, we're going to go for longitude literal.
I'm going to give you that little hint.
So now to figure out how to provide a center property that satisfies this interface right here, we
can again do a command click on that.
And it's going to tell us how we can be considered to be a latitude longitude, literal.
So to be allowed to launch to literal, we have to pass in an object.
That has a latitude.
That's a number and a longitude.
That's a number.
So that means that back here inside of our map options object, we can add in another property.
Of center.
Notice how as soon as I start typing that, I see the autocomplete that's coming from the interface
definition we were just looking at.
And if I put on a colon or if I just hover over center, it tells me that the center property is supposed
to be an instance of latitude longitude or that latitude longitude literal thing that we were just looking
at.
And that's what we're going to try to provide.
So that means that we're going to pass in an object here that has that lat property.
We're going to use a value of zero angle longitude of zero as well.
So that means that the center of our map is going to be at zero zero.
Okay.
I know that this entire process was like really far very much in depth.
But again, my only intent here is to just start kind of forcibly exposing you to these type definition
files, because you can do that command click and look through all these different types and use them
as hints to understand how to work with the library.
You don't have to look at the documentation all the time when you are working with TypeScript.
I apologize again for this video being so long, but I just wanted you to look through an entire example
with Google Maps of how I personally would go through that process.
I also know that some of the things I showed you in here was probably like, you know, a little bit
of a jump.
Like, we haven't quite seen this syntax before right here.
So I know some of that was a little bit rough, but again, just one to expose you to it at least one
time.
Okay.
Having said all that, we've now got our options object put together right here.
So I'm not going to save this file.
I'm going to flip back over to my browser.
And lo and behold, we see our map.
All right.
You'll notice that the map is technically centered on zero zero.
That's like, right there.
Latitude and longitude.
I know that you can kind of see North America, South America duplicated, and Asia, of course, as
well.
But this is going to work for our application.
All right.
So let's take a quick pause right here.
Going to come back in the next video.
We're going to start to think about how we can show our user in our company as markers on this map.
So quick pause and I'll see you in just a minute.