We've now set up an initial implementation of our user in our company and we've tested both the mountain
mountainside of our index dot test 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 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 gonna 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 each team nail file.
We're not going to install google maps as an MP module or anything like that.
Honestly it is by far the easiest to include it in a 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.
Okay.
So let's get to it step number one is going to be good to go to this Google developer's console as you
might guess you're going to need a Google account to get through this step.
I can actually get this link if you don't have a Google account you can generate a throw away account
just for this project.
There's not gonna 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 gonna find the dropdown up here on the top left hand side.
Click on it and then find a 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 gonna use the default name.
So click on Create.
And once we do that you'll notice that there's this little spinner on the top right hand side.
When we cook and 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.
Okay.
So 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 that we've got that we're going to
enable Google Map 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 Map support inside this project to do so we're going to find
a navigation menu on the top left hand side 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 gonna see a lot of very similarly named libraries inside of here.
We are looking for a very specific one called the Maps API.
Two words Maps API.
And we're looking for maps javascript API right here.
Notice how there are several other similarly named one like here's maps embed map static and so on.
We are looking for maps javascript API so going to find that I'm going to click on it and then I'll
hit enable.
Like so that's going to add support for the javascript maps API to our project OK.
Once that's all done.
The last thing we're gonna do here inside that console is generate an API key which is really easy to
do so to generate an API key all again go to the mat navigation menu on the top left hand side.
Going to go again to API and 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 click on that we get a couple of different
options here we want to generate an API key and there it is there's our API key so I'm not going to
copy this just yet I'm going to leave it here for just a moment we're gonna use this API key and 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 H team I'll
file so I get to flip on over to my code editor I'm gonna find my index dot each email 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 gonna give it an S C property.
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
notice I've got a new script tag with an empty S.R. C 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 easiest to just type this out to actually find the link to it.
We would have to do like a lot of searching and whatnot so easiest to basically just type this out manually.
So inside those double quotes you're gonna type exactly this string as you see it as you type this out.
Please make sure that you get h TTP s 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 forward slashes okay.
So once you've got this over I'm going to copy this myself and I'm going to put it into those double
quotes right there I'm gonna paste it like so
all right.
Now last thing we need to do you'll notice at the very end of that link is key equals and we've got
the double click right after it.
We're going to put the API key that we just generated between the equal sign and the double quote sign.
So I'm gonna 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 and that's it.
All right.
So we should now be all 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 API key support not added or invalid API key or
anything like that up here 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 4
0 4 not found around that script file then that means that you probably made a typo on this you are
L 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 J.S. Right here and then you
should see one of the requests inside of here that says J.S. question mark key in all we're really looking
for is trying to see a status of 200 on their and that's it.
Okay.
Now we've got Google Map support added in.
Let's take a quick pause right here.
We're going to figure out how to generate a map in the next section.