In this video I want to start to add in one last feature to our application.
I'm at the Google Maps documentation right here.
Don't worry about pulling this up on your own screen.
I just want to show you something really quickly.
Notice how there's a marker right here.
Just like the marker we have placed.
If I click on that marker I get a little pop up right here that has some information that's relevant
to that marker.
So that's exactly what I want to make inside our application.
I want to make sure that any time we click on one of our markers we show some information relevant to
the company or the user that this marker represents.
So let's figure out first how to just open up a window like this to do so we can either read our type
definition file again or in this case we could just read the official documentation.
In this case we're going to take a look at the official documentation because showing this info window
is a little bit more complicated than adding the marker or showing the map gets it really quickly.
Let's take a look at the documentation so there's a code snippet right here for the map we were just
looking at.
The first thing they do is create a string that contains some amount of each team L. That will be shown
inside of that pop up window then immediately after that they create an instance of something called
an info window the info window is the pop up.
So this is going to be a instance of a class or an object that represents a pop up window when they
create the info window they pass in the content that the window will display as an option.
They then go on to create a marker and then finally they add an event listener to the marker itself.
So any time the marker gets clicked they find the info window they call the open method on it and they
pass in the map that they want to show the window on and the marker that they want to show the window
above.
And that's pretty much it.
So we could look at our type definition file again to understand how to do all this stuff.
But like I said in this case creating an info window is a little bit more complicated.
So I just want to take a look at the official documentation really quickly.
Now having said that let's take a look at the type definition file any ways and just try to find where
the info window is defined inside the type definition and where we can find like all the possible options
we can pass in to customize the info window as well so back inside my editor I'm at custom map I can
do another command click on Google dot map stop map that's going to pull open the type definition file
for Google Maps and inside of here I'm going to do a search for info window and we're looking for class
info window there it is right there so to get a good idea of how to use this info window we could either
read that official documentation or read the type definition file you'll notice that there's actually
comments inside of here to help you understand how to use it.
So here's the constructor no this thing gets called anytime we create an instance of a class.
So in other words anytime we have like this right here new info window that is us calling the constructor.
So this object right here that gets passed in is going to be an argument to the constructor.
So that means that options object is going to be this argument right here and that object has to satisfy
this type.
So we can look at the definition of this type and understand what different options we can pass into
the info window.
So I'm going to again command click on Info window options right here and like I said this will tell
us about all the different properties we can pass into the info window when we create it you'll notice
one of the first options right here is content.
It's like we just saw.
Content is going to be the H team L where the plane string that will be displayed inside the info window
so we can also take a look at some of the other properties we can pass into the info window when we
create it.
None of these other ones are super relevant for us.
But just wanted to to remind you that we can take a look at the different options by referencing the
type index file as opposed to trying to find the different options inside the official documentation.
All right.
So I think that's enough of the type definition file again I just wanted to remind you that we can figure
out how to use an info window by looking at this stuff instead.
All right.
I'm gonna go back over to my custom map class now to get started.
We're just going to try to show a plane in a full window with some generic content inside of it.
I'm not going to worry about showing some information about a specific user or company.
Let's just get like some Hi there or like hello world text inside of an info window.
So to do so I'm gonna go down to my AD marker method so anytime we create a marker I'm going to assign
that marker to a temporary variable like so then I'm going to add an event listener to the marker.
So anytime we click on this marker we're going to run a function inside that function is where we are
going to create our info window.
So I'll say marker dot add listener anytime that thing gets clicked.
Let's run this function right here.
So then inside of here we can create our info window.
So I'll say const info window is new Google Maps dot info window.
We're going to pass in the options object.
Remember that options object can have a content property.
It's going to say that name tell me show this info window.
Just show some content side of it that says Hi there like so.
And then finally we'll do an info window dot open and I'm gonna pass in a reference to the map that
I want to show this window on and a reference to the marker that we're gonna show this above so the
map we're gonna show this on is going to be this dot google map because remember we stored a reference
to our Google map as a property of our custom map class and then the second argument will be the marker
that we want to show this above which is the marker we just created two seconds ago.
Now one thing on a mention really quickly.
I know back over here in the code snippet they first create the info window and then later on once the
marker gets clicked they only call info window dot open.
So we're doing things just a little bit differently.
We are saying we're not going to create the info window until the marker gets clicked.
Honestly there's no difference.
You could just as easily move the creation of the info window outside of the event handler.
It's totally up to you.
No difference whatsoever but I'm going to put it inside because I think the code makes us a little bit
more census y.
All right.
Let's save this and we'll do a quick test back inside of our browser.
So back and so my browser here we go.
I'll do a quick refresh.
And now if I click on a marker I should see a pop up here that says Hi there.
Perfect.
All right so this looks pretty good.
Obviously the only downside here is that we don't have any customization of these pop ups for a company
or a user.
So I don't even know if this marker represents a user or a company.
Let's take another quick pause right here and we'll figure out how to fix that up in the next video.