1 00:00:00,620 --> 00:00:05,450 We are now able to show a little pop up window any time a user clicks on a marker, so this is definitely 2 00:00:05,450 --> 00:00:09,970 a good advancement, but now we probably want to customize the content inside of that window. 3 00:00:10,870 --> 00:00:14,320 So let's flip back over to our code editor and figure out how we can do this. 4 00:00:15,060 --> 00:00:16,860 I'm still looking at ad marker right here. 5 00:00:17,230 --> 00:00:21,630 Remember, the content that gets shown in the window is going to be assigned to this content property 6 00:00:21,670 --> 00:00:23,040 when we create the info window. 7 00:00:23,620 --> 00:00:27,610 So the real question here is, how are we going to customize this content? 8 00:00:29,010 --> 00:00:35,010 We probably want to customize that content depending upon whether we passed in a user or a company as 9 00:00:35,010 --> 00:00:41,490 an argument to add marker or put another way, put it more precisely, we probably want to make this 10 00:00:41,490 --> 00:00:45,230 content right here a responsibility of this argument. 11 00:00:45,960 --> 00:00:51,570 In other words, we want this argument, this object to have some property or some method attached to 12 00:00:51,570 --> 00:00:51,780 it. 13 00:00:52,140 --> 00:00:58,740 And any time we reference that property or call it, it should return some string that will be displayed 14 00:00:58,740 --> 00:01:00,330 inside of the info window. 15 00:01:01,390 --> 00:01:07,150 So in other words, what we're doing here is adding in a new requirement for this argument, we're saying 16 00:01:07,150 --> 00:01:12,520 that now in order to be considered, to be matchable or to be an argument to add Merker, you have to 17 00:01:12,520 --> 00:01:13,450 have a method. 18 00:01:14,360 --> 00:01:19,850 Any time we call that method, it should return a string and that string will be some HTML to show inside 19 00:01:19,850 --> 00:01:20,650 the info window. 20 00:01:22,510 --> 00:01:27,280 So in order to update the definition of this argument, we're going to add a new requirement to this 21 00:01:27,280 --> 00:01:27,880 interface. 22 00:01:28,820 --> 00:01:31,140 So remember, we define matchable at the top of the file. 23 00:01:31,430 --> 00:01:32,540 I'm going to go back up here. 24 00:01:32,870 --> 00:01:37,430 So we're going to say that now in order to be considered, to be matchable, to be an argument to the 25 00:01:37,430 --> 00:01:41,930 add marker function, you also have to have a property called. 26 00:01:42,950 --> 00:01:44,630 How about Merker content? 27 00:01:45,530 --> 00:01:50,720 This has to be a function, and any time we call this thing, you have to return a string. 28 00:01:51,810 --> 00:01:57,480 So we've now added in a new requirement to our interface, if we save this and then flip back over to 29 00:01:57,480 --> 00:02:02,760 indexed autists, you'll notice that we now have an air around ad marker and ad marker right here. 30 00:02:03,390 --> 00:02:08,970 If we hover over the arguments, you'll notice that it says property marker content is missing from 31 00:02:08,970 --> 00:02:11,430 user, but it's required by our interface. 32 00:02:12,220 --> 00:02:14,070 So we just updated the interface. 33 00:02:14,070 --> 00:02:17,580 We added in a new requirement to be an argument to add marker. 34 00:02:18,030 --> 00:02:20,940 But user and company do not yet have that property. 35 00:02:21,510 --> 00:02:27,450 So we now have to go back to our user definition or user class and our company class and make sure they 36 00:02:27,450 --> 00:02:28,890 satisfy this new requirement. 37 00:02:28,890 --> 00:02:33,780 They both have to have a method called marker content and they have to return a string. 38 00:02:35,240 --> 00:02:38,500 So let's try doing that right now, back inside of user notes. 39 00:02:38,690 --> 00:02:41,360 I'm going to go down to the bottom of the class underneath the constructor. 40 00:02:42,320 --> 00:02:46,670 Usually our constructor method is going to be at the very top right after any properties we want to 41 00:02:46,670 --> 00:02:47,030 list. 42 00:02:47,900 --> 00:02:50,240 And then right here, we're going to add in marker content. 43 00:02:51,170 --> 00:02:52,670 This is going to be a function. 44 00:02:53,810 --> 00:02:56,300 Any time we call it, we have to return a string. 45 00:02:57,900 --> 00:02:59,590 So then inside of here, we'll return. 46 00:02:59,610 --> 00:03:01,650 How about just like user? 47 00:03:03,430 --> 00:03:09,160 Name is and actually what let's use a template string here so I can use Bachtiar instead just to kind 48 00:03:09,160 --> 00:03:10,270 of inject the user name. 49 00:03:11,020 --> 00:03:15,040 So I'm going to place the tactics and we'll do this name like so. 50 00:03:16,510 --> 00:03:23,950 OK, so now user has a marker content method that returns a string, and that means that now user satisfies 51 00:03:23,950 --> 00:03:25,240 our map interface. 52 00:03:25,630 --> 00:03:29,380 It has all the different properties that Matabele is required to have. 53 00:03:30,510 --> 00:03:33,720 So if we now go back over to inducts, you'll notice that the air is gone. 54 00:03:34,820 --> 00:03:37,160 So now we can repeat the same process for company as well. 55 00:03:37,790 --> 00:03:39,200 I'm going to go back over to my company. 56 00:03:40,460 --> 00:03:44,330 Here's class company right here and again at the bottom of the class. 57 00:03:44,470 --> 00:03:47,800 I'm going to add in a new method called marker content. 58 00:03:48,620 --> 00:03:53,530 It has to be called marker content because that's what our interface right here is requiring. 59 00:03:53,780 --> 00:03:57,550 We cannot just arbitrarily name the methods something different inside of company. 60 00:03:58,190 --> 00:04:02,660 The interface is going to look specifically for a method called marker content. 61 00:04:03,930 --> 00:04:08,610 So back inside of company, here's Markhor content, we're going to annotate it as a return type of 62 00:04:08,610 --> 00:04:09,060 string. 63 00:04:10,260 --> 00:04:15,120 And then inside of here, we can once again return something like company name. 64 00:04:16,260 --> 00:04:19,079 And we'll point out this company name and you know what? 65 00:04:19,110 --> 00:04:23,010 Just for fun, let's also show the company catchphrase as well. 66 00:04:23,850 --> 00:04:26,640 So inside the string, I'm going to turn it into a multiline string like so. 67 00:04:27,780 --> 00:04:33,270 And then we'll do catch phrase is this dot catch phrase. 68 00:04:34,790 --> 00:04:39,500 Remember that these strings can actually be TML, we just saw that inside of the type documentation 69 00:04:39,500 --> 00:04:40,940 file or the type definition file. 70 00:04:41,180 --> 00:04:45,230 So if you wanted to, we could also wrap the company name with an H1 tag. 71 00:04:46,330 --> 00:04:48,880 And maybe the catchphrase gets like an H3. 72 00:04:49,890 --> 00:04:52,290 And then let's just wrap all this with a div. 73 00:05:00,420 --> 00:05:01,660 All right, so looks pretty good. 74 00:05:02,280 --> 00:05:06,480 Now, one thing I want to mention here about this interface stuff, you'll notice that marker content 75 00:05:06,480 --> 00:05:08,850 right here is just saying we have to return string. 76 00:05:08,850 --> 00:05:09,660 That's all it's saying. 77 00:05:10,170 --> 00:05:15,780 This interface is not going to somehow make sure that we are returning like the correct string for marker 78 00:05:15,780 --> 00:05:16,340 content. 79 00:05:16,650 --> 00:05:22,110 So inside of company, that's if we put some like completely gibberish string inside of here with some 80 00:05:22,110 --> 00:05:24,200 nonsense HTML type scripts. 81 00:05:24,210 --> 00:05:25,170 Not going to complain at all. 82 00:05:25,180 --> 00:05:29,760 The only thing TypeScript is doing is making sure that we have this method that recurrent returns the 83 00:05:29,760 --> 00:05:30,360 correct type. 84 00:05:30,900 --> 00:05:36,150 If we goofed, the implementation of the method that's still on us, typescript, can only do so much. 85 00:05:37,060 --> 00:05:42,700 OK, so now we got the new definition of markhor content in both our company and our user, they are 86 00:05:42,700 --> 00:05:48,280 both now satisfying the updated interface so they can continue to be arguments to add. 87 00:05:48,280 --> 00:05:51,250 MERKER You'll notice that both those areas have now gone away. 88 00:05:52,460 --> 00:05:57,860 So now the last thing we have to do is go back over to a custom map down inside of the ad marker function. 89 00:05:59,320 --> 00:06:02,150 We still have a hard coded string here of hi there. 90 00:06:02,560 --> 00:06:07,660 So now we're going to say, rather than using that hardcoded string, take a look at that map argument, 91 00:06:07,750 --> 00:06:13,720 the argument that we passed into ad marker makeable and now has a new function tied to it called Merker 92 00:06:13,720 --> 00:06:14,330 content. 93 00:06:14,860 --> 00:06:20,020 So now any time that we click on the info window rather than showing simply, hi there, we want to 94 00:06:20,020 --> 00:06:24,840 show the content that comes from that marker content function of the argument. 95 00:06:25,600 --> 00:06:26,980 So we'll do matchable. 96 00:06:28,200 --> 00:06:30,870 DOT Markhor content like so. 97 00:06:33,770 --> 00:06:38,450 All right, so that's pretty much it, let's save this thing, I'm going to flip back around my browser, 98 00:06:38,690 --> 00:06:47,030 do a refresh, and then I'll click on one of these and I see username Annik or yeah, I suppose pop 99 00:06:47,030 --> 00:06:47,240 up. 100 00:06:47,390 --> 00:06:52,790 And if I click on the other one, I'll see an H1 and an H three for the company name and catchphrase. 101 00:06:53,710 --> 00:06:54,370 So that's it. 102 00:06:55,030 --> 00:06:57,140 All right, so this has been a lot of fun here. 103 00:06:57,190 --> 00:07:01,720 Let's take a quick pause and we'll do a wrap up in the next section to make sure once again that we 104 00:07:01,720 --> 00:07:03,580 understand what's going on with this interface. 105 00:07:03,730 --> 00:07:04,960 And you want action now they think about it. 106 00:07:04,970 --> 00:07:09,130 There's one last little bit of code I want to add in this project just to show you something very quickly. 107 00:07:09,410 --> 00:07:11,340 So quick pause and we'll see you in just a minute.