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 of application.
I want to make sure that any time that 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 could 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 a really quickly, let's
take a look at the documentation.
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 HTML that will be shown inside of that popup 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 the 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 it 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 anyways 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'm going to do another command click on Google Maps
dot 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.
Remember this thing, it's called any time we create an instance of a class.
So in other words, any time 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.
So you'll notice one of the first options right here is content, it's like we just saw content is going
to be the HTML, where the plane string that will be displayed inside the info window.
So we could also take a look at some of the other properties we can pass in to 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, so I'm going to go back over to my custom map class now to get started.
We're just going to try to show a plane info 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 going to go down to my ad marker method.
So any time 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 any time we click on this marker, we're
going to run a function and inside that function is where we are going to create our info window.
So it's a marker that add listener.
Any time that thing gets clicked, let's run this function right here.
So then instead of here, we can create our info window.
So I say contact 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.
So I'm going to say that any time we show this info window just shows some content side of it that says
hi there like so.
And then finally, we'll do an info window open and I'm going to pass in a reference to the map that
I want to show this window on and a reference to the marker that we're going to show this above.
So the map we're going to 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 I want to 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 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 just going to put it inside, because I think the code makes us a little bit more sense this
way.
All right, let's save this and we'll do a quick test back inside of our browser, so back inside 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 appear 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.