1 00:00:01,280 --> 00:00:06,410 Now we've got our type definition file loaded up typescript understands what is going on with this Google 2 00:00:06,410 --> 00:00:07,310 library. 3 00:00:07,310 --> 00:00:11,720 This first line of code right here is telling typescript that there's going to be a global variable 4 00:00:11,750 --> 00:00:14,270 called Google on that variable. 5 00:00:14,270 --> 00:00:16,850 There's going to be a property called maps. 6 00:00:16,850 --> 00:00:21,860 And on that property is going to be a bunch of different other properties that are listed out inside 7 00:00:21,860 --> 00:00:26,090 this file to see everything that exists on this maps property. 8 00:00:26,090 --> 00:00:30,720 We can hit command shift P or control shift B if you're on Windows. 9 00:00:30,740 --> 00:00:35,880 This is going to pull open the Visual Studio code command pallet and then inside of here we're going 10 00:00:35,880 --> 00:00:38,710 to search four fold Level Two. 11 00:00:38,890 --> 00:00:43,400 I'm going to select that like so so all that does is kind of condense some these different sections 12 00:00:43,400 --> 00:00:44,480 of code. 13 00:00:44,520 --> 00:00:48,710 So now we can see all the different properties that this maps object has. 14 00:00:48,770 --> 00:00:54,740 So the maps object has a map property and as you might guess we can use this class right here to create 15 00:00:54,740 --> 00:00:57,080 a new map and show it on the screen. 16 00:00:57,170 --> 00:01:03,800 We can also see that this maps object has many other properties like padding map options map type I.D. 17 00:01:04,460 --> 00:01:09,110 gesture handling options and you can basically just scroll down the list and this will give you an overview 18 00:01:09,110 --> 00:01:11,880 of everything that's available inside this library. 19 00:01:11,900 --> 00:01:13,810 Here's another one that's probably gonna be relevant for us. 20 00:01:13,810 --> 00:01:15,410 Something called marker remember. 21 00:01:15,410 --> 00:01:19,700 We eventually want to show a marker on this map so we might eventually have to take a look at this thing 22 00:01:19,700 --> 00:01:22,990 right here to understand how to create a marker. 23 00:01:23,100 --> 00:01:27,600 And the reason I want you to look through this is because I want you over time to get in the habit of 24 00:01:27,600 --> 00:01:34,020 reading these type definition files to understand how a library works at the end of the day. 25 00:01:34,020 --> 00:01:39,950 Sure you can go and take a look at the documentation on Stack Overflow on how to create a map. 26 00:01:39,990 --> 00:01:41,150 You definitely can do that. 27 00:01:41,220 --> 00:01:45,600 But to really grow as a developer take a look at these type definition files. 28 00:01:45,690 --> 00:01:50,660 They tell you to some degree everything you need to know about how to work with the library. 29 00:01:50,910 --> 00:01:55,040 Sometimes like in this case there's a lot of stuff going on inside his file. 30 00:01:55,050 --> 00:01:59,280 And so it would be a little bit of a stretch to only use the same to understand how to create a map 31 00:01:59,280 --> 00:02:00,510 and show it on screen. 32 00:02:00,510 --> 00:02:05,410 But nonetheless I want you to kind of get in the habit of reading these type definition files. 33 00:02:05,450 --> 00:02:05,670 OK. 34 00:02:05,670 --> 00:02:12,360 So anyways the point here is that this very first thing right here that gets exported it means that 35 00:02:12,360 --> 00:02:18,750 we've got the Google Maps global object which has a maps property which has a map property and that 36 00:02:18,750 --> 00:02:25,200 map property capital in MAP is a class we can create an instance of this class right here to show a 37 00:02:25,200 --> 00:02:26,620 map on the screen. 38 00:02:26,760 --> 00:02:32,930 So let's expand this section right here and get a better understanding of how this class works so whenever 39 00:02:32,930 --> 00:02:38,300 we create an instance of map we're going to remember automatically call the constructor function and 40 00:02:38,300 --> 00:02:43,190 we are told right here what arguments this constructor function requires. 41 00:02:43,190 --> 00:02:47,240 So I don't really know you know necessarily a lot about what's going on here but you can kind of read 42 00:02:47,240 --> 00:02:48,170 this. 43 00:02:48,230 --> 00:02:53,240 So take a look at it says map div and that must be of type element. 44 00:02:53,570 --> 00:02:56,540 If you hover over element you'll get a little note here. 45 00:02:56,660 --> 00:03:00,160 Just as a quick hint an element is an h t male element. 46 00:03:01,010 --> 00:03:06,170 So by looking at just this constructor and using these hints right here here's what you might arrive 47 00:03:06,170 --> 00:03:06,410 at. 48 00:03:06,410 --> 00:03:10,280 If you had like a reasonable amount of experience with Google Maps what this is essentially telling 49 00:03:10,280 --> 00:03:16,470 us is that we can create an instance of a map when we do so we have to pass in a reference to an H html 50 00:03:16,610 --> 00:03:22,640 element and you know just based on my experience of working with maps that HMO element is probably going 51 00:03:22,640 --> 00:03:27,680 to be it where our Google map is going to be rendered inside of our HMO document. 52 00:03:27,680 --> 00:03:32,500 So I know that was like a real big stretch in thinking and to be kind of hard to connect those dots. 53 00:03:32,510 --> 00:03:37,460 But once again I just want you to get in the habit of trying to read these things and understand what's 54 00:03:37,460 --> 00:03:37,880 going on. 55 00:03:37,880 --> 00:03:43,100 This is like half the power of typescript right here reading these different types and using some little 56 00:03:43,100 --> 00:03:46,940 hints inside of here to understand how these libraries work. 57 00:03:47,060 --> 00:03:51,550 Having said that let's give this a shot so I'm gonna go back over to my next doctor. 58 00:03:51,550 --> 00:03:53,430 Yes file back over here. 59 00:03:53,430 --> 00:03:58,630 I'm going to clean up all that user and company stuff and come in out the 2 import statements. 60 00:03:58,650 --> 00:04:00,790 Let's focus on a map for right now. 61 00:04:00,830 --> 00:04:04,140 So like I just mentioned Google is a reference to the global variable. 62 00:04:04,560 --> 00:04:08,790 If we put a dot here we get a reminder that has a maps property. 63 00:04:08,790 --> 00:04:13,710 And if we put another dot we can see a list of all the different properties that belong to that maps 64 00:04:13,710 --> 00:04:19,440 object that's that big list of all those folded things we're just looking at so one of the things inside 65 00:04:19,440 --> 00:04:21,750 there is the map class. 66 00:04:21,750 --> 00:04:23,810 Right we were just looking at that. 67 00:04:23,850 --> 00:04:30,000 So we want to create an instance of a map class to create an instance of something we put the new keyword 68 00:04:30,000 --> 00:04:34,930 in front of it and we call it like so as soon as we write that out we're gonna get an error. 69 00:04:35,440 --> 00:04:40,660 So it tells us very directly we were expected to call this map class or try to create an instance of 70 00:04:40,660 --> 00:04:42,720 it with one or two arguments. 71 00:04:42,790 --> 00:04:47,410 So we were expected to pass in that map div thing remember we are just looking at that inside the type 72 00:04:47,410 --> 00:04:53,500 definition file and like I said this map div argument is supposed to be a reference to an H html element 73 00:04:53,740 --> 00:04:59,630 of where we want to place our map so we need to first create an e-mail element to house the map and 74 00:04:59,630 --> 00:05:02,600 then pass a reference to it as the first argument. 75 00:05:02,750 --> 00:05:09,440 So I'm gonna open up my index dot HDL file over here right above my script tag I'm going to create a 76 00:05:09,440 --> 00:05:14,320 div to function as the essentially roots or container for the map. 77 00:05:14,540 --> 00:05:17,220 So I gonna make a div with an idea of map. 78 00:05:17,460 --> 00:05:26,240 I'm going to give it a style tag or style property with a height of 100 percent notice how height has 79 00:05:26,240 --> 00:05:27,650 a colon right after it. 80 00:05:27,740 --> 00:05:32,450 1 1/2 percent and then semicolon and I'm going to close that div off like so. 81 00:05:34,000 --> 00:05:37,940 So now we're gonna get a reference to this div right here and pass it as the first argument and to that 82 00:05:37,940 --> 00:05:40,540 constructor it's going to save the H.M. file. 83 00:05:40,540 --> 00:05:45,800 I'm gonna close it and then to get a reference that element I'm going to use a document selector so 84 00:05:45,800 --> 00:05:49,860 I'll say document dot Oh what is it. 85 00:05:49,880 --> 00:05:51,540 My mind is totally blank in here. 86 00:05:51,560 --> 00:05:53,170 Get element by D. 87 00:05:53,270 --> 00:05:55,310 Yeah. 88 00:05:55,400 --> 00:05:57,590 Sorry sometimes the basics elude me right. 89 00:05:57,620 --> 00:06:00,450 Get element by idea because we just give that thing an idea. 90 00:06:00,530 --> 00:06:04,130 So the idea that did we just created was map like so. 91 00:06:04,130 --> 00:06:09,250 So notice the autocomplete that we get right here for the get element by idea function and we call that 92 00:06:09,260 --> 00:06:11,380 we get back in each team element. 93 00:06:11,450 --> 00:06:15,490 It's not quite the element type that that map constructor was looking for. 94 00:06:15,500 --> 00:06:19,190 Right I was saying I want an element but it seems like it's close enough. 95 00:06:19,340 --> 00:06:23,120 We're going to learn a little bit more about how one type can function as another type in a little bit 96 00:06:23,360 --> 00:06:28,310 but right now as soon as we add that code in it looks like everything worked all right. 97 00:06:28,310 --> 00:06:33,540 Now before we actually test this out I want to look at the map type definition file again. 98 00:06:33,680 --> 00:06:38,380 So here's a constructor once again we passed in an e-mail element as a first argument. 99 00:06:38,390 --> 00:06:42,500 Now you'll notice that there is a second argument list on here as well. 100 00:06:42,500 --> 00:06:46,350 Notice how the second argument has a question mark right after that. 101 00:06:46,430 --> 00:06:50,390 So whenever you see a question mark like that it means that this is an optional argument. 102 00:06:50,390 --> 00:06:53,810 We don't have to pass it in but if we cannot we if we want to. 103 00:06:53,990 --> 00:06:58,390 You'll notice that the type of this second argument is supposed to be map options. 104 00:06:59,400 --> 00:07:02,900 So let's take a look at what map options is. 105 00:07:02,910 --> 00:07:08,400 Notice how map options is an interface and remember an interface is kind of like a description of an 106 00:07:08,490 --> 00:07:10,440 object in the different properties it will have. 107 00:07:11,280 --> 00:07:15,120 So if we look at map options right here and look at the interface it might tell us about the different 108 00:07:15,150 --> 00:07:19,170 options we can pass in to customize this map when it is created. 109 00:07:19,170 --> 00:07:25,690 So I'm going to again hold down command and click on map options and I'm taken to the definition for 110 00:07:25,690 --> 00:07:27,640 map options right here. 111 00:07:27,640 --> 00:07:32,750 I'm going to expand this section and now we can take a look at all the different properties we can pass 112 00:07:32,750 --> 00:07:35,710 into customize how the map looks. 113 00:07:35,730 --> 00:07:40,760 Well this is pretty awesome so we can scroll through here and notice how this time there are nice little 114 00:07:40,760 --> 00:07:46,670 comments to tell us exactly how to customize the map so all the things that you see inside of here these 115 00:07:46,670 --> 00:07:52,730 are all possible properties that we could pass in as the second argument to this map constructor like 116 00:07:52,730 --> 00:07:58,430 right here we can take all these different properties we see right here and list them in right here 117 00:07:58,430 --> 00:08:00,700 inside this second object. 118 00:08:00,700 --> 00:08:04,440 So for you and I we are concerned with two very specific options. 119 00:08:04,700 --> 00:08:08,330 The very first one we want to pass in is something called Zoom so I going to scroll down a little bit 120 00:08:09,170 --> 00:08:16,170 inside this map options interface and I'm going to look for one property inside of here called Zoom 121 00:08:16,260 --> 00:08:19,890 right here so notice how it says zoom in that question mark. 122 00:08:19,910 --> 00:08:22,580 Remember that question mark means that this is an optional property. 123 00:08:22,580 --> 00:08:29,090 We don't have to include if we don't want to but for you and I we do this as the initial map level zoom 124 00:08:29,420 --> 00:08:34,520 now kind of misleading it says right here that it is required even though it was marked as optional. 125 00:08:34,520 --> 00:08:37,380 So that's kind of like I don't know what's going on there. 126 00:08:37,430 --> 00:08:38,290 They're saying that's required. 127 00:08:38,300 --> 00:08:43,160 So yeah we are going to pass it in ourselves and then it gives us some information about what different 128 00:08:43,160 --> 00:08:44,960 valid values we can pass in for it. 129 00:08:44,960 --> 00:08:50,110 So for us valid values are numbers between 0 and up to the maximum zoom level. 130 00:08:50,390 --> 00:08:56,130 So we're going to use a starting zoom level of one which is like pretty darn zoomed out so back inside 131 00:08:56,130 --> 00:08:57,330 of index dot to us. 132 00:08:57,360 --> 00:09:00,090 Here's the second object remember this is the options object. 133 00:09:00,090 --> 00:09:02,860 That's the interface definition we are looking at right now. 134 00:09:02,880 --> 00:09:05,790 I'm gonna put in zoom is 1. 135 00:09:05,790 --> 00:09:11,300 Notice how as soon as I started typing that I got some autocomplete on zoom right here. 136 00:09:11,490 --> 00:09:16,380 We're seeing that autocomplete because typescript knows that the second argument to this constructor 137 00:09:16,380 --> 00:09:21,140 is supposed to be an object that satisfies that interface we are just looking at. 138 00:09:21,200 --> 00:09:26,550 So type scripts going to look at that interfaces definition and know that it can have a property called 139 00:09:26,550 --> 00:09:31,710 Zoom and that's why we're seeing it on the autocomplete right there so going to add in that property 140 00:09:31,950 --> 00:09:35,710 and give it a value of one like so OK. 141 00:09:35,730 --> 00:09:37,570 One other property we're going to add in. 142 00:09:37,650 --> 00:09:43,590 Again it is one of the different options we can pass in under this map options interface. 143 00:09:43,660 --> 00:09:45,580 So here's map options again. 144 00:09:45,760 --> 00:09:51,400 I'm going to scroll down just a little bit more and we're looking for center right here. 145 00:09:51,400 --> 00:09:55,510 Again notice how even though it has a question mark right here which means that it is technically an 146 00:09:55,570 --> 00:09:56,740 optional property. 147 00:09:56,740 --> 00:09:59,190 They still say in there come in right here required. 148 00:09:59,230 --> 00:10:03,720 So kind of misleading right there but I guess they're just doing their thing. 149 00:10:03,750 --> 00:10:10,350 So this is saying that our map options object can have a center property and if it does it must satisfy 150 00:10:10,470 --> 00:10:17,660 that type of being latitude longitude or lat longitude literal so in our case we're going to go for 151 00:10:17,660 --> 00:10:20,470 lat longitude literal I'm going to give you that little hint. 152 00:10:20,530 --> 00:10:26,270 So now to figure out how to provide a center property that satisfies this interface right here we can 153 00:10:26,270 --> 00:10:32,300 again do a command click on that and it's going to tell us how we can be considered to be a latitude 154 00:10:32,360 --> 00:10:39,640 longitude literal so to be allowed to launch it too literal we have to pass in an object that has a 155 00:10:39,640 --> 00:10:46,130 latitude that's a number and a longitude that's a number so that means that back here inside of our 156 00:10:46,130 --> 00:10:54,530 map our options object we can add in another property of center notice so as soon as I start typing 157 00:10:54,530 --> 00:10:58,950 that I see the autocomplete that's coming from the interface definition we are just looking at. 158 00:10:59,120 --> 00:11:04,160 And if I put on a colon or if I just hover over center it tells me that the center property is supposed 159 00:11:04,160 --> 00:11:10,160 to be an instance of latitude longitude or that latitude longitude literal thing that we're just looking 160 00:11:10,160 --> 00:11:10,860 at. 161 00:11:11,120 --> 00:11:15,110 And that's what we're going to try to provide some means that we're going to pass in an object here 162 00:11:15,920 --> 00:11:23,350 that has that lat property we're going to use a value of zero and a longitude of zero as well. 163 00:11:23,370 --> 00:11:27,570 So that means that the center of our map is going to be at 0 0 okay. 164 00:11:27,580 --> 00:11:31,320 I know that this entire process was like really far very much in depth. 165 00:11:31,390 --> 00:11:36,550 But again my only intent here is to just start kind of forcibly exposing you to these type definition 166 00:11:36,550 --> 00:11:41,770 files because you can do that command click and look through all these different types and use them 167 00:11:41,830 --> 00:11:44,540 as hints to understand how to work at the library. 168 00:11:44,620 --> 00:11:49,600 You don't have to look at the documentation all the time when you are working with typescript. 169 00:11:49,600 --> 00:11:54,370 I apologize again for this video being so long but I just want you to look through an entire example 170 00:11:54,400 --> 00:11:58,160 with Google maps of how I personally would go through that process. 171 00:11:58,180 --> 00:12:01,840 I also know that some of the things I showed you in here was probably like you know a little bit of 172 00:12:01,840 --> 00:12:05,070 a jump like we haven't quite seen this syntax before right here. 173 00:12:05,110 --> 00:12:06,450 So I know some of that was a little bit rough. 174 00:12:06,460 --> 00:12:09,390 But again just want to expose you to it at least one time. 175 00:12:10,160 --> 00:12:10,420 OK. 176 00:12:10,420 --> 00:12:14,270 Having said all that we've now got our options object put together right here. 177 00:12:14,380 --> 00:12:20,110 So I'm not going to save this file I'm going to flip back over to my browser and lo and behold we see 178 00:12:20,110 --> 00:12:21,260 our map. 179 00:12:21,410 --> 00:12:21,860 All right. 180 00:12:21,890 --> 00:12:24,830 You'll notice that the map is technically centered on 0 0. 181 00:12:24,860 --> 00:12:28,700 That's like right there latitude and longitude. 182 00:12:28,700 --> 00:12:33,140 I know that you can kind of see North America South America duplicated in Asia of course as well but 183 00:12:33,470 --> 00:12:35,660 this is going to work for our application. 184 00:12:35,690 --> 00:12:35,930 All right. 185 00:12:35,930 --> 00:12:38,290 So let's take a quick pause right here going to come back in the next video. 186 00:12:38,330 --> 00:12:43,550 We're going to start to think about how we can show our user in our company as markers on this map. 187 00:12:43,550 --> 00:12:45,590 So quick pause and I'll see you in just a minute.