1
00:00:00,700 --> 00:00:02,710
We are now able to show a little pop up window.

2
00:00:02,720 --> 00:00:04,530
Anytime a user clicks on a marker.

3
00:00:04,690 --> 00:00:06,410
So this is definitely a good advancement.

4
00:00:06,430 --> 00:00:12,230
But now we probably want to customize the content inside of that window so let's flip back over to our

5
00:00:12,230 --> 00:00:15,170
code editor and figure out how we can do this.

6
00:00:15,170 --> 00:00:17,260
I'm still looking at ad marker right here.

7
00:00:17,300 --> 00:00:21,670
Remember the content that gets shown in the window is going to be assigned to this content property.

8
00:00:21,710 --> 00:00:23,320
When we create the info window.

9
00:00:23,660 --> 00:00:30,140
So the real question here is how are we going to customize this content we probably want to customize

10
00:00:30,140 --> 00:00:37,070
that content depending upon whether we passed in a user or a company as an argument to add marker or

11
00:00:37,130 --> 00:00:39,890
put another way put it more precisely.

12
00:00:39,890 --> 00:00:46,070
We probably want to make this content right here a responsibility of this argument.

13
00:00:46,070 --> 00:00:52,250
In other words we want this argument this object to have some property or some method attached to it.

14
00:00:52,250 --> 00:00:58,730
And any time we reference that property or call it it should return some string that will be it displayed

15
00:00:58,760 --> 00:01:05,400
inside of the info window So in other words what we're doing here is adding in a new requirement for

16
00:01:05,400 --> 00:01:06,550
this argument.

17
00:01:06,630 --> 00:01:12,150
We're saying that now in order to be considered to be magical or to be an argument to add marker you

18
00:01:12,150 --> 00:01:15,920
have to have a method anytime we call that method.

19
00:01:15,920 --> 00:01:22,800
It should return a String and that string will be some H T mail to show Inside the info window so in

20
00:01:22,800 --> 00:01:27,900
order to update the definition of this argument we're going to add a new requirement to this interface

21
00:01:28,750 --> 00:01:31,490
so remember we define malleable at the top of the file.

22
00:01:31,520 --> 00:01:32,780
I got to go back up here.

23
00:01:32,940 --> 00:01:38,010
So we're gonna say that now in order to be considered to be malleable to be an argument to the ad marker

24
00:01:38,010 --> 00:01:45,560
function you also have to have a property called How About marker content.

25
00:01:45,580 --> 00:01:47,260
This has to be a function.

26
00:01:47,410 --> 00:01:53,960
And anytime we call this thing you have to return a string so he'd now add been a new requirement to

27
00:01:53,960 --> 00:01:55,290
our interface.

28
00:01:55,670 --> 00:02:00,740
If we save this and then flip back over to index dot T.S. you'll notice that we now have an error around

29
00:02:00,800 --> 00:02:03,140
ad marker an ad marker right here.

30
00:02:03,470 --> 00:02:09,470
If we hover over the arguments you'll notice that it says property marker content is missing from user

31
00:02:09,790 --> 00:02:12,220
but it's required by our interface.

32
00:02:12,290 --> 00:02:18,590
So we just updated the interface we added in a new requirement to be an argument to add marker but user

33
00:02:18,590 --> 00:02:21,590
and company do not yet have that property.

34
00:02:21,590 --> 00:02:27,440
So we now have to go back to our user definition or User class and our company class and make sure they

35
00:02:27,440 --> 00:02:28,900
satisfy this new requirement.

36
00:02:28,910 --> 00:02:35,720
They both have to have a method called marker content and they have to return a string so let's try

37
00:02:35,720 --> 00:02:36,830
doing that right now.

38
00:02:36,980 --> 00:02:41,330
Back inside of user dot t yes I'm going to go down to the bottom of the class underneath the constructor

39
00:02:42,380 --> 00:02:46,670
usually our constructor method is going to be at the very top right after any properties we want to

40
00:02:46,670 --> 00:02:47,740
list.

41
00:02:48,020 --> 00:02:51,060
And then right here we're going to add in marker content.

42
00:02:51,230 --> 00:02:58,770
This is going to be a function anytime we call it we have to return a string so then inside of here

43
00:02:58,800 --> 00:02:59,610
we'll return.

44
00:02:59,610 --> 00:03:07,950
How about just like user name is and actually and let's use a template string here saying he's back

45
00:03:07,950 --> 00:03:10,760
takes instead just to kind of inject the user name.

46
00:03:11,100 --> 00:03:16,850
So I'm going to place the tactics and we'll do this dot name like so OK.

47
00:03:16,860 --> 00:03:21,280
So now user has a marker content method that returns a string.

48
00:03:21,430 --> 00:03:25,590
That means that now user satisfies our malleable interface.

49
00:03:25,740 --> 00:03:31,710
It has all the different properties that magical is required to have so if we now go back over to index

50
00:03:31,710 --> 00:03:37,870
dot to yes you'll notice that the air is gone so now we can repeat the same process for company as well.

51
00:03:37,870 --> 00:03:42,190
I'm going to go back over to my company here's class company right here.

52
00:03:42,500 --> 00:03:48,580
And again at the bottom of the class I'm going to add in a new method called marker content.

