In the last video we spoke about how it would be really nice to somehow hide the existence of the Google
map from other engineers.
So to do so we're going to create a class called custom map.
This custom map is going to internally create a Google map for us but it's going to hide that from other
engineers because remember we don't want other engineers to access the Google map directly.
So by creating this custom map class it's going to allow us to kind of isolate the Google map and only
expose a bare minimum amount of functionality.
So in total at the end of the day the only thing we can do inside of our index dot yes file is create
a company reference its properties create a user reference its properties create a map and then add
a marker to it.
That's it.
And so it's going to make our application as absolute bare bones simple as possible to work with.
So let's get to it.
All right.
So I mean I flip back or add my editor I'm gonna create a new file inside my SRS directory called custom
map dot t yes I would love to call this thing just like map rather than putting on the word custom but
I just want to make sure it's really clear to you that the class we are creating is separate from the
Google map instance.
So I'm gonna call it custom map instead All right.
So then inside of here we're going to create a class called custom map and we're going to export it
right away so we can use it in other files inside of our project.
Now this thing is going to have one single property tied to it.
Our custom map is going to carry a reference to the Google map that we create because remember we want
the custom map to be able to work with the Google map.
No problem there.
The custom map can access the Google map and call different methods on it.
The whole goal here is that we want to hide the existence of the Google map from other engineers.
I know at the end of the day other engineers could open up this file and start changing how this thing
works with a Google map or call different methods on the Google map.
I know that is a possibility but the idea here is that we're just going to pretend that other engineers
can not open up this class definition.
I know that seems like kind of an arbitrary thing to say.
Nonetheless it's how we approach this problem.
We're just pretending that other engineers can not see the contents of this class so custom map is going
to carry a reference to the Google map that we are going to create so we're going to define a property
on here called Google map and we need to annotate it's type remember that we saw that when we created
a Google map we referenced Google dot maps dot maps.
That's gonna be the type of this variable right here.
It's gonna be an instance of the class Google Maps dot map.
This right here is a class we are seeing that Google map is going to be an instance of that class so
now we can define our constructor function.
We're going to use the constructor function to initialize and create this map and show it on the screen.
It's going to say this dot google map is going to be a map that we create right here rather than re
typing all the code to create a new map.
I'm just gonna copy paste it from back inside of our index dot test file.
So going to take everything from new all the way down to the bottom.
I'm going to cut that all I'm going to delete the declaration for const map right there because we don't
need that anymore and I'm going to paste all that stuff I just cut right there like so I can zoom out
just you can see that entire line very easily.
All right so one last thing here.
Remember anytime we define a property inside of a class by default it has a modifier of public.
We don't have to specifically write out public.
That is the default modifier.
It's only right here just to remind you about its existence when a property has a public modifier.
That means anyone outside of this class can directly access this property and try to reference different
properties on it or try to call different functions attached to it.
And the whole goal of what you and I are trying to do right now is limit access to the Google map.
We don't want other engineers to access this thing.
So we're going to put a modifier on it of private.
Remember what that means that means that we can not reference this property from outside of this class.
And so that's going to give us our original goal.
Remember we don't want anyone else to access the map we create inside of here.
So we mark that property as private.
That means anyone else who is using this class cannot reach into an instance and try to get a handle
on the Google map.
All right.
So that's just about it.
I'm going to save this file and then we're going to try to create an instance of custom map back inside
of our index dot to yes go inside of index dot to yes I'm gonna import a custom map that we just created
I'll then create a new custom map like so before I say this.
I tried to assign this to a variable I'm going to say like custom map is a new custom map.
And then remember we just marked that Google map properties private.
So if I tried to reference that property like so I'm going to very quickly get an error message that
tells me that property is private and I can't reach into it.
And so this achieves our original goal.
It means that right now the only thing that we can do inside of our index dot t s file is create the
company reference its properties create the user reference its properties and then create a map.
We don't have to add marker function yet.
We're gonna add that in a little bit but it doesn't exist yet.
So here is everything we can do inside of our program right now.
We completely eliminated that API surface of the Google map which significantly decreases the complexity
of our application and it makes it way more clear to other engineers what we can do inside of our program.
All right so let's save this thing.
Delete that line right there.
Going to delete the reference to custom map.
All we want to do right now is create a map itself.
I can save this file and we'll do a quick test inside of our browser.
So I'm gonna save that flip back over refresh the page and I can still see the map.
Awesome.
So this is a very good improvement.
We now have a significantly less complete and less complex index dot test file before we move on.
One last very quick thing.
Back inside of custom mapped out to yes.
Zoom out here really quickly.
Remember right here when we create our Google map we have to pass in a reference to a female element.
And right now we are always going to pass in some element that has an idea of map in order to make this
class just a little bit more usable.
I think it'd be really nice if we had an argument to our constructor that described what element we
wanted to render the map into so we could either take a reference to the entire element or to make things
just a little bit easier for us.
Maybe we just make the I.D. an argument to the constructor so rather than always saying we're gonna
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
I.D. as an argument to constructor.
Again we're just doing this so we can more read more easily reuse this class on future projects so to
do that I'm going to say that the constructor function.
Let me zoom back in here has to be called with some arguments that will call.
I want to just call it I.D. but let's try to be a little bit more descriptive.
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.
So then when we call get element by I.D. rather than using the hardcoded map we'll instead use that
argument div I.D. like so
all right.
Now back inside of index dot T.S. back over here we had a called a custom map.
If we hover over it we'll see that we now have an error here because we are now expected to pass in
one argument but we're not passing in any right now.
So now anytime we create an instance of our map we have to pass in the I.D. of the element we want to
render this thing into.
So we gotta do is put in map like so likewise if we had other divs inside of our e-mail document you
know we can create another instance and put in like the idea of that other div or whatever we want to
do.
Okay.
So just that one custom map right there.
Gonna save this lot back over one more time.
Refresh the page and we're good to go.
Perfect.
All right.
So a quick pause right here and move on to the next part of this application.
The next section which is going to focus on getting some markers on the screen using our company and
our user so quick pause and I'll see you in just a minute.