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

2
00:00:05,570 --> 00:00:10,310
Google map from other engineers, so to do so, we're going to create a class called Custom Map.

3
00:00:10,910 --> 00:00:16,160
This custom map is going to internally create a Google map for us, but it's going to hide that from

4
00:00:16,160 --> 00:00:21,370
other engineers because remember, we don't want other engineers to access the Google map directly.

5
00:00:22,160 --> 00:00:26,930
So by creating this custom map class, it's going to allow us to kind of isolate the Google map and

6
00:00:26,930 --> 00:00:29,900
only expose a bare minimum amount of functionality.

7
00:00:30,740 --> 00:00:35,660
So in total, at the end of the day, the only thing we can do inside of our index file is create a

8
00:00:35,660 --> 00:00:40,550
company, reference its properties, create a user, reference its properties, create a map and then

9
00:00:40,550 --> 00:00:41,450
add a marker to it.

10
00:00:41,500 --> 00:00:42,130
That's it.

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

12
00:00:48,770 --> 00:00:49,670
So let's get to it.

13
00:00:50,150 --> 00:00:50,690
All right.

14
00:00:50,700 --> 00:00:55,520
So I'm going to flip back over to my editor and I'm going to create a new file inside my SIRC directory

15
00:00:56,180 --> 00:00:58,540
called Custom Map Dots.

16
00:00:59,060 --> 00:01:04,340
I would love to call this thing just like map rather than putting on the word custom, but I just want

17
00:01:04,340 --> 00:01:08,450
to make sure it's really clear to you that the class we are creating is separate from the Google map

18
00:01:08,450 --> 00:01:08,960
instance.

19
00:01:09,140 --> 00:01:11,240
So I'm going to call it custom map instead.

20
00:01:12,570 --> 00:01:17,460
All right, so then inside of here, we're going to create a class called Custom Map and we're going

21
00:01:17,460 --> 00:01:21,270
to export it right away so we can use it in other files inside of our project.

22
00:01:22,280 --> 00:01:28,100
So now this thing is going to have one single property tied to it, our custom map is going to carry

23
00:01:28,100 --> 00:01:33,320
a reference to the Google map that we create because remember, we want the custom map to be able to

24
00:01:33,320 --> 00:01:34,250
work with the Google map.

25
00:01:34,250 --> 00:01:35,090
No problem there.

26
00:01:35,270 --> 00:01:38,570
The custom map can access the Google map and call different methods on it.

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

28
00:01:44,450 --> 00:01:50,360
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,360 --> 00:01:53,520
works with the Google map or call different methods on the Google map.

30
00:01:53,720 --> 00:01:59,180
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,180 --> 00:02:01,260
cannot open up this class definition.

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

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

34
00:02:06,350 --> 00:02:10,400
We're just pretending that other engineers cannot see the contents of this class.

35
00:02:11,970 --> 00:02:16,020
So custom map is going to carry a reference to the Google map that we are going to create.

36
00:02:17,230 --> 00:02:21,610
So I'm going to define a property on here called Google Map, and we need to annotate its type.

37
00:02:22,470 --> 00:02:27,940
Remember that we saw that when we created a Google map, we referenced Google Maps, DOT Maps.

38
00:02:27,970 --> 00:02:29,940
That's going to be the type of this variable right here.

39
00:02:29,950 --> 00:02:34,120
It's going to be an instance of the class Google Maps dot map.

40
00:02:34,480 --> 00:02:39,040
This right here is a class we are seeing that Google map is going to be an instance of that class.

41
00:02:40,760 --> 00:02:46,160
So now we can define our constructor function and we're going to use the constructor function to initialize

42
00:02:46,160 --> 00:02:48,050
and create this map and show it on the screen.

43
00:02:48,870 --> 00:02:53,990
So I'm going to say this dot Google map is going to be a map that we create right here.

44
00:02:55,200 --> 00:02:59,340
So rather than retyping all the code to create a new map, I'm just going to copy paste it from back

