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