1
00:00:00,830 --> 00:00:05,820
In the last section we added in a little bit of crazy code for creating a new Google map.

2
00:00:05,820 --> 00:00:10,150
So there's a couple of things I want to tell you about this statement that we've got in here.

3
00:00:10,230 --> 00:00:13,640
First you'll notice that we said component did Mounseer.

4
00:00:13,650 --> 00:00:18,360
So this is one of our lifecycle methods that gets called automatically after this component has been

5
00:00:18,360 --> 00:00:20,030
rendered to the screen.

6
00:00:20,250 --> 00:00:24,600
Then inside of it we called new Google Maps dot map.

7
00:00:24,600 --> 00:00:29,300
This is how we create an embedded Google map inside of our document.

8
00:00:29,580 --> 00:00:36,360
Google Maps start map will take a reference to in each T.M. node or an HMO element where we want to

9
00:00:36,510 --> 00:00:38,000
render this map too.

10
00:00:38,280 --> 00:00:44,070
So Google Maps is going to say Aha you're passing me this nice little HDMI element I'm going to find

11
00:00:44,070 --> 00:00:48,350
this element on the screen and render an embedded map into it.

12
00:00:48,360 --> 00:00:52,600
So this right here this is where on the screen the map will get rendered too.

13
00:00:52,710 --> 00:00:57,960
This is how we do a lot of interaction between third party libraries that don't really know how to work

14
00:00:57,960 --> 00:01:00,680
in the type of you know re-act ecosystem.

15
00:01:00,690 --> 00:01:05,090
They don't really have any idea what a render method is or what GSX is.

16
00:01:05,220 --> 00:01:11,160
So this is generally how we make third party libraries work nicely with react later on in this course.

17
00:01:11,160 --> 00:01:16,350
The very last section will talk a lot more about exactly how to integrate with third party libraries.

18
00:01:16,530 --> 00:01:21,000
So after we go through this section if you're still at all confused you can always feel free to jump

19
00:01:21,000 --> 00:01:26,340
to that very last section and take a glance at that one particular lecture or discuss a lot more how

20
00:01:26,340 --> 00:01:29,250
to work with third party libraries.

21
00:01:29,400 --> 00:01:33,600
Now the second argument to this function is an options object.

22
00:01:33,620 --> 00:01:36,230
We first designate the zoom level.

23
00:01:36,540 --> 00:01:41,910
So if you've ever used Google maps before you know that you can zoom in and out to incredible degrees

24
00:01:41,910 --> 00:01:46,580
like all the way from street view all the way to a full scale planet view.

25
00:01:46,920 --> 00:01:52,380
That's what the zoom property right here is a zoom of 12 pretty much means give me a good glimpse of

26
00:01:52,380 --> 00:01:57,510
a city is about to the screen width of a city and we'll see it in just a moment.

27
00:01:57,540 --> 00:02:04,350
Next we specify the center property distils Google Maps where we want to center the map on where we

28
00:02:04,350 --> 00:02:08,550
provide the properties lat and long longitude here.

29
00:02:08,970 --> 00:02:14,580
And we assume that this component that we just created will be provided with a latitude and longitude

30
00:02:14,580 --> 00:02:21,090
on the lat and lon property do notice that we've got a little bit of mismatch in what Google expects

31
00:02:21,090 --> 00:02:26,660
the longitude to be passed in as and how we have been passing our long property around.

32
00:02:26,670 --> 00:02:33,840
So we when we get our response back from the weather maps API that we've been using the longitude comes

33
00:02:33,840 --> 00:02:37,900
back to us as this L-O and property that we're going to see in just a second.

34
00:02:38,000 --> 00:02:43,830
And so it's solely because of a mismatch between the API that we're using and Google's map Google Maps

35
00:02:43,920 --> 00:02:49,490
idea of what a longitude is that we end up with this little bit of mismatch look at looks.

36
00:02:49,710 --> 00:02:54,840
Let's integrate this component into our row you know replace it for just the city title and think we'll

37
00:02:54,840 --> 00:02:59,400
get a better idea of exactly what's going on with the styling and some of the options that we're passing

38
00:02:59,400 --> 00:03:00,490
in here.

39
00:03:00,570 --> 00:03:06,450
So we're going to find my weather list component you know open it up and I'm going to scroll down to

40
00:03:06,450 --> 00:03:10,720
just inside of the render when we render whether function.

41
00:03:10,740 --> 00:03:11,830
Here it is.

42
00:03:12,030 --> 00:03:17,590
And we're going to find where we designate the name inside the TV right here.

43
00:03:17,970 --> 00:03:23,610
So essentially the name property I now want to show this Google Map component that we just created.

44
00:03:23,610 --> 00:03:31,410
So at the top we will import in our Google map from the components directory

45
00:03:34,620 --> 00:03:37,870
and then inside of the TV right here rather than showing the name.

46
00:03:37,920 --> 00:03:42,670
I want to show my Google Map component that I just created.

47
00:03:42,780 --> 00:03:50,040
Now as I just mentioned we have to pass in the longitude and latitude into that component again the

48
00:03:50,040 --> 00:03:55,800
city data object that we got back from the weather API will provide that longitude and latitude for

49
00:03:55,800 --> 00:03:56,530
us.

50
00:03:56,700 --> 00:04:05,080
So we can get a reference to both of them by saying Konst lawn city data City Howard lawn.

51
00:04:05,340 --> 00:04:10,590
So again this is where that Laune property is coming from why I'm calling it lawn here instead of just

52
00:04:10,590 --> 00:04:13,420
longitude or LNG as Google Maps expects.

53
00:04:13,530 --> 00:04:23,970
It's kind of like a mismatch in property names and we can also say Konst let City Data city cord and

54
00:04:23,970 --> 00:04:31,680
latitude like so now you'll notice that we have duplicated a lot of accessing properties in here.

55
00:04:31,680 --> 00:04:38,070
So in two cases we've got city data does City d'accord we can use a little bit of ESX syntax here to

56
00:04:38,070 --> 00:04:41,980
use some destructuring to condense this down to a single line of code.

57
00:04:42,330 --> 00:04:47,100
So I'm going to delete the second instance or the second line here and then I'll change this initial

58
00:04:47,100 --> 00:04:50,790
line to have a set of curly braces.

59
00:04:51,260 --> 00:04:53,470
What add in lawn and Latt right here.

60
00:04:53,520 --> 00:04:56,810
And I'm going to remove the last line at the end.

61
00:04:57,090 --> 00:05:04,260
So this line right here essentially says find the chord object grab the elsewhen in LA properties off

62
00:05:04,260 --> 00:05:11,070
of it and assign them to two new variables called L-O and in L.A. so we can now make free access to

63
00:05:11,160 --> 00:05:14,280
law and laugh throughout the rest of this function right here.

64
00:05:14,460 --> 00:05:18,400
So we'll pass them both as properties to our Google map object.

65
00:05:18,740 --> 00:05:26,030
I'll say Lon and let like so cool.

66
00:05:26,190 --> 00:05:28,930
Now I think we're about ready to give us a shot in a browser.

67
00:05:28,950 --> 00:05:32,510
There's just one more very small thing that we have to do.

68
00:05:32,790 --> 00:05:38,130
By default the Google map that will get rendered does not have any height or with.

69
00:05:38,220 --> 00:05:45,690
So the Google maps maps API makes no assumptions whatsoever about the size of the map that you're trying

70
00:05:45,690 --> 00:05:47,370
to render on the screen.

71
00:05:47,370 --> 00:05:51,910
So we're going to add in a little bit of CSSA to size the map appropriately.

72
00:05:51,960 --> 00:05:55,730
I'm going to open back up the style that CSSA file that we were just working on.

73
00:05:55,980 --> 00:05:58,660
And I am going to add in a quick little rule here.

74
00:05:58,680 --> 00:06:09,250
We're going to say T.T. first of type and TV First of type div..

75
00:06:09,600 --> 00:06:15,160
We're going to give it a height of 200 pixels and a width of 250 pixels.

76
00:06:15,330 --> 00:06:23,220
So it says find the first CD inside of each row and also find the first CD and it's child div which

77
00:06:23,220 --> 00:06:29,230
is going to be the Google map and give it a height of 200 pixels and the width of 250.

78
00:06:29,280 --> 00:06:31,490
So let's now give us a shout out in the browser.

79
00:06:31,600 --> 00:06:33,040
I'm going to come back over.

80
00:06:33,360 --> 00:06:38,620
We will refresh the page and let's look up Sacramento.

81
00:06:39,240 --> 00:06:39,860
All right.

82
00:06:39,880 --> 00:06:46,890
Hot dog there is our map we can look up new York Seattle and so on.

83
00:06:46,890 --> 00:06:47,340
Perfect.

84
00:06:47,340 --> 00:06:52,350
So we've got this nice Google map in here and we can freely scroll around on it or we can zoom out if

85
00:06:52,350 --> 00:06:55,860
we so chose it just kind of gives our user the idea of OK.

86
00:06:55,860 --> 00:07:00,980
Yup this is the weather for this very particular location that I was expecting.

87
00:07:00,990 --> 00:07:04,120
In addition we can flip over to satellite view just fine.

88
00:07:04,170 --> 00:07:08,950
So it shows what kind of good stuff that you would usually expect out of a Google map.

89
00:07:09,750 --> 00:07:10,220
OK.

90
00:07:10,260 --> 00:07:12,530
This looks like an awesome application.

91
00:07:12,570 --> 00:07:15,180
Let's do a little bit of wrap up in the next section