1 00:00:01,180 --> 00:00:05,290 Now that we've got a custom map class put together we're gonna start thinking about adding in some method 2 00:00:05,320 --> 00:00:07,530 to it to add a marker to the screen. 3 00:00:07,570 --> 00:00:12,250 Remember the entire original goal this application was to take the randomly generated user in company 4 00:00:12,490 --> 00:00:14,460 and add them as markers. 5 00:00:14,530 --> 00:00:18,760 So we're gonna start to focus on adding those markers before we write any code. 6 00:00:18,760 --> 00:00:20,740 I just have one quick aside here. 7 00:00:20,740 --> 00:00:25,630 We're gonna First write out a bad implementation for adding markers onto the map so we're gonna write 8 00:00:25,630 --> 00:00:27,400 out bad code first. 9 00:00:27,700 --> 00:00:32,500 Once we write out the bad code will then discuss why it is bad and we'll start to refactoring into a 10 00:00:32,500 --> 00:00:36,070 much better approach by using interfaces. 11 00:00:36,070 --> 00:00:40,090 So I want you to see the bad code because I think that the kind of bad style that we're gonna look at 12 00:00:40,330 --> 00:00:43,530 is something that you might decide to do on your own. 13 00:00:43,540 --> 00:00:45,310 I'm not saying that you write bad code. 14 00:00:45,310 --> 00:00:49,840 I just wanna help you understand what might be a bad approach and a way to improve it. 15 00:00:50,520 --> 00:00:55,230 As we go through this I can be very clear in telling you where the bad code is and how we're going to 16 00:00:55,230 --> 00:00:58,970 fix it so you will know what is bad and what is good. 17 00:00:59,070 --> 00:01:00,140 Anyways let's get to it. 18 00:01:01,130 --> 00:01:06,240 So I gonna flip on over to my code editor once more I'm inside of my custom map file right here. 19 00:01:06,310 --> 00:01:11,040 So I want to add one or two methods to his class to add in a marker. 20 00:01:11,040 --> 00:01:13,040 I think that maybe is a good way to do this. 21 00:01:13,080 --> 00:01:14,840 Hint This is not a good way. 22 00:01:14,850 --> 00:01:20,450 This is where the bad code starts would be to add in two separate methods maybe one method will take 23 00:01:20,450 --> 00:01:26,580 in a user as an argument and add a marker to the map and then the other one can take in maybe a company 24 00:01:26,820 --> 00:01:29,550 as a argument and add a marker to the map. 25 00:01:30,390 --> 00:01:37,400 So I'm gonna make one argument or me in one method in here called add user marker and a second one called 26 00:01:37,520 --> 00:01:42,420 ad company marker now for both these methods. 27 00:01:42,420 --> 00:01:44,690 We're gonna take in a user and a company. 28 00:01:44,910 --> 00:01:50,520 So we need to annotate those arguments on these methods to annotate the argument as being a instance 29 00:01:50,520 --> 00:01:57,560 of a user and an instance of a company we have to import those types into this file so up to the top 30 00:01:58,040 --> 00:02:07,780 I'm going to add in an import statement or user from user and company from company. 31 00:02:07,840 --> 00:02:13,190 Like so know one thing that we've kind of been skirting and not really discussing in great detail is 32 00:02:13,190 --> 00:02:15,480 exactly what we get when we create a class. 33 00:02:15,500 --> 00:02:22,310 Remember user and company we created them as classes in typescript classes kind of have like a dual 34 00:02:22,310 --> 00:02:28,730 nature when we make a class we can use it to create an instance of an object but we can also use a class 35 00:02:28,760 --> 00:02:35,300 or a variable that refers to a class which is what user and company are to refer to that type as well. 36 00:02:35,300 --> 00:02:42,500 So user and company can use to create a instance of a user or refer to the user type one or the other. 37 00:02:42,500 --> 00:02:46,940 There are several other things in typescript that kind of had this dual nature of simultaneously being 38 00:02:46,970 --> 00:02:51,120 a value and a type of the same time we're going to have a bigger discussion on this later on. 39 00:02:51,140 --> 00:02:53,780 I just want to mention this really quickly. 40 00:02:53,820 --> 00:02:58,620 So now back down in those two methods we can say that at user marker is going to receive a argument 41 00:02:58,620 --> 00:03:01,380 called the user and it should be of the user type. 42 00:03:02,660 --> 00:03:07,150 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 43 00:03:07,150 --> 00:03:09,390 something similar for a company as well. 44 00:03:11,950 --> 00:03:12,270 OK. 45 00:03:12,300 --> 00:03:15,970 So once again kind of just like a side tip here or side note. 46 00:03:15,970 --> 00:03:18,060 This approach right here creating two separate methods. 47 00:03:18,070 --> 00:03:18,730 You had the marker. 48 00:03:18,730 --> 00:03:20,340 This is essentially the bad code. 49 00:03:20,500 --> 00:03:24,980 So we would not generally want to do this but we'll discuss why and just a little bit. 50 00:03:25,080 --> 00:03:29,620 So now inside of ad use a marker we can start to think about how we can add a marker on the screen. 51 00:03:29,650 --> 00:03:34,060 Once again I want to walk through the type definition file for Google Maps and try to understand how 52 00:03:34,060 --> 00:03:37,870 to add a marker by just looking at the type definition file. 53 00:03:38,080 --> 00:03:42,700 Again you can go look at stack overflow to figure out how to do this stuff but I just want you to get 54 00:03:42,700 --> 00:03:47,470 in the habit of trying to look at a type definition file to understand how to work with the library 55 00:03:48,820 --> 00:03:51,200 to pull up the type definition file for Google Maps. 56 00:03:51,200 --> 00:03:57,310 I can go back up to like Google dot map stop map right here and do a command click on map like so and 57 00:03:57,410 --> 00:04:04,590 that will pull up the Google Maps type definition file then in here I'm gonna do a search for marker. 58 00:04:04,590 --> 00:04:10,660 I'm going to look for a class called marker under the section called overlays so this class right here 59 00:04:10,720 --> 00:04:12,960 is how we create a marker and show it on the screen. 60 00:04:12,960 --> 00:04:15,810 We're gonna create an instance of a marker. 61 00:04:16,060 --> 00:04:21,430 So we need to figure out how to create a marker properly and pass it some configuration options. 62 00:04:21,520 --> 00:04:27,330 That's going to get a marker to display in the correct position so to figure out how to do that we can 63 00:04:27,330 --> 00:04:29,340 take a look at the constructor function. 64 00:04:29,490 --> 00:04:30,640 So here's a constructor. 65 00:04:30,660 --> 00:04:37,080 It tells us that whenever we create an instance of a marker we can optionally pass in some options and 66 00:04:37,080 --> 00:04:43,410 that options object should conform to the marker options interface so in other words when we create 67 00:04:43,410 --> 00:04:49,680 a marker we can customize it by passing in an object that has the properties specified by this interface 68 00:04:49,680 --> 00:04:51,000 right here. 69 00:04:51,060 --> 00:04:57,150 So I going to command code click again on interface marker options and this is gonna tell us the possible 70 00:04:57,180 --> 00:05:02,890 options we can pass into the marker you'll notice that these options are once again nicely commented 71 00:05:02,980 --> 00:05:08,640 so we can scroll through and read all the different ways that we can somehow customize this marker. 72 00:05:08,650 --> 00:05:11,330 There are two properties in particular that we're going to take a look at. 73 00:05:11,350 --> 00:05:17,980 So going to scroll down a little bit and I'm going to find one option called map right here when we 74 00:05:17,980 --> 00:05:24,340 create a marker we can pass on that options object and it can have a map property that will be a reference 75 00:05:24,340 --> 00:05:30,040 to the map that we want to show the marker on so in a normal Google Maps application or I should say 76 00:05:30,040 --> 00:05:34,690 like on any web page you can potentially have multiple different maps. 77 00:05:34,690 --> 00:05:38,560 So like know maybe five maps titled about the screen or something like that. 78 00:05:38,770 --> 00:05:43,430 If we create a marker we have to specify which map we want to add the marker to. 79 00:05:43,450 --> 00:05:47,860 So the idea here is when we create the marker we're going to pass in an options object that has a map 80 00:05:47,860 --> 00:05:53,040 property and that map property is going to refer to the map that we want to add the marker to. 81 00:05:53,110 --> 00:05:53,790 That's it. 82 00:05:55,720 --> 00:06:02,610 Now the other option they're going to take a look at is a couple more properties down right here so 83 00:06:02,610 --> 00:06:04,850 the other property we care about is the position property. 84 00:06:04,890 --> 00:06:08,660 And this is going to specify where the marker shows up on the map itself. 85 00:06:09,000 --> 00:06:15,480 And you'll notice we can either pass in an instance of latitude longitude class or a latitude longitude 86 00:06:15,540 --> 00:06:20,640 literal which is just a plain object that has a latitude that is a number and a longitude that is a 87 00:06:20,640 --> 00:06:26,620 number so once again we've now taken a look at a type definition file and kind of figured out how to 88 00:06:26,620 --> 00:06:32,260 create a marker by just looking at this stuff without having to go and look at some complicated documentation 89 00:06:32,320 --> 00:06:33,930 or anything like that. 90 00:06:34,030 --> 00:06:39,570 So let's try to now create a marker using this information back inside of custom map. 91 00:06:39,640 --> 00:06:41,840 I'm going to find add user marker. 92 00:06:41,840 --> 00:06:50,030 So I'm going to create a new Google Maps dot marker so that's going to be the instance of the marker. 93 00:06:50,180 --> 00:06:52,630 This is us calling constructor function right here. 94 00:06:52,640 --> 00:06:57,200 And so that's where we can optionally pass in some marker options object. 95 00:06:57,530 --> 00:07:02,330 So I can pass in an object and I'm going to give it that map property which is going to refer to the 96 00:07:02,330 --> 00:07:08,300 map that we want to show this marker on so the map we want to show this marker on is going to be the 97 00:07:08,300 --> 00:07:15,290 Google map that we created and assigned as a field to our custom map class so map is going to be this 98 00:07:15,290 --> 00:07:21,810 dot google map and then remember the second property we care about is the position property. 99 00:07:21,910 --> 00:07:25,090 So I want to specify the position for this marker as well. 100 00:07:26,630 --> 00:07:31,640 We can hover over position right here and it will tell us that this property has to be either a latitude 101 00:07:31,730 --> 00:07:35,470 longitude instance or a lot of two longitude littoral. 102 00:07:35,470 --> 00:07:41,030 And remember that literal would be an object that has the lat and long properties so this will be an 103 00:07:41,030 --> 00:07:46,130 object and we're going to get the latitude from our user because that's where our location is coming 104 00:07:46,130 --> 00:07:46,730 from. 105 00:07:46,820 --> 00:07:53,730 So we can do user that location dot lat and then will also do our longitude which will be user dot location 106 00:07:53,760 --> 00:07:56,990 dot LNG and that's pretty much it. 107 00:07:59,070 --> 00:07:59,350 All right. 108 00:07:59,370 --> 00:08:00,350 Let's save this. 109 00:08:00,360 --> 00:08:03,060 We don't have any implementation for ad company marker just yet. 110 00:08:03,060 --> 00:08:07,950 But I just want to make sure that we can actually get a marker to display so gonna save the file. 111 00:08:07,950 --> 00:08:13,830 I'm going to flip back over to index dot t yes I'm going to uncommon the user import statement up here 112 00:08:13,830 --> 00:08:20,670 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 113 00:08:22,330 --> 00:08:27,420 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 114 00:08:27,420 --> 00:08:36,990 map we created and then we can do custom map dot add user marker in passing the user. 115 00:08:37,140 --> 00:08:37,400 All right. 116 00:08:37,420 --> 00:08:43,900 So let's see this flip back over my browser and I can see a marker displayed. 117 00:08:44,120 --> 00:08:48,070 Now remember we are randomly generating the latitude and longitude for the user. 118 00:08:48,100 --> 00:08:52,090 So every time you refresh you're going to see the marker in a different location. 119 00:08:52,450 --> 00:08:56,060 Sometimes the marker might not actually be visible and kind of like off the screen. 120 00:08:56,140 --> 00:09:00,550 That means that we just generated a latitude or longitude that is not like in the limits of typical 121 00:09:00,550 --> 00:09:02,180 Google Maps. 122 00:09:02,230 --> 00:09:03,580 That's probably not gonna happen too often. 123 00:09:03,580 --> 00:09:07,870 I just want to mention that if you sometimes refresh and you don't see the marker Chancellor everything 124 00:09:07,870 --> 00:09:12,780 is working correctly we just have a bad latitude all right so that looks pretty good. 125 00:09:12,810 --> 00:09:17,440 Let's take a quick pause right here and start to implement our ad company marker method in the next 126 00:09:17,440 --> 00:09:17,820 video.