45
00:02:59,340 --> 00:03:00,870
inside of our index dots file.

46
00:03:01,530 --> 00:03:04,200
So I'm going to take everything from new all the way down to the bottom.

47
00:03:04,870 --> 00:03:05,850
I'm going to cut that all.

48
00:03:06,510 --> 00:03:10,230
I'm going to delete the declaration for const map right there, because we don't need that anymore.

49
00:03:11,200 --> 00:03:15,890
And I'm going to paste all that stuff, I just cut right there, like, so I can zoom out, just you

50
00:03:15,890 --> 00:03:17,620
can see that entire line very easily.

51
00:03:22,030 --> 00:03:27,520
All right, so one last thing here, remember, any time we define a property inside of a class by default,

52
00:03:27,520 --> 00:03:29,770
it has a modifier of public.

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

54
00:03:32,470 --> 00:03:34,000
That is the default modifier.

55
00:03:34,750 --> 00:03:37,300
So I only write it here just to remind you about its existence.

56
00:03:38,050 --> 00:03:43,810
When a property has a public modifier, that means anyone outside of this class can directly access

57
00:03:43,810 --> 00:03:48,820
this property and try to reference different properties on it or try to call different functions attached

58
00:03:48,820 --> 00:03:49,240
to it.

59
00:03:49,690 --> 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.

60
00:03:54,160 --> 00:04:00,620
We don't want other engineers to access this thing, so we're going to put a modifier on it of private.

61
00:04:01,210 --> 00:04:02,200
Remember what that means?

62
00:04:02,200 --> 00:04:06,820
That means that we cannot reference this property from outside of this class.

63
00:04:07,360 --> 00:04:09,470
And so that's going to give us our original goal.

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

65
00:04:13,810 --> 00:04:15,730
So we mark that property is private.

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

67
00:04:21,820 --> 00:04:22,720
on the Google map.

68
00:04:25,030 --> 00:04:27,700
All right, so that's just about it, I'm going to save this file.

69
00:04:29,310 --> 00:04:34,830
And then we're going to try to create an instance of custom map back inside of our index dots, so instead

70
00:04:34,830 --> 00:04:38,610
of index dots, I'm going to import a custom map that we just created.

71
00:04:42,420 --> 00:04:48,090
I'll then create a new custom map like so before I say this, I'm going to try to assign this to a variable.

72
00:04:48,120 --> 00:04:50,760
I'm going to say, like custom map is a new custom map.

73
00:04:50,970 --> 00:04:53,930
And then remember, we just marked that Google Map properties private.

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

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

76
00:05:03,090 --> 00:05:05,220
And so this achieves our original goal.

77
00:05:05,640 --> 00:05:11,010
It means that right now the only thing that we can do inside of our indexed file is create the company,

78
00:05:11,010 --> 00:05:16,040
reference its properties, create the user, reference its properties, and then create a map.

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

80
00:05:17,850 --> 00:05:20,580
We're going to add that in a little bit, but it doesn't exist yet.

81
00:05:21,150 --> 00:05:25,280
So here is everything we can do inside of our program right now.

82
00:05:25,710 --> 00:05:32,760
We completely eliminated that API surface of the Google map, which significantly decreases the complexity

83
00:05:32,760 --> 00:05:33,510
of our application.

84
00:05:33,990 --> 00:05:38,820
And it makes it way more clear to other engineers what we can do inside of our program.

85
00:05:40,240 --> 00:05:42,530
All right, so let's save this thing up.

86
00:05:42,590 --> 00:05:43,990
I'm going to delete that line right there.

87
00:05:44,250 --> 00:05:46,140
I'm also going to delete the reference to custom map.

88
00:05:46,150 --> 00:05:48,790
All we want to do right now is create a map itself.

89
00:05:49,260 --> 00:05:52,090
I'm going to save this file and we'll do a quick test inside of our browser.

