We've now set up an initial implementation of our user and our company, and we've tested both them
out inside of our index sites file, remember, the original goal of our application was to show the
location of that user and that company as markers on our map.
So in this video, we're going to start putting in support for showing a Google map inside of our application.
This is going to be a little bit of, you know, kind of tedious setup, but we'll go through it step
by step and we'll get through it quickly enough.
So here's what we need to do.
We're going to first go to the Google developers console and generate a new Google developer project.
This project is what's going to allow us to get access to the Google Maps API, which is how we're going
to actually show a map on the screen.
So we're going to first generate that project.
We're then going to enable support for Google Maps inside that project will then create an API key.
And then use that API key to add in the Google Maps SDK to our HTML file.
We're not going to install Google Maps as an NPR module or anything like that.
Honestly, it is by far the easiest to include it in the script tag and just use it that way.
In addition, doing it that way is going to teach us a little bit more about using global scripts included
inside of a typescript project, which is just a nice little bonus.
OK, so let's get to it.
Step number one is going to be to go to this Google developers console.
As you might guess, you're going to need a Google account to get through the step.
I can actually get this link.
If you don't have a Google account, you can generate a throwaway account just for this project, there's
not going to be any billing or any money or anything like that tied with what we're doing here.
Once you go to that address, you're going to either see a welcome screen that's going to ask you to
generate a project or if you've ever created a Google project before, you're going to see a screen
a little bit like this one right here.
So for what we are doing, I highly recommend you create a new project separate from any one you've
done before.
You don't have to.
So you can reuse an existing project if you want to.
But in general, I would recommend you use a new one.
To do so, we're going to find the dropdown up here on the top left hand side, click on it and then
find new project on the top right.
Once here, we can create a new project, you can give it a customized name if you wish.
I'm not going to do any customization.
I'm just going to use the default name.
So I click on Create and I once we do that, you'll notice that there's this little spinner on the top
right hand side.
When we click on Create, the project is not generated instantly.
So I actually got dumped back into the project I was looking at before.
We have to wait for that spinner to go away before we can actually access the project we just created.
OK, so it looks like my spinner just finished up so I can now click on notifications and then click
on the project I just made.
So we're now looking at that new project.
Now, we've that we've got that we're going to enable Google Maps support inside of it, so by default,
Google has a ton of different services that they make available, like tons and tons.
And Google Maps is just one of them.
So we have to specifically enable Google Maps support inside this project to do so.
We're going to find the navigation menu on the top left side.
I'm going to find APIs and services and then click on library.
Then once here, we're going to be looking for a very specific API library, there are many different
maps, projects or many different maps, libraries like right now, 15 in total.
So you're going to see a lot of very similarly named libraries inside of here.
We are looking for a very specific one called the Maps API.
OK, two words, Maps API.
And we're looking for maps, JavaScript API right here.
Notice how there are several other similarly named, one like yours, maps, embed maps, Statik and
so on.
We are looking for maps, JavaScript API.
So I'm going to find that I'm going to click on it and then I'll hit enable like so.
So that's going to add support for the JavaScript Maps API to our project.
OK, once that's all done, then the last thing we're going to do here inside that console is generate
an epic, which is really easy to do.
So to generate an apical again, go to the navigation menu on the top Left-Hand side.
I'm going to go again to Apison Services and then click on credentials.
Once I'm here, I'll then find the create credentials button on the very center of the screen, a click
on that.
We get a couple of different options here.
We want to generate an epic.
And there it is, there's our APIC, so I'm not going to copy this just yet, I'm going to leave it
here for just a moment.
We're going to use this APIC in just a second, so we'll leave it here on the screen.
All right, so here's what we have to do first before we can actually use that API key, we need to
add a script tag for the Google Maps SDK to our HTML file.
So I'm going to flip on over to my code editor.
I'm going to find my indexed HTML file and then right above the existing script tag, please make sure
you put this right above.
We're going to add in a new script tag.
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
then I'm going to close off the script tag.
As a notice, I've got a new script tag with an empty Sarsae right above the existing one.
So inside of those double quotes right there, we're going to manually type out the address of the SDK
that we're looking for.
Honestly, it's easier to just type this out to actually find the link to it.
We would have to do like a lot of searching and what not so easy is to basically just type this out
manually.
So inside those double quotes, you're going to type exactly the string as you see it.
As you type this out, please make sure that you get https, the colon and then the two slashes, you
would not believe the number of people who I hear from who have trouble on projects.
And it's all because they make a typo on this first little part right here.
So please make sure you get the colon and the two board slashes.
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
double quotes right there.
I'm going to paste it like so.
All right, so now the last thing we need to do, you'll notice at the very end of that link is key
equals.
And we got the double quote right after it.
We're going to put the APIC that we just generated between the equals sign and the double quotes sign.
So I'm going to go find the API key that I just generated right here.
I'm going to copy it.
I'm going to flip back over, find key equals right there and paste the key.
All right, so we should now be able to save this file.
Flip back over to our browser, open up our application.
We should be able to refresh this page.
And then just let it sit on the console for just a moment.
If you see anything inside the console that says like APIC support, not added or invalid APIC or anything
like that appear as a warning or an error inside your console.
That means that something went wrong during the initialization.
If you see an error that says like 404 not found around that script file, then that means that you
probably made a typo on this URL right here and you'll want to do a double check on it.
To make sure that everything works, we can open up the network tab inside of Chrome console, we can
click on it just right here.
And then you should see one of the requests inside of here that says J.S. Questionmark Key.
And then all we're really looking for is trying to see a status of 200 on their.
And that's it.
OK, so now we've got Google Maps support added in.
Let's take a quick pause right here and we're going to figure out how to generate a map in the next
section.