1
00:00:01,070 --> 00:00:05,840
In the last video we spoke about how it would be really nice to somehow hide the existence of the Google

2
00:00:05,840 --> 00:00:07,490
map from other engineers.

3
00:00:07,730 --> 00:00:11,000
So to do so we're going to create a class called custom map.

4
00:00:11,000 --> 00:00:16,400
This custom map is going to internally create a Google map for us but it's going to hide that from other

5
00:00:16,400 --> 00:00:22,220
engineers because remember we don't want other engineers to access the Google map directly.

6
00:00:22,220 --> 00:00:27,230
So by creating this custom map class it's going to allow us to kind of isolate the Google map and only

7
00:00:27,230 --> 00:00:29,900
expose a bare minimum amount of functionality.

8
00:00:30,800 --> 00:00:35,630
So in total at the end of the day the only thing we can do inside of our index dot yes file is create

9
00:00:35,630 --> 00:00:40,790
a company reference its properties create a user reference its properties create a map and then add

10
00:00:40,790 --> 00:00:41,460
a marker to it.

11
00:00:41,480 --> 00:00:42,460
That's it.

12
00:00:42,470 --> 00:00:48,740
And so it's going to make our application as absolute bare bones simple as possible to work with.

13
00:00:48,800 --> 00:00:50,220
So let's get to it.

14
00:00:50,240 --> 00:00:50,680
All right.

15
00:00:50,690 --> 00:00:57,200
So I mean I flip back or add my editor I'm gonna create a new file inside my SRS directory called custom

16
00:00:57,230 --> 00:01:03,800
map dot t yes I would love to call this thing just like map rather than putting on the word custom but

17
00:01:03,980 --> 00:01:07,790
I just want to make sure it's really clear to you that the class we are creating is separate from the

18
00:01:07,790 --> 00:01:09,170
Google map instance.

19
00:01:09,200 --> 00:01:12,990
So I'm gonna call it custom map instead All right.

20
00:01:12,990 --> 00:01:18,240
So then inside of here we're going to create a class called custom map and we're going to export it

21
00:01:18,240 --> 00:01:22,370
right away so we can use it in other files inside of our project.

22
00:01:22,430 --> 00:01:26,340
Now this thing is going to have one single property tied to it.

23
00:01:26,520 --> 00:01:31,930
Our custom map is going to carry a reference to the Google map that we create because remember we want

24
00:01:31,930 --> 00:01:34,260
the custom map to be able to work with the Google map.

25
00:01:34,260 --> 00:01:35,290
No problem there.

26
00:01:35,310 --> 00:01:39,050
The custom map can access the Google map and call different methods on it.

27
00:01:39,060 --> 00:01:44,290
The whole goal here is that we want to hide the existence of the Google map from other engineers.

28
00:01:44,580 --> 00:01:50,340
I know at the end of the day other engineers could open up this file and start changing how this thing

29
00:01:50,340 --> 00:01:53,810
works with a Google map or call different methods on the Google map.

30
00:01:53,820 --> 00:01:59,100
I know that is a possibility but the idea here is that we're just going to pretend that other engineers

31
00:01:59,250 --> 00:02:01,640
can not open up this class definition.

32
00:02:01,680 --> 00:02:04,250
I know that seems like kind of an arbitrary thing to say.

33
00:02:04,290 --> 00:02:06,310
Nonetheless it's how we approach this problem.

34
00:02:06,390 --> 00:02:13,040
We're just pretending that other engineers can not see the contents of this class so custom map is going

35
00:02:13,040 --> 00:02:18,560
to carry a reference to the Google map that we are going to create so we're going to define a property

36
00:02:18,560 --> 00:02:24,230
on here called Google map and we need to annotate it's type remember that we saw that when we created

37
00:02:24,230 --> 00:02:27,960
a Google map we referenced Google dot maps dot maps.

38
00:02:27,980 --> 00:02:29,950
That's gonna be the type of this variable right here.

39
00:02:29,960 --> 00:02:34,420
It's gonna be an instance of the class Google Maps dot map.

40
00:02:34,520 --> 00:02:40,890
This right here is a class we are seeing that Google map is going to be an instance of that class so

41
00:02:40,890 --> 00:02:43,170
now we can define our constructor function.

42
00:02:43,530 --> 00:02:48,810
We're going to use the constructor function to initialize and create this map and show it on the screen.