90
00:05:53,040 --> 00:05:57,510
So I'm going to save that flip back over, refresh the page and I can still see the map.

91
00:05:57,550 --> 00:05:58,080
Awesome.

92
00:06:00,060 --> 00:06:02,140
OK, so this is a very good improvement.

93
00:06:02,190 --> 00:06:06,890
We now have a significantly less complex and less complex inducts file.

94
00:06:07,440 --> 00:06:13,440
But before we move on, one last very quick thing back inside of custom sports and zoom out here really

95
00:06:13,440 --> 00:06:13,860
quickly.

96
00:06:14,220 --> 00:06:20,300
Remember right here, when we create our Google map, we have to pass in a reference to a HTML element.

97
00:06:20,670 --> 00:06:27,000
And right now we are always going to pass in some element that has an ID of map in order to make this

98
00:06:27,000 --> 00:06:32,460
class just a little bit more usable, I think would be really nice if we had an argument to our constructor

99
00:06:32,790 --> 00:06:38,250
that described what element we wanted to render the map into so we could either take a reference to

100
00:06:38,250 --> 00:06:41,490
the entire element or to make things just a little bit easier for us.

101
00:06:41,670 --> 00:06:45,300
Maybe we just make the I.D. an argument to the constructor.

102
00:06:45,510 --> 00:06:50,190
So rather than always saying we're going to try to put the map into an ID or element with an idea of

103
00:06:50,190 --> 00:06:54,600
map, we're going to instead pass in the ID as an argument to constructor.

104
00:06:55,110 --> 00:07:00,360
Again, we're just doing this so we can more more easily reuse this class on future projects.

105
00:07:01,350 --> 00:07:03,810
So to do that, I'm going to say that the constructor function.

106
00:07:04,970 --> 00:07:06,010
Let me zoom back in here.

107
00:07:06,860 --> 00:07:08,870
Has to be called with some.

108
00:07:09,870 --> 00:07:14,220
Arguments that will call I want to just call it ID, but let's try to be a little bit more descriptive,

109
00:07:14,490 --> 00:07:16,860
let's say like divide or something like that.

110
00:07:17,220 --> 00:07:20,610
It's like the idea of some d'Hiv, and that has to be a string.

111
00:07:21,790 --> 00:07:27,730
So then when we call get element by ID, rather than using the hard coded map, we'll instead use that

112
00:07:27,730 --> 00:07:30,400
argument div id like so.

113
00:07:33,160 --> 00:07:38,170
All right, now back inside of index dots, back over here, we had a called a custom map.

114
00:07:38,740 --> 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

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

116
00:07:46,690 --> 00:07:51,280
So now, anytime we create an instance of our map, we have to pass in the ID of the element we want

117
00:07:51,280 --> 00:07:52,310
to render this thing into.

118
00:07:52,810 --> 00:07:54,670
So we've got to do is put in map like so.

119
00:07:55,570 --> 00:08:00,220
Likewise, if we had other divs inside of our HTML document, we can create another instance and put

120
00:08:00,220 --> 00:08:04,130
in like the idea of that other div or whatever you want to do.

121
00:08:04,960 --> 00:08:07,150
OK, so just that one custom map right there.

122
00:08:07,150 --> 00:08:08,020
I'm going to save this.

123
00:08:08,320 --> 00:08:09,670
Look back over one more time.

124
00:08:09,670 --> 00:08:11,710
Refresh the page and we're good to go.

125
00:08:11,980 --> 00:08:12,460
Perfect.

126
00:08:13,210 --> 00:08:13,570
All right.

127
00:08:13,570 --> 00:08:18,130
So a quick pause right here and move on to the next part of this application, the next section, which

128
00:08:18,130 --> 00:08:22,600
is going to focus on getting some markers on the screen using our company and our user.

129
00:08:22,960 --> 00:08:24,880
So quick pause and I'll see you in just a minute.