We are now able to show a little pop up window any time a user clicks on a marker, so this is definitely
a good advancement, but now we probably want to customize the content inside of that window.
So let's flip back over to our code editor and figure out how we can do this.
I'm still looking at ad marker right here.
Remember, the content that gets shown in the window is going to be assigned to this content property
when we create the info window.
So the real question here is, how are we going to customize this content?
We probably want to customize that content depending upon whether we passed in a user or a company as
an argument to add marker or put another way, put it more precisely, we probably want to make this
content right here a responsibility of this argument.
In other words, we want this argument, this object to have some property or some method attached to
it.
And any time we reference that property or call it, it should return some string that will be displayed
inside of the info window.
So in other words, what we're doing here is adding in a new requirement for this argument, we're saying
that now in order to be considered, to be matchable or to be an argument to add Merker, you have to
have a method.
Any time we call that method, it should return a string and that string will be some HTML to show inside
the info window.
So in order to update the definition of this argument, we're going to add a new requirement to this
interface.
So remember, we define matchable at the top of the file.
I'm going to go back up here.
So we're going to say that now in order to be considered, to be matchable, to be an argument to the
add marker function, you also have to have a property called.
How about Merker content?
This has to be a function, and any time we call this thing, you have to return a string.
So we've now added in a new requirement to our interface, if we save this and then flip back over to
indexed autists, you'll notice that we now have an air around ad marker and ad marker right here.
If we hover over the arguments, you'll notice that it says property marker content is missing from
user, but it's required by our interface.
So we just updated the interface.
We added in a new requirement to be an argument to add marker.
But user and company do not yet have that property.
So we now have to go back to our user definition or user class and our company class and make sure they
satisfy this new requirement.
They both have to have a method called marker content and they have to return a string.
So let's try doing that right now, back inside of user notes.
I'm going to go down to the bottom of the class underneath the constructor.
Usually our constructor method is going to be at the very top right after any properties we want to
list.
And then right here, we're going to add in marker content.
This is going to be a function.
Any time we call it, we have to return a string.
So then inside of here, we'll return.
How about just like user?
Name is and actually what let's use a template string here so I can use Bachtiar instead just to kind
of inject the user name.
So I'm going to place the tactics and we'll do this name like so.
OK, so now user has a marker content method that returns a string, and that means that now user satisfies
our map interface.
It has all the different properties that Matabele is required to have.
So if we now go back over to inducts, you'll notice that the air is gone.
So now we can repeat the same process for company as well.
I'm going to go back over to my company.
Here's class company right here and again at the bottom of the class.
I'm going to add in a new method called marker content.
It has to be called marker content because that's what our interface right here is requiring.
We cannot just arbitrarily name the methods something different inside of company.
The interface is going to look specifically for a method called marker content.
So back inside of company, here's Markhor content, we're going to annotate it as a return type of
string.
And then inside of here, we can once again return something like company name.
And we'll point out this company name and you know what?
Just for fun, let's also show the company catchphrase as well.
So inside the string, I'm going to turn it into a multiline string like so.
And then we'll do catch phrase is this dot catch phrase.
Remember that these strings can actually be TML, we just saw that inside of the type documentation
file or the type definition file.
So if you wanted to, we could also wrap the company name with an H1 tag.
And maybe the catchphrase gets like an H3.
And then let's just wrap all this with a div.
All right, so looks pretty good.
Now, one thing I want to mention here about this interface stuff, you'll notice that marker content
right here is just saying we have to return string.
That's all it's saying.
This interface is not going to somehow make sure that we are returning like the correct string for marker
content.
So inside of company, that's if we put some like completely gibberish string inside of here with some
nonsense HTML type scripts.
Not going to complain at all.
The only thing TypeScript is doing is making sure that we have this method that recurrent returns the
correct type.
If we goofed, the implementation of the method that's still on us, typescript, can only do so much.
OK, so now we got the new definition of markhor content in both our company and our user, they are
both now satisfying the updated interface so they can continue to be arguments to add.
MERKER You'll notice that both those areas have now gone away.
So now the last thing we have to do is go back over to a custom map down inside of the ad marker function.
We still have a hard coded string here of hi there.
So now we're going to say, rather than using that hardcoded string, take a look at that map argument,
the argument that we passed into ad marker makeable and now has a new function tied to it called Merker
content.
So now any time that we click on the info window rather than showing simply, hi there, we want to
show the content that comes from that marker content function of the argument.
So we'll do matchable.
DOT Markhor content like so.
All right, so that's pretty much it, let's save this thing, I'm going to flip back around my browser,
do a refresh, and then I'll click on one of these and I see username Annik or yeah, I suppose pop
up.
And if I click on the other one, I'll see an H1 and an H three for the company name and catchphrase.
So that's it.
All right, so this has been a lot of fun here.
Let's take a quick pause and we'll do a wrap up in the next section to make sure once again that we
understand what's going on with this interface.
And you want action now they think about it.
There's one last little bit of code I want to add in this project just to show you something very quickly.
So quick pause and we'll see you in just a minute.