53
00:03:48,740 --> 00:03:53,760
It has to be called marker content because that's what our interface right here is requiring.

54
00:03:53,840 --> 00:03:55,970
We can not just arbitrarily name the method.

55
00:03:55,970 --> 00:03:58,140
Something different inside of company.

56
00:03:58,220 --> 00:04:05,050
The interface is going to look specifically for a method called marker content so back inside of company

57
00:04:05,110 --> 00:04:06,230
here's marker content.

58
00:04:06,250 --> 00:04:12,260
We're going to annotate it as a return type of string and inside of here we can once again return something

59
00:04:12,260 --> 00:04:18,690
like company name and we'll print out this dot company name.

60
00:04:18,690 --> 00:04:19,080
And you know what.

61
00:04:19,080 --> 00:04:23,910
Just for fun let's also show the company catchphrase as well.

62
00:04:23,910 --> 00:04:30,440
So inside the string I'm going to turn it into a multi line string like so and then we'll do catch phrase

63
00:04:30,980 --> 00:04:37,180
is this dot catch phrase Remember that these strings can actually be h t mail.

64
00:04:37,180 --> 00:04:41,230
We just saw that inside of the type documentation file or the typed definition file.

65
00:04:41,230 --> 00:04:47,650
So if you wanted to we could also wrap the company name with an h1 tag and maybe the catch phrase gets

66
00:04:47,650 --> 00:04:52,280
like an H3 and then let's just wrap all this with a div

67
00:04:56,360 --> 00:05:00,350
like some.

68
00:05:00,560 --> 00:05:02,340
All right so Alex pretty good.

69
00:05:02,360 --> 00:05:06,650
Now one thing on a mentioned here about this interface stuff you'll notice that marker content right

70
00:05:06,650 --> 00:05:08,830
here is just saying we have to return string.

71
00:05:08,840 --> 00:05:10,220
That's all it's saying.

72
00:05:10,220 --> 00:05:15,470
This interface is not going to somehow make sure that we are returning like the correct string from

73
00:05:15,470 --> 00:05:17,570
marker content so inside of company dot.

74
00:05:17,610 --> 00:05:18,060
Yes.

75
00:05:18,110 --> 00:05:24,200
If we put some like completely gibberish string inside of here with some nonsense HCM l type scripts

76
00:05:24,200 --> 00:05:25,190
not can complain at all.

77
00:05:25,190 --> 00:05:29,750
The only thing typescript is doing is making sure that we have this method that recurrent returns the

78
00:05:29,750 --> 00:05:30,850
correct type.

79
00:05:30,980 --> 00:05:36,990
If we goof the implementation of the method that's still on us typescript can only do so much.

80
00:05:37,220 --> 00:05:42,460
OK so now we got the new definition of marker content in both our company and our user.

81
00:05:42,460 --> 00:05:49,280
They are both now satisfying the updated interface so they can continue to be arguments to add marker.

82
00:05:49,390 --> 00:05:51,450
You'll notice that both those errors have now gone away.

83
00:05:52,300 --> 00:05:59,300
So now the last thing we have to do is go back over to custom map down inside of the ad marker function.

84
00:05:59,370 --> 00:06:02,640
We still have a hardcoded string here of Hi there.

85
00:06:02,640 --> 00:06:05,690
So now we're gonna say rather than using that hardcoded string.

86
00:06:05,760 --> 00:06:07,740
Take a look at that map ABL argument.

87
00:06:07,830 --> 00:06:13,230
The argument that we passed into ad marker mapping tool and now has a new function tied to it called

88
00:06:13,290 --> 00:06:14,910
marker content.

89
00:06:14,910 --> 00:06:20,220
So now anytime that we click on the info window rather than showing simply Hi there we want to show

90
00:06:20,220 --> 00:06:24,870
the content that comes from that marker content function of the argument.

91
00:06:25,650 --> 00:06:33,870
So we'll do mapping all dot marker content like so.

92
00:06:33,890 --> 00:06:34,820
All right.

93
00:06:34,880 --> 00:06:35,930
So that's pretty much it.

94
00:06:35,960 --> 00:06:42,170
Let's save this thing flip backward in my browser do a refresh and then I'll click on one of these and

95
00:06:42,170 --> 00:06:44,270
I see user name Annick or.

96
00:06:44,870 --> 00:06:45,670
Yeah.

97
00:06:45,680 --> 00:06:51,320
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

98
00:06:51,320 --> 00:06:55,180
name and catchphrase so that's it.

99
00:06:55,180 --> 00:06:55,580
All right.

100
00:06:55,580 --> 00:06:57,230
So this has been a lot of fun here.

101
00:06:57,230 --> 00:07:02,120
Let's take a quick pause and we'll do a wrap up in the next section to make sure once again we understand

102
00:07:02,120 --> 00:07:03,580
what's going on with this interface.

103
00:07:03,800 --> 00:07:04,960
And you would actually now think about it.

104
00:07:04,970 --> 00:07:09,300
There's one last little bit of code I want to add in this project just to show you something very quickly.

105
00:07:09,470 --> 00:07:11,680
So quick pause and I'll see you in just a minute.