We are now able to show a little pop up window.
Anytime 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 it 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 magical or to be an argument to add marker you
have to have a method anytime we call that method.
It should return a String and that string will be some H T mail 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 malleable at the top of the file.
I got to go back up here.
So we're gonna say that now in order to be considered to be malleable to be an argument to the ad marker
function you also have to have a property called How About marker content.
This has to be a function.
And anytime we call this thing you have to return a string so he'd now add been a new requirement to
our interface.
If we save this and then flip back over to index dot T.S. you'll notice that we now have an error around
ad marker an 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 dot t yes 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 anytime 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 and let's use a template string here saying he's back
takes instead just to kind of inject the user name.
So I'm going to place the tactics and we'll do this dot name like so OK.
So now user has a marker content method that returns a string.
That means that now user satisfies our malleable interface.
It has all the different properties that magical is required to have so if we now go back over to index
dot to yes 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 can not just arbitrarily name the method.
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 marker content.
We're going to annotate it as a return type of string and inside of here we can once again return something
like company name and we'll print out this dot 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 multi line string like so and then we'll do catch phrase
is this dot catch phrase Remember that these strings can actually be h t mail.
We just saw that inside of the type documentation file or the typed definition file.
So if you wanted to we could also wrap the company name with an h1 tag and maybe the catch phrase gets
like an H3 and then let's just wrap all this with a div
like some.
All right so Alex pretty good.
Now one thing on a mentioned 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 from
marker content so inside of company dot.
Yes.
If we put some like completely gibberish string inside of here with some nonsense HCM l type scripts
not can 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 goof 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 marker 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 marker.
You'll notice that both those errors have now gone away.
So now the last thing we have to do is go back over to custom map down inside of the ad marker function.
We still have a hardcoded string here of Hi there.
So now we're gonna say rather than using that hardcoded string.
Take a look at that map ABL argument.
The argument that we passed into ad marker mapping tool and now has a new function tied to it called
marker content.
So now anytime 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 mapping all dot marker content like so.
All right.
So that's pretty much it.
Let's save this thing flip backward in my browser do a refresh and then I'll click on one of these and
I see user name Annick or.
Yeah.
Anyway 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 we understand
what's going on with this interface.
And you would actually now 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 I'll see you in just a minute.