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 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'm going to flip back over to my editor and I'm going to create a new file inside my SIRC directory
called Custom Map Dots.
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 going to 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.
So 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 the 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
cannot 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 cannot 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 I'm going to define a property on here called Google Map, and we need to annotate its type.
Remember that we saw that when we created a Google map, we referenced Google Maps, DOT Maps.
That's going to be the type of this variable right here.
It's going to 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 and we're going to use the constructor function to initialize
and create this map and show it on the screen.
So I'm going to say this dot Google map is going to be a map that we create right here.
So rather than retyping all the code to create a new map, I'm just going to copy paste it from back
inside of our index dots file.
So I'm 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, any time 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.
So I only write it 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 cannot 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 is 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 dots, so instead
of index dots, I'm going to import a custom map that we just created.
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.
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 indexed 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 going to 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 up.
I'm going to delete that line right there.
I'm also going to delete the reference to custom map.
All we want to do right now is create a map itself.
I'm going to save this file and we'll do a quick test inside of our browser.
So I'm going to save that flip back over, refresh the page and I can still see the map.
Awesome.
OK, so this is a very good improvement.
We now have a significantly less complex and less complex inducts file.
But before we move on, one last very quick thing back inside of custom sports and zoom out here really
quickly.
Remember right here, when we create our Google map, we have to pass in a reference to a HTML element.
And right now we are always going to pass in some element that has an ID of map in order to make this
class just a little bit more usable, I think would 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 going to try to put the map into an ID or element with an idea of
map, we're going to instead pass in the ID as an argument to constructor.
Again, we're just doing this so we can more 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 ID, but let's try to be a little bit more descriptive,
let's say like divide or something like that.
It's like the idea of some d'Hiv, and that has to be a string.
So then when we call get element by ID, rather than using the hard coded map, we'll instead use that
argument div id like so.
All right, now back inside of index dots, 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 ID of the element we want
to render this thing into.
So we've got to do is put in map like so.
Likewise, if we had other divs inside of our HTML document, we can create another instance and put
in like the idea of that other div or whatever you want to do.
OK, so just that one custom map right there.
I'm going to save this.
Look 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.