Now 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 B if you're on Windows.
This is going to pull open the Visual Studio code command pallet and then inside of here we're going
to search four fold Level Two.
I'm going to select that like so so all that does is kind of condense some 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 I.D.
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 gonna 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 documentation on Stack Overflow 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 his file.
And so it would be a little bit of a stretch to only use the same to understand how to create a map
and show it on screen.
But nonetheless I want you to kind of get in the habit of reading these type definition files.
OK.
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 in 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 call the 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 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 h t male 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 H html
element and you know just based on my experience of working with maps that HMO element is probably going
to be it where our Google map is going to be rendered inside of our HMO document.
So I know that was like a real big stretch in thinking and to 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 gonna go back over to my next doctor.
Yes file back over here.
I'm going to clean up all that user and company stuff and come in out the 2 import statements.
Let's 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 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're 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 we call it like so as soon as we write that out we're gonna 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 one or two 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 H html element
of where we want to place our map so we need to first create an e-mail element to house the map and
then pass a reference to it as the first argument.
So I'm gonna open up my index dot HDL file over here right above my script tag I'm going to create a
div to function as the essentially roots or container for the map.
So I gonna make a div with an idea of map.
I'm going to give it a style tag or style property with a height of 100 percent notice how height has
a colon right after it.
1 1/2 percent and then semicolon and I'm going to close that div off like so.
So now we're gonna get a reference to this div right here and pass it as the first argument and to that
constructor it's going to save the H.M. file.
I'm gonna close it and then to get a reference 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 D.
Yeah.
Sorry sometimes the basics elude me right.
Get element by idea because we just give that thing an idea.
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 idea function and we call that
we get back in each team element.
It's not quite the element type that that map constructor was looking for.
Right I 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 a constructor once again we passed in an e-mail 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 cannot we if we want to.
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
into 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 we want to pass in is something called Zoom so I 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 that 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 this as 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 that'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 0 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 index dot to us.
Here's the second object remember this is the options object.
That's the interface definition we are looking at right now.
I'm gonna put in zoom is 1.
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 type scripts going to look at that interfaces definition and know that it can have a property called
Zoom and that's why we're seeing it on the autocomplete right there so going to add in that property
and give it a value of one like so OK.
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 there come in 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
that type of being latitude longitude or lat longitude literal so in our case we're going to go for
lat 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 it too 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 our options object we can add in another property of center notice so as soon as I start typing
that I see the autocomplete that's coming from the interface definition we are 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're just looking
at.
And that's what we're going to try to provide some 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 and a longitude of zero as well.
So that means that the center of our map is going to be at 0 0 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 at 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 want 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 want to expose you to it at least one time.
OK.
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 0 0.
That's like right there latitude and longitude.
I know that you can kind of see North America South America duplicated in 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.