43
00:02:48,910 --> 00:02:56,020
It's going to say this dot google map is going to be a map that we create right here rather than re

44
00:02:56,030 --> 00:02:57,740
typing all the code to create a new map.

45
00:02:57,740 --> 00:03:01,610
I'm just gonna copy paste it from back inside of our index dot test file.

46
00:03:01,610 --> 00:03:04,590
So going to take everything from new all the way down to the bottom.

47
00:03:04,930 --> 00:03:09,440
I'm going to cut that all I'm going to delete the declaration for const map right there because we don't

48
00:03:09,440 --> 00:03:15,620
need that anymore and I'm going to paste all that stuff I just cut right there like so I can zoom out

49
00:03:15,620 --> 00:03:22,130
just you can see that entire line very easily.

50
00:03:22,150 --> 00:03:24,330
All right so one last thing here.

51
00:03:24,320 --> 00:03:30,350
Remember anytime we define a property inside of a class by default it has a modifier of public.

52
00:03:30,370 --> 00:03:32,460
We don't have to specifically write out public.

53
00:03:32,470 --> 00:03:34,630
That is the default modifier.

54
00:03:34,750 --> 00:03:40,390
It's only right here just to remind you about its existence when a property has a public modifier.

55
00:03:40,390 --> 00:03:45,940
That means anyone outside of this class can directly access this property and try to reference different

56
00:03:45,940 --> 00:03:49,530
properties on it or try to call different functions attached to it.

57
00:03:49,780 --> 00:03:54,150
And the whole goal of what you and I are trying to do right now is limit access to the Google map.

58
00:03:54,150 --> 00:03:57,420
We don't want other engineers to access this thing.

59
00:03:57,730 --> 00:04:01,300
So we're going to put a modifier on it of private.

60
00:04:01,300 --> 00:04:07,410
Remember what that means that means that we can not reference this property from outside of this class.

61
00:04:07,450 --> 00:04:09,740
And so that's going to give us our original goal.

62
00:04:09,760 --> 00:04:13,810
Remember we don't want anyone else to access the map we create inside of here.

63
00:04:13,900 --> 00:04:15,960
So we mark that property as private.

64
00:04:15,970 --> 00:04:21,790
That means anyone else who is using this class cannot reach into an instance and try to get a handle

65
00:04:21,850 --> 00:04:24,940
on the Google map.

66
00:04:25,170 --> 00:04:25,470
All right.

67
00:04:25,500 --> 00:04:26,600
So that's just about it.

68
00:04:26,610 --> 00:04:32,870
I'm going to save this file and then we're going to try to create an instance of custom map back inside

69
00:04:32,870 --> 00:04:38,600
of our index dot to yes go inside of index dot to yes I'm gonna import a custom map that we just created

70
00:04:42,400 --> 00:04:46,540
I'll then create a new custom map like so before I say this.

71
00:04:46,560 --> 00:04:51,050
I tried to assign this to a variable I'm going to say like custom map is a new custom map.

72
00:04:51,050 --> 00:04:54,300
And then remember we just marked that Google map properties private.

73
00:04:54,440 --> 00:04:59,360
So if I tried to reference that property like so I'm going to very quickly get an error message that

74
00:04:59,360 --> 00:05:02,750
tells me that property is private and I can't reach into it.

75
00:05:03,200 --> 00:05:05,720
And so this achieves our original goal.

76
00:05:05,750 --> 00:05:10,550
It means that right now the only thing that we can do inside of our index dot t s file is create the

77
00:05:10,550 --> 00:05:16,270
company reference its properties create the user reference its properties and then create a map.

78
00:05:16,310 --> 00:05:17,850
We don't have to add marker function yet.

79
00:05:17,870 --> 00:05:20,570
We're gonna add that in a little bit but it doesn't exist yet.

80
00:05:21,200 --> 00:05:25,680
So here is everything we can do inside of our program right now.

81
00:05:25,790 --> 00:05:32,750
We completely eliminated that API surface of the Google map which significantly decreases the complexity

82
00:05:32,750 --> 00:05:40,340
of our application and it makes it way more clear to other engineers what we can do inside of our program.

83
00:05:40,350 --> 00:05:42,590
All right so let's save this thing.

84
00:05:42,870 --> 00:05:44,250
Delete that line right there.

85
00:05:44,400 --> 00:05:46,160
Going to delete the reference to custom map.

86
00:05:46,180 --> 00:05:49,310
All we want to do right now is create a map itself.

87
00:05:49,370 --> 00:05:52,230
I can save this file and we'll do a quick test inside of our browser.

88
00:05:53,090 --> 00:05:57,390
So I'm gonna save that flip back over refresh the page and I can still see the map.

89
00:05:57,660 --> 00:06:00,230
Awesome.

90
00:06:00,450 --> 00:06:02,260
So this is a very good improvement.

91
00:06:02,270 --> 00:06:08,460
We now have a significantly less complete and less complex index dot test file before we move on.

92
00:06:08,480 --> 00:06:10,670
One last very quick thing.

93
00:06:10,670 --> 00:06:12,740
Back inside of custom mapped out to yes.

94
00:06:12,760 --> 00:06:14,270
Zoom out here really quickly.

95
00:06:14,270 --> 00:06:20,590
Remember right here when we create our Google map we have to pass in a reference to a female element.

96
00:06:20,740 --> 00:06:26,990
And right now we are always going to pass in some element that has an idea of map in order to make this

97
00:06:26,990 --> 00:06:29,120
class just a little bit more usable.

98
00:06:29,120 --> 00:06:34,700
I think it'd be really nice if we had an argument to our constructor that described what element we

99
00:06:34,700 --> 00:06:40,220
wanted to render the map into so we could either take a reference to the entire element or to make things

100
00:06:40,220 --> 00:06:41,690
just a little bit easier for us.

101
00:06:41,720 --> 00:06:46,990
Maybe we just make the I.D. an argument to the constructor so rather than always saying we're gonna

102
00:06:47,000 --> 00:06:52,640
try to put the map into an I.D. or a element with an idea of map we're going to instead pass in the

103
00:06:52,640 --> 00:06:55,100
I.D. as an argument to constructor.

104
00:06:55,160 --> 00:07:01,630
Again we're just doing this so we can more read more easily reuse this class on future projects so to

105
00:07:01,630 --> 00:07:04,830
do that I'm going to say that the constructor function.

106
00:07:05,050 --> 00:07:11,000
Let me zoom back in here has to be called with some arguments that will call.

107
00:07:11,010 --> 00:07:14,440
I want to just call it I.D. but let's try to be a little bit more descriptive.

108
00:07:14,550 --> 00:07:20,600
Let's say like div I.D. or something like that it's like the idea of some div and that has to be a string.

109
00:07:21,840 --> 00:07:27,720
So then when we call get element by I.D. rather than using the hardcoded map we'll instead use that

110
00:07:27,720 --> 00:07:30,330
argument div I.D. like so

111
00:07:33,300 --> 00:07:33,800
all right.

112
00:07:33,940 --> 00:07:38,620
Now back inside of index dot T.S. back over here we had a called a custom map.

113
00:07:38,830 --> 00:07:43,810
If we hover over it we'll see that we now have an error here because we are now expected to pass in

114
00:07:43,810 --> 00:07:46,610
one argument but we're not passing in any right now.

115
00:07:46,750 --> 00:07:51,370
So now anytime we create an instance of our map we have to pass in the I.D. of the element we want to

116
00:07:51,370 --> 00:07:52,320
render this thing into.

117
00:07:52,870 --> 00:07:58,890
So we gotta do is put in map like so likewise if we had other divs inside of our e-mail document you

118
00:07:58,890 --> 00:08:03,900
know we can create another instance and put in like the idea of that other div or whatever we want to

119
00:08:03,900 --> 00:08:05,070
do.

120
00:08:05,070 --> 00:08:05,310
Okay.

121
00:08:05,340 --> 00:08:07,190
So just that one custom map right there.

122
00:08:07,210 --> 00:08:09,680
Gonna save this lot back over one more time.

123
00:08:09,690 --> 00:08:11,950
Refresh the page and we're good to go.

124
00:08:12,000 --> 00:08:13,320
Perfect.

125
00:08:13,350 --> 00:08:13,560
All right.

126
00:08:13,570 --> 00:08:17,270
So a quick pause right here and move on to the next part of this application.

127
00:08:17,310 --> 00:08:22,140
The next section which is going to focus on getting some markers on the screen using our company and

128
00:08:22,140 --> 00:08:24,870
our user so quick pause and I'll see you in just a minute.