1 00:00:01,060 --> 00:00:05,550 We've now set up an initial implementation of our user in our company and we've tested both the mountain 2 00:00:05,560 --> 00:00:10,900 mountainside of our index dot test file remember the original goal of our application was to show the 3 00:00:10,900 --> 00:00:14,270 location of that user and that company as markers on our map. 4 00:00:14,830 --> 00:00:19,790 So in this video we're going to start putting in support for showing a Google map inside of application. 5 00:00:19,840 --> 00:00:24,910 This is going to be a little bit of you know kind of tedious setup but we'll go through it step by step 6 00:00:24,940 --> 00:00:26,860 and we'll get through it quickly enough. 7 00:00:26,950 --> 00:00:28,430 So here's what we need to do. 8 00:00:28,480 --> 00:00:34,870 We're going to first go to the Google Developers console and generate a new Google Developer project. 9 00:00:34,870 --> 00:00:39,550 This project is what's going to allow us to get access to the Google Maps API which is how we're going 10 00:00:39,550 --> 00:00:42,010 to actually show a map on the screen. 11 00:00:42,180 --> 00:00:47,220 So we're gonna first generate that project we're then going to enable support for Google Maps inside 12 00:00:47,230 --> 00:00:55,900 that project will then create an API key and then use that API key to add in the Google Maps SDK to 13 00:00:55,900 --> 00:00:57,700 our each team nail file. 14 00:00:57,700 --> 00:01:01,120 We're not going to install google maps as an MP module or anything like that. 15 00:01:01,390 --> 00:01:06,040 Honestly it is by far the easiest to include it in a script tag and just use it that way. 16 00:01:06,730 --> 00:01:11,140 In addition doing it that way is going to teach us a little bit more about using global scripts included 17 00:01:11,140 --> 00:01:14,920 inside of a typescript project which is just a nice little bonus. 18 00:01:14,950 --> 00:01:15,160 Okay. 19 00:01:15,180 --> 00:01:20,350 So let's get to it step number one is going to be good to go to this Google developer's console as you 20 00:01:20,350 --> 00:01:24,190 might guess you're going to need a Google account to get through this step. 21 00:01:24,190 --> 00:01:30,000 I can actually get this link if you don't have a Google account you can generate a throw away account 22 00:01:30,000 --> 00:01:32,070 just for this project. 23 00:01:32,070 --> 00:01:36,960 There's not gonna be any billing or any money or anything like that tied with what we're doing here. 24 00:01:37,140 --> 00:01:41,310 Once you go to that address you're going to either see a welcome screen that's going to ask you to generate 25 00:01:41,340 --> 00:01:46,470 a project or if you've ever created a Google project before you're going to see a screen a little bit 26 00:01:46,470 --> 00:01:48,220 like this one right here. 27 00:01:48,240 --> 00:01:52,950 So for what we are doing I highly recommend you create a new project separate from any one you've done 28 00:01:52,950 --> 00:01:53,550 before. 29 00:01:53,550 --> 00:01:54,210 You don't have to. 30 00:01:54,210 --> 00:01:56,580 So you can reuse an existing project if you want to. 31 00:01:56,580 --> 00:01:59,900 But in general I would recommend you use a new one to do so. 32 00:01:59,910 --> 00:02:02,500 We're gonna find the dropdown up here on the top left hand side. 33 00:02:02,670 --> 00:02:08,420 Click on it and then find a new project on the top right once here. 34 00:02:08,430 --> 00:02:12,300 We can create a new project you can give it a customized name if you wish. 35 00:02:12,300 --> 00:02:15,120 I'm not going to do any customization I'm just gonna use the default name. 36 00:02:15,750 --> 00:02:17,450 So click on Create. 37 00:02:17,450 --> 00:02:21,210 And once we do that you'll notice that there's this little spinner on the top right hand side. 38 00:02:21,390 --> 00:02:24,540 When we cook and create the project is not generated instantly. 39 00:02:24,780 --> 00:02:29,310 So I actually got dumped back into the project I was looking at before we have to wait for that spinner 40 00:02:29,310 --> 00:02:31,610 to go away before we can actually access the project. 41 00:02:31,610 --> 00:02:32,930 We just created. 42 00:02:32,960 --> 00:02:33,210 Okay. 43 00:02:33,210 --> 00:02:38,280 So looks like my spinner just finished up so I can now click on notifications and then click on the 44 00:02:38,280 --> 00:02:45,540 project I just made so we're now looking at that new project now that we've got that we're going to 45 00:02:45,540 --> 00:02:48,320 enable Google Map support inside of it. 46 00:02:48,390 --> 00:02:54,660 So by default Google has a ton of different services that they make available like tons and tons and 47 00:02:54,660 --> 00:02:56,410 Google Maps is just one of them. 48 00:02:56,430 --> 00:03:01,680 So we have to specifically enable Google Map support inside this project to do so we're going to find 49 00:03:01,680 --> 00:03:09,730 a navigation menu on the top left hand side going to find APIs and services and then click on library. 50 00:03:09,920 --> 00:03:14,240 Then once here we're going to be looking for a very specific api library. 51 00:03:14,240 --> 00:03:18,000 There are many different maps projects or many different maps libraries like. 52 00:03:18,110 --> 00:03:19,950 Right now 15 in total. 53 00:03:19,950 --> 00:03:23,330 So you're gonna see a lot of very similarly named libraries inside of here. 54 00:03:23,330 --> 00:03:29,430 We are looking for a very specific one called the Maps API. 55 00:03:29,540 --> 00:03:30,910 Two words Maps API. 56 00:03:31,690 --> 00:03:35,570 And we're looking for maps javascript API right here. 57 00:03:35,570 --> 00:03:40,830 Notice how there are several other similarly named one like here's maps embed map static and so on. 58 00:03:40,910 --> 00:03:47,660 We are looking for maps javascript API so going to find that I'm going to click on it and then I'll 59 00:03:47,660 --> 00:03:48,650 hit enable. 60 00:03:48,650 --> 00:03:55,110 Like so that's going to add support for the javascript maps API to our project OK. 61 00:03:55,140 --> 00:03:56,580 Once that's all done. 62 00:03:56,680 --> 00:04:01,650 The last thing we're gonna do here inside that console is generate an API key which is really easy to 63 00:04:01,650 --> 00:04:07,490 do so to generate an API key all again go to the mat navigation menu on the top left hand side. 64 00:04:07,640 --> 00:04:14,630 Going to go again to API and services and then click on credentials once I'm here I'll then find the 65 00:04:14,630 --> 00:04:19,600 create credentials button on the very center of the screen click on that we get a couple of different 66 00:04:19,600 --> 00:04:27,780 options here we want to generate an API key and there it is there's our API key so I'm not going to 67 00:04:27,780 --> 00:04:32,850 copy this just yet I'm going to leave it here for just a moment we're gonna use this API key and just 68 00:04:32,850 --> 00:04:37,920 a second so we'll leave it here on the screen all right so here's what we have to do first before we 69 00:04:37,920 --> 00:04:43,350 can actually use that API key we need to add a script tag for the Google Maps SDK to our H team I'll 70 00:04:43,350 --> 00:04:51,790 file so I get to flip on over to my code editor I'm gonna find my index dot each email file and then 71 00:04:51,850 --> 00:04:56,320 right above the existing script tag please make sure you put this right above we're going to add in 72 00:04:56,380 --> 00:05:01,910 a new script tag I'm gonna give it an S C property. 73 00:05:01,910 --> 00:05:07,570 I'm gonna put in a set of double quotes in there and then I'm going to close off the script tag as a 74 00:05:07,570 --> 00:05:13,300 notice I've got a new script tag with an empty S.R. C right above the existing one so inside of those 75 00:05:13,300 --> 00:05:18,010 double quotes right there we're going to manually type out the address of the SDK that we're looking 76 00:05:18,010 --> 00:05:23,640 for honestly it's easiest to just type this out to actually find the link to it. 77 00:05:23,640 --> 00:05:29,290 We would have to do like a lot of searching and whatnot so easiest to basically just type this out manually. 78 00:05:29,430 --> 00:05:35,180 So inside those double quotes you're gonna type exactly this string as you see it as you type this out. 79 00:05:35,190 --> 00:05:42,030 Please make sure that you get h TTP s the colon and then the two slashes you would not believe the number 80 00:05:42,030 --> 00:05:47,220 of people who I hear from who have trouble on projects and it's all because they make a typo on this 81 00:05:47,220 --> 00:05:48,380 first little part right here. 82 00:05:48,390 --> 00:05:53,510 So please make sure you get the colon and the two forward slashes okay. 83 00:05:53,570 --> 00:05:58,290 So once you've got this over I'm going to copy this myself and I'm going to put it into those double 84 00:05:58,290 --> 00:06:01,370 quotes right there I'm gonna paste it like so 85 00:06:04,650 --> 00:06:04,900 all right. 86 00:06:04,930 --> 00:06:09,790 Now last thing we need to do you'll notice at the very end of that link is key equals and we've got 87 00:06:09,790 --> 00:06:11,410 the double click right after it. 88 00:06:11,410 --> 00:06:17,260 We're going to put the API key that we just generated between the equal sign and the double quote sign. 89 00:06:17,270 --> 00:06:20,400 So I'm gonna go find the API key that I just generated right here. 90 00:06:20,410 --> 00:06:22,120 I'm going to copy it. 91 00:06:22,120 --> 00:06:28,700 I'm going to flip back over find key equals right there and paste the key and that's it. 92 00:06:30,970 --> 00:06:31,200 All right. 93 00:06:31,210 --> 00:06:38,210 So we should now be all to save this file flip back over to our browser open up our application. 94 00:06:38,380 --> 00:06:44,580 We should be able to refresh this page and then just let it sit on the console for just a moment. 95 00:06:44,770 --> 00:06:50,740 If you see anything inside the console that says like API key support not added or invalid API key or 96 00:06:50,740 --> 00:06:54,100 anything like that up here as a warning or an error inside your console. 97 00:06:54,130 --> 00:06:59,950 That means that something went wrong during the initialization if you see an error that says like 4 98 00:06:59,950 --> 00:07:05,530 0 4 not found around that script file then that means that you probably made a typo on this you are 99 00:07:05,530 --> 00:07:11,400 L right here and you'll want to do a double check on it to make sure that everything works. 100 00:07:11,630 --> 00:07:18,620 We can open up the network tab inside of chrome console we can click on J.S. Right here and then you 101 00:07:18,620 --> 00:07:24,930 should see one of the requests inside of here that says J.S. question mark key in all we're really looking 102 00:07:24,930 --> 00:07:29,910 for is trying to see a status of 200 on their and that's it. 103 00:07:30,930 --> 00:07:31,220 Okay. 104 00:07:31,270 --> 00:07:33,190 Now we've got Google Map support added in. 105 00:07:33,400 --> 00:07:34,830 Let's take a quick pause right here. 106 00:07:34,840 --> 00:07:37,480 We're going to figure out how to generate a map in the next section.