In the last section we added in a little bit of crazy code for creating a new Google map.
So there's a couple of things I want to tell you about this statement that we've got in here.
First you'll notice that we said component did Mounseer.
So this is one of our lifecycle methods that gets called automatically after this component has been
rendered to the screen.
Then inside of it we called new Google Maps dot map.
This is how we create an embedded Google map inside of our document.
Google Maps start map will take a reference to in each T.M. node or an HMO element where we want to
render this map too.
So Google Maps is going to say Aha you're passing me this nice little HDMI element I'm going to find
this element on the screen and render an embedded map into it.
So this right here this is where on the screen the map will get rendered too.
This is how we do a lot of interaction between third party libraries that don't really know how to work
in the type of you know re-act ecosystem.
They don't really have any idea what a render method is or what GSX is.
So this is generally how we make third party libraries work nicely with react later on in this course.
The very last section will talk a lot more about exactly how to integrate with third party libraries.
So after we go through this section if you're still at all confused you can always feel free to jump
to that very last section and take a glance at that one particular lecture or discuss a lot more how
to work with third party libraries.
Now the second argument to this function is an options object.
We first designate the zoom level.
So if you've ever used Google maps before you know that you can zoom in and out to incredible degrees
like all the way from street view all the way to a full scale planet view.
That's what the zoom property right here is a zoom of 12 pretty much means give me a good glimpse of
a city is about to the screen width of a city and we'll see it in just a moment.
Next we specify the center property distils Google Maps where we want to center the map on where we
provide the properties lat and long longitude here.
And we assume that this component that we just created will be provided with a latitude and longitude
on the lat and lon property do notice that we've got a little bit of mismatch in what Google expects
the longitude to be passed in as and how we have been passing our long property around.
So we when we get our response back from the weather maps API that we've been using the longitude comes
back to us as this L-O and property that we're going to see in just a second.
And so it's solely because of a mismatch between the API that we're using and Google's map Google Maps
idea of what a longitude is that we end up with this little bit of mismatch look at looks.
Let's integrate this component into our row you know replace it for just the city title and think we'll
get a better idea of exactly what's going on with the styling and some of the options that we're passing
in here.
So we're going to find my weather list component you know open it up and I'm going to scroll down to
just inside of the render when we render whether function.
Here it is.
And we're going to find where we designate the name inside the TV right here.
So essentially the name property I now want to show this Google Map component that we just created.
So at the top we will import in our Google map from the components directory
and then inside of the TV right here rather than showing the name.
I want to show my Google Map component that I just created.
Now as I just mentioned we have to pass in the longitude and latitude into that component again the
city data object that we got back from the weather API will provide that longitude and latitude for
us.
So we can get a reference to both of them by saying Konst lawn city data City Howard lawn.
So again this is where that Laune property is coming from why I'm calling it lawn here instead of just
longitude or LNG as Google Maps expects.
It's kind of like a mismatch in property names and we can also say Konst let City Data city cord and
latitude like so now you'll notice that we have duplicated a lot of accessing properties in here.
So in two cases we've got city data does City d'accord we can use a little bit of ESX syntax here to
use some destructuring to condense this down to a single line of code.
So I'm going to delete the second instance or the second line here and then I'll change this initial
line to have a set of curly braces.
What add in lawn and Latt right here.
And I'm going to remove the last line at the end.
So this line right here essentially says find the chord object grab the elsewhen in LA properties off
of it and assign them to two new variables called L-O and in L.A. so we can now make free access to
law and laugh throughout the rest of this function right here.
So we'll pass them both as properties to our Google map object.
I'll say Lon and let like so cool.
Now I think we're about ready to give us a shot in a browser.
There's just one more very small thing that we have to do.
By default the Google map that will get rendered does not have any height or with.
So the Google maps maps API makes no assumptions whatsoever about the size of the map that you're trying
to render on the screen.
So we're going to add in a little bit of CSSA to size the map appropriately.
I'm going to open back up the style that CSSA file that we were just working on.
And I am going to add in a quick little rule here.
We're going to say T.T. first of type and TV First of type div..
We're going to give it a height of 200 pixels and a width of 250 pixels.
So it says find the first CD inside of each row and also find the first CD and it's child div which
is going to be the Google map and give it a height of 200 pixels and the width of 250.
So let's now give us a shout out in the browser.
I'm going to come back over.
We will refresh the page and let's look up Sacramento.
All right.
Hot dog there is our map we can look up new York Seattle and so on.
Perfect.
So we've got this nice Google map in here and we can freely scroll around on it or we can zoom out if
we so chose it just kind of gives our user the idea of OK.
Yup this is the weather for this very particular location that I was expecting.
In addition we can flip over to satellite view just fine.
So it shows what kind of good stuff that you would usually expect out of a Google map.
OK.
This looks like an awesome application.
Let's do a little bit of wrap up in the next section