Now that we've got a custom map class put together we're gonna start thinking about adding in some method
to it to add a marker to the screen.
Remember the entire original goal this application was to take the randomly generated user in company
and add them as markers.
So we're gonna start to focus on adding those markers before we write any code.
I just have one quick aside here.
We're gonna First write out a bad implementation for adding markers onto the map so we're gonna write
out bad code first.
Once we write out the bad code will then discuss why it is bad and we'll start to refactoring into a
much better approach by using interfaces.
So I want you to see the bad code because I think that the kind of bad style that we're gonna look at
is something that you might decide to do on your own.
I'm not saying that you write bad code.
I just wanna help you understand what might be a bad approach and a way to improve it.
As we go through this I can be very clear in telling you where the bad code is and how we're going to
fix it so you will know what is bad and what is good.
Anyways let's get to it.
So I gonna flip on over to my code editor once more I'm inside of my custom map file right here.
So I want to add one or two methods to his class to add in a marker.
I think that maybe is a good way to do this.
Hint This is not a good way.
This is where the bad code starts would be to add in two separate methods maybe one method will take
in a user as an argument and add a marker to the map and then the other one can take in maybe a company
as a argument and add a marker to the map.
So I'm gonna make one argument or me in one method in here called add user marker and a second one called
ad company marker now for both these methods.
We're gonna take in a user and a company.
So we need to annotate those arguments on these methods to annotate the argument as being a instance
of a user and an instance of a company we have to import those types into this file so up to the top
I'm going to add in an import statement or user from user and company from company.
Like so know one thing that we've kind of been skirting and not really discussing in great detail is
exactly what we get when we create a class.
Remember user and company we created them as classes in typescript classes kind of have like a dual
nature when we make a class we can use it to create an instance of an object but we can also use a class
or a variable that refers to a class which is what user and company are to refer to that type as well.
So user and company can use to create a instance of a user or refer to the user type one or the other.
There are several other things in typescript that kind of had this dual nature of simultaneously being
a value and a type of the same time we're going to have a bigger discussion on this later on.
I just want to mention this really quickly.
So now back down in those two methods we can say that at user marker is going to receive a argument
called the user and it should be of the user type.
I don't think we're going to return anything here so I'll put on a return type of void and we'll do
something similar for a company as well.
OK.
So once again kind of just like a side tip here or side note.
This approach right here creating two separate methods.
You had the marker.
This is essentially the bad code.
So we would not generally want to do this but we'll discuss why and just a little bit.
So now inside of ad use a marker we can start to think about how we can add a marker on the screen.
Once again I want to walk through the type definition file for Google Maps and try to understand how
to add a marker by just looking at the type definition file.
Again you can go look at stack overflow to figure out how to do this stuff but I just want you to get
in the habit of trying to look at a type definition file to understand how to work with the library
to pull up the type definition file for Google Maps.
I can go back up to like Google dot map stop map right here and do a command click on map like so and
that will pull up the Google Maps type definition file then in here I'm gonna do a search for marker.
I'm going to look for a class called marker under the section called overlays so this class right here
is how we create a marker and show it on the screen.
We're gonna create an instance of a marker.
So we need to figure out how to create a marker properly and pass it some configuration options.
That's going to get a marker to display in the correct position so to figure out how to do that we can
take a look at the constructor function.
So here's a constructor.
It tells us that whenever we create an instance of a marker we can optionally pass in some options and
that options object should conform to the marker options interface so in other words when we create
a marker we can customize it by passing in an object that has the properties specified by this interface
right here.
So I going to command code click again on interface marker options and this is gonna tell us the possible
options we can pass into the marker you'll notice that these options are once again nicely commented
so we can scroll through and read all the different ways that we can somehow customize this marker.
There are two properties in particular that we're going to take a look at.
So going to scroll down a little bit and I'm going to find one option called map right here when we
create a marker we can pass on that options object and it can have a map property that will be a reference
to the map that we want to show the marker on so in a normal Google Maps application or I should say
like on any web page you can potentially have multiple different maps.
So like know maybe five maps titled about the screen or something like that.
If we create a marker we have to specify which map we want to add the marker to.
So the idea here is when we create the marker we're going to pass in an options object that has a map
property and that map property is going to refer to the map that we want to add the marker to.
That's it.
Now the other option they're going to take a look at is a couple more properties down right here so
the other property we care about is the position property.
And this is going to specify where the marker shows up on the map itself.
And you'll notice we can either pass in an instance of latitude longitude class or a latitude longitude
literal which is just a plain object that has a latitude that is a number and a longitude that is a
number so once again we've now taken a look at a type definition file and kind of figured out how to
create a marker by just looking at this stuff without having to go and look at some complicated documentation
or anything like that.
So let's try to now create a marker using this information back inside of custom map.
I'm going to find add user marker.
So I'm going to create a new Google Maps dot marker so that's going to be the instance of the marker.
This is us calling constructor function right here.
And so that's where we can optionally pass in some marker options object.
So I can pass in an object and I'm going to give it that map property which is going to refer to the
map that we want to show this marker on so the map we want to show this marker on is going to be the
Google map that we created and assigned as a field to our custom map class so map is going to be this
dot google map and then remember the second property we care about is the position property.
So I want to specify the position for this marker as well.
We can hover over position right here and it will tell us that this property has to be either a latitude
longitude instance or a lot of two longitude littoral.
And remember that literal would be an object that has the lat and long properties so this will be an
object and we're going to get the latitude from our user because that's where our location is coming
from.
So we can do user that location dot lat and then will also do our longitude which will be user dot location
dot LNG and that's pretty much it.
All right.
Let's save this.
We don't have any implementation for ad company marker just yet.
But I just want to make sure that we can actually get a marker to display so gonna save the file.
I'm going to flip back over to index dot t yes I'm going to uncommon the user import statement up here
so we can create an instance of a user and then add it to our map so I'll say const user is new user
I'll then make sure that I sign the custom map to a variable so it's a custom map is gonna be that custom
map we created and then we can do custom map dot add user marker in passing the user.
All right.
So let's see this flip back over my browser and I can see a marker displayed.
Now remember we are randomly generating the latitude and longitude for the user.
So every time you refresh you're going to see the marker in a different location.
Sometimes the marker might not actually be visible and kind of like off the screen.
That means that we just generated a latitude or longitude that is not like in the limits of typical
Google Maps.
That's probably not gonna happen too often.
I just want to mention that if you sometimes refresh and you don't see the marker Chancellor everything
is working correctly we just have a bad latitude all right so that looks pretty good.
Let's take a quick pause right here and start to implement our ad company marker method in the next
video.