♪ [intro music] ♪ Hey, I'm Leigh Halliday, and today we're going to get up
and running with Google Maps in React in about five minutes. So, to get started, we've got this <i>Home</i> component that's simply rendering out
a <i>div</i> that says <i>Map</i>. So if we go into the browser, we get this beautiful white canvas
that says <i>Map</i>. And at this point, it's time to load in
the Google Maps script which loads a whole bunch
of JavaScript underneath that's used by the map itself. So, for that, we're going to use
a Hook called <i>useLoadScript</i>, which comes from the package
we're using, <i>react-google-maps/api</i>. We'll put this into a variable. We will call the Hook, and you need to pass in an object
that has the Google Maps API key, which for now we'll put
as an empty string, and we'll hop over
into the Credentials console, where we can create a new API key. We'll copy this API key. At this point, I should say, you should restrict your API key, preferably to the domain
you're hosting your website on. And you may want to go
into the APIs page as well and make sure that you have
the <i>Maps JavaScript API</i> enabled. If you get any sort of error
while you're building this, check the developer tools console. You may get a message
that tells you what's wrong. So we'll go, and we'll paste this here. But just stopping at this point,
we actually shouldn't do this. You shouldn't commit
your API keys to your code, especially if you're pushing
this up to a public repository. Instead, what we'll do is we'll place this
into an environment variable. So in Next.js, you can use
a <i>.env.local</i> file, which is not committed into Git itself, and it will pick this up and load it. And wherever you host this website, you'll need to load
this environment variable there as well. It's very important in this case
to prefix this with <i>NEXT_PUBLIC</i> before whatever name we want, so that <i>NEXT</i> includes this
into the client side, into the browser JavaScript so that it's available to us. So we'll access it with <i>process.env.</i> the environment variable name, and that will give us a variable
that we can access here called <i>isLoaded</i>. With this <i>isLoaded</i>, we can check. If it's not loaded, we're going to return
a loading screen of some sort. So this could be as fancy
or unfancy as you want. We're just going to say "Loading..." And then once it's loaded,
it will render out our map. If I refresh for a split second,
you see loading, but more importantly, if you go inspect the code in the <i>head</i>, you'll see that it's inserted a script tag that's loading the map's
Google APIs JavaScript. So we're good to go,
and we can start working on the map. And I'm going to create
a functional component called "Map()" that will return temporarily
the word "Map" again. And here, we will instead
use this component. So for the <i>Map</i> itself, we're going to use this component
called <i>GoogleMap</i>. So we'll come here, and we'll replace this with <i>GoogleMap</i>. And there's three props you need to pass
for everything to work correctly. The first is the <i>zoom</i>, so how far in or out
do we want this zoomed. We'll start at 10-- it's a pretty good number to work with. Where is the center of the map
going to be positioned? We're going to say "center", and it's an object that will have
latitude and "Lng" for longitude. We'll just set it at a place
around Toronto in Canada. Lastly, we need to tell it how big of a container
or styling the container that the <i>GoogleMap</i> will be rendered into. So, for that, we can set a class
named <i>mapContainerClassName</i>. I've already set up some CSS
that has a map container that's simply "width 100%; height: 100vh" so basically the whole screen. We can come back and paste this in. And if we go to the browser,
we should have a map rendering. So, great. Now let's try
and place a marker on it. We'll go back to our code, and inside of the <i>GoogleMap</i> component,
we'll place a marker. But this isn't enough, because where on the map
would this marker be positioned? We need to give it the position, and we can set it to the same thing,
"lat: 44, lng: -80" and that will place this marker
right here in the middle. Now, one thing to note, if you were to move this screen around, and for whatever reason
it re-rendered this component, it would actually re-center itself
to this position. Every time it re-renders, the map component gets tricked, thinking, "Oh, you gave me
a new center position. I'll re-center the map." To solve this, we can put it
into a variable called "center" and we'll just copy this right here. This has the same problem, though,
even if I replace this variable, because every time it re-renders,
it creates a new object. And even though it's the same object, it's not a reference
to the same internal object. To solve this, we can either
move this outside of the component, so that would solve it; or we can keep it in the component and instead use the <i>useMemo</i> Hook. So, what <i>useMemo</i> does
is it basically memorizes the result. And what that means
is it performs the calculation once every time the dependencies, which is this array argument here, change. And because we have no dependencies,
it's an empty array. It will calculate its value once and then reuse that
every single time it re-renders. Now we've solved this problem
of it accidentally re-centering itself. That's it! That's how
to get up and running with Google Maps in React. Thanks! ♪ [outro music] ♪
