1
00:00:02,210 --> 00:00:07,670
So let's make sure we can display a map as well. For that I got this area up here, there I want to render

2
00:00:07,700 --> 00:00:08,210
the map

3
00:00:08,210 --> 00:00:14,420
once we got the user location and for that, I will use Google Maps. Now to use Google Maps, you can just

4
00:00:14,420 --> 00:00:23,840
google for Google Maps SDK and you should find various results and at some point, the Google Maps platform

5
00:00:23,840 --> 00:00:29,360
here which we can get started with. On this page you'll see an overview of the different things Google

6
00:00:29,360 --> 00:00:35,120
Maps offers to you and there, the Javascript API is interesting to us. So we can click on Javascript

7
00:00:35,420 --> 00:00:40,790
API here and here you can learn way more about this library which you in the end have here which you

8
00:00:40,790 --> 00:00:45,830
can integrate into your project and I can only recommend diving into this documentation if you want

9
00:00:45,830 --> 00:00:51,080
to deeply dive into Google Maps and what you can do with it in Javascript, there is a bunch you can do

10
00:00:51,080 --> 00:00:56,390
with it because in the end, Google Maps, the web page which you can visit is built with that you can

11
00:00:56,390 --> 00:01:03,680
say. We'll build a basic map though and for that, we can add this import here which you'll find in this

12
00:01:03,680 --> 00:01:04,960
snippet to our project,

13
00:01:04,970 --> 00:01:06,340
well we cannot do that,

14
00:01:06,340 --> 00:01:07,790
we have to do that.

15
00:01:07,940 --> 00:01:11,230
So you can copy that and then go back to your code

16
00:01:11,330 --> 00:01:16,580
and here in the index.html file above our Javascript file, you can add this import.

17
00:01:17,210 --> 00:01:25,190
Now please note that this import has this your API key thing here and it has this callback thing,

18
00:01:25,190 --> 00:01:27,500
you can remove the callback thing here right away,

19
00:01:27,500 --> 00:01:31,460
this would allow you to execute a Javascript function right away once this is loaded,

20
00:01:31,460 --> 00:01:36,520
something I don't want to do here but we have to add something for the your API key thing,

21
00:01:36,800 --> 00:01:39,600
we see it's also highlighted here in this example.

22
00:01:39,680 --> 00:01:47,510
Now to use Google Maps, you need a Google account and you need to set up a project with Google.

23
00:01:47,510 --> 00:01:52,200
Now, that is generally free to use but you can learn more on the pricing page.

24
00:01:52,400 --> 00:01:55,970
You have to have an account and you need a credit card unfortunately

25
00:01:56,030 --> 00:02:00,550
but the first $200 of usage you have in every month is free

26
00:02:00,890 --> 00:02:02,280
and $200,

27
00:02:02,300 --> 00:02:05,210
that's a lot of usage.

28
00:02:05,330 --> 00:02:10,280
Now you can dive into here and you can learn what you can do with Google Maps for $200 and what everything

29
00:02:10,280 --> 00:02:15,170
costs and it's really not expensive, so with $200 you can do a lot and you can certainly

30
00:02:15,170 --> 00:02:18,510
do what we do here in this project without paying anything

31
00:02:18,590 --> 00:02:20,690
but you need a Google account with a credit card

32
00:02:20,690 --> 00:02:23,270
unfortunately, there is no way around that.

33
00:02:23,300 --> 00:02:28,160
So make sure you sign in with your Google account or create one if you don't have one already

34
00:02:28,160 --> 00:02:33,770
and once you did log in, you can click on get started here and you should get this overlay here.

35
00:02:33,800 --> 00:02:36,860
Now there, pick maps and also already pick places,

36
00:02:36,860 --> 00:02:37,690
we'll need that later.

37
00:02:37,700 --> 00:02:43,040
So check these two boxes and click on continue and then select a project and there you can simply

38
00:02:43,040 --> 00:02:50,000
create a new one by clicking on create a new project and I'll name this js complete my places, you can

39
00:02:50,000 --> 00:02:52,970
pick any name you want here in the end. Click on next

40
00:02:52,970 --> 00:03:01,530
and now this will take a while, so let's wait for that to finish and you should be forwarded to the Google

41
00:03:01,530 --> 00:03:04,260
Cloud Maps platform.

42
00:03:04,260 --> 00:03:07,020
Now here confirm that for this account you want to set up billing,

43
00:03:07,020 --> 00:03:11,940
now again you've got these $200 of free usage so you will not actually have to pay something

44
00:03:12,120 --> 00:03:14,110
for the amount of usage we have here in this app

45
00:03:14,190 --> 00:03:19,020
but you need to confirm that you want to be able to pay at least

46
00:03:19,250 --> 00:03:26,280
and with that, you can click on next here and now wait for that to finish.

47
00:03:26,390 --> 00:03:29,220
We see the same kind of overlay we build here in the end by the way

48
00:03:29,360 --> 00:03:30,800
and then you get this API key.

49
00:03:30,950 --> 00:03:35,270
Now the one you see here will be invalid by the point of time you're watching this,

50
00:03:35,270 --> 00:03:36,820
so definitely use your own one,

51
00:03:36,860 --> 00:03:38,320
you can't use mine.

52
00:03:38,510 --> 00:03:44,300
Use this key however and plug it in here where you saw your API key, so that in the end here you have

53
00:03:44,300 --> 00:03:46,110
key equals

54
00:03:46,190 --> 00:03:53,570
and then that key here which you find in this box. With that key added here, we're importing the Google

55
00:03:53,570 --> 00:03:56,680
Maps Javascript SDK and we can use it.

56
00:03:56,690 --> 00:04:03,230
So now to use it, we need to render a map here in this area here, in the map

57
00:04:03,320 --> 00:04:09,680
div here in index.html and for that, I'll again create a new class and new file in the UI folder which

58
00:04:09,680 --> 00:04:11,090
I'll name map.js

59
00:04:11,260 --> 00:04:18,940
and in there I want to create a class, map, which will be responsible for rendering our map. Now in this

60
00:04:18,940 --> 00:04:24,540
class, we can add a constructor because what do we need to render a map and a place on it?

61
00:04:24,550 --> 00:04:27,010
We need the coordinates of that place.

62
00:04:27,040 --> 00:04:34,450
So here I'll expect to get the coordinates and then I want to render the map on the screen based on

63
00:04:34,450 --> 00:04:35,750
these coordinates.

64
00:04:35,860 --> 00:04:43,750
So I'll add a render method here in the map class and I want to call this render here once the map is

65
00:04:43,750 --> 00:04:50,250
created, once this class is instantiated and before we call render however, I will store my coords in

66
00:04:50,250 --> 00:04:57,580
a coordinates property of this class instance and inside of render, we now want to use the Google Maps

67
00:04:57,610 --> 00:05:01,030
Javascript SDK to display a map on the screen.

68
00:05:01,030 --> 00:05:05,590
Now again, the official documentation which I showed you earlier is a great place to learn all about

69
00:05:05,590 --> 00:05:05,910
that,

70
00:05:05,980 --> 00:05:11,380
here we will display a basic map. For this, I'll first of all check if we don't have access to a global

71
00:05:11,440 --> 00:05:13,180
Google variable,

72
00:05:13,180 --> 00:05:18,440
this is a global variable which is added by the Google Maps Javascript SDK we're importing here,

73
00:05:18,580 --> 00:05:24,190
so we should have access to it everywhere in all the scripts that come after this import here in

74
00:05:24,190 --> 00:05:24,910
our project.

75
00:05:24,910 --> 00:05:28,490
So in this script we should have access to this variable, if we don't have access,

76
00:05:28,490 --> 00:05:33,430
I'll throw an alert, could not load maps library

77
00:05:33,430 --> 00:05:39,150
please try again later, to tell the user that something went wrong and at the moment we can't render

78
00:05:39,150 --> 00:05:44,590
the map, thereafter I will return so that the lines after this if statement don't execute.

79
00:05:44,590 --> 00:05:50,320
If we make it past this if statement however, we know Google Maps was loaded correctly and we can start

80
00:05:50,470 --> 00:05:55,480
working on a map and working on a map is really simple,

81
00:05:55,480 --> 00:06:06,650
all we got to do here is we call new, Google so using this global Google variable, .maps.map,

82
00:06:06,700 --> 00:06:12,160
so in the end here we get a class or a constructor function provided by the Google Maps package which

83
00:06:12,160 --> 00:06:14,020
we instantiate. Now

84
00:06:14,050 --> 00:06:21,430
to this map constructor here, we have to pass the element, the DOM element in which we want to render the

85
00:06:21,430 --> 00:06:21,800
map,

86
00:06:21,880 --> 00:06:29,080
in my case that is this div here with the ID map. So we can select this div by its ID of course and

87
00:06:29,080 --> 00:06:33,880
pass a reference to this div to this map constructor here.

88
00:06:33,970 --> 00:06:40,630
So for that, we can use document get element by ID map here with a lowercase m and forward that

89
00:06:40,780 --> 00:06:46,750
to the map constructor by the Google Maps package. You can also pass in a second argument where you

90
00:06:46,750 --> 00:06:53,410
can configure the map, for example on which place it should be zoomed in at the beginning and there my

91
00:06:53,410 --> 00:06:59,860
center, you can set a center property here and this object should be my coordinates because this center

92
00:06:59,860 --> 00:07:06,220
property and you learned all about that in the official docs expects an object with a lat and a long

93
00:07:06,220 --> 00:07:11,410
key and that's exactly what I want to pass into my constructor here later so that we can use that here.

94
00:07:12,020 --> 00:07:17,800
We can also set a zoom property here in this configuration object and set this to 16 to be zoomed in

95
00:07:17,800 --> 00:07:27,830
a bit on this map we render. Now I will store this map here in a constant, map, and I also want to add

96
00:07:27,830 --> 00:07:29,190
a marker to it,

97
00:07:29,270 --> 00:07:37,580
so a pin which we place on the map. We can do this with new google.maps.marker, so instantiating this

98
00:07:37,820 --> 00:07:42,810
constructor function here which is also provided by the Google Maps package and to that, you pass in an

99
00:07:42,860 --> 00:07:47,950
object where you configure where to place that marker and how it should look like and again in the

100
00:07:47,960 --> 00:07:54,320
official documentation, you learned way more about how you can configure such a marker in detail, you find

101
00:07:54,320 --> 00:07:59,300
a link to that attached to this lecture by the way and here I'll just set the position to this coordinates

102
00:07:59,300 --> 00:08:05,990
again, to place the marker right in the center of the map and then we have to also tell Google Maps on

103
00:08:05,990 --> 00:08:11,840
which map this marker should be placed because it's not natural that this should be this map, this marker

104
00:08:11,840 --> 00:08:14,990
is created totally standalone from this map,

105
00:08:15,170 --> 00:08:21,350
so we have to add a map property in the marker configuration and point at this map constant here

106
00:08:21,380 --> 00:08:26,760
so that we tell Google Maps that this marker should be placed in this map.

107
00:08:26,840 --> 00:08:29,770
And with that, we should have everything we need here,

108
00:08:29,780 --> 00:08:36,850
we can now create this class here, instantiate it and hopefully render a map on the screen.

109
00:08:37,130 --> 00:08:42,320
So for that we just need to export this class and then we can import it in share

110
00:08:42,320 --> 00:08:43,900
place of course

111
00:08:43,910 --> 00:08:49,580
and here in share place, I'll add a new method, maybe here below the constructor, doesn't really matter

112
00:08:49,580 --> 00:08:59,810
though and I'll call it select place and I expect to get my coordinates here as an argument and in here,

113
00:08:59,810 --> 00:09:07,910
I then want to render my map. Sso we can import map from ./ui/map,

114
00:09:07,910 --> 00:09:16,730
so from this map file we just worked in and then here, I want to create a new map and forward my coordinates

115
00:09:16,880 --> 00:09:21,440
and this should be an object with a lat and a long key which I actually create down there,

116
00:09:21,440 --> 00:09:22,870
so we get exactly what we need.

117
00:09:24,670 --> 00:09:32,130
So we forward this here and I now want to store this map which we create, this map instance however, in

118
00:09:32,190 --> 00:09:39,000
a property named map in the place finder and I'm doing that so that when we call select place, we can

119
00:09:39,000 --> 00:09:46,320
check if we already got a map in which case I actually want to reuse that current map or if we don't,

120
00:09:46,320 --> 00:09:48,230
so if we already have a map,

121
00:09:48,330 --> 00:09:51,810
then I actually want to call this map render,

122
00:09:51,810 --> 00:09:55,110
so this method we have in there and only create a new map

123
00:09:55,110 --> 00:10:00,660
if we didn't create one in the past so that if we get the user location twice in a row, we don't create

124
00:10:00,660 --> 00:10:07,200
a brand new map object all the time but instead we reuse the existing one and just render a new Google

125
00:10:07,200 --> 00:10:08,040
map on it

126
00:10:08,040 --> 00:10:13,110
so to say. For that we just have to make sure that the render method in the map is a bit more flexible

127
00:10:13,110 --> 00:10:21,180
and we can forward the coordinates to it directly, so that in our map here, in map.js, when we call

128
00:10:21,180 --> 00:10:28,140
render, we expect to get the coordinates here as an input and we therefore forward coords here to

129
00:10:28,140 --> 00:10:32,970
the render method instead of storing it in a property which we don't need now so that we can call it

130
00:10:32,970 --> 00:10:36,730
from both in the constructor and from outside of the class

131
00:10:36,810 --> 00:10:41,470
and then here, we use coordinates instead of these coordinates, also down there

132
00:10:41,520 --> 00:10:47,130
and this allows us to create a new Google map, either in an already existing instance of our map class

133
00:10:47,130 --> 00:10:49,240
here or in a brand new instance.

134
00:10:49,410 --> 00:10:55,410
If you wanted to, you could also dive into Google Maps Javascript SDK documentation to find out how you

135
00:10:55,410 --> 00:11:00,720
can use an existing map which you might already have, an existing Google Map which you can store it in

136
00:11:00,720 --> 00:11:07,400
a property of the map class as well of course and just zoom to a new location if you wanted to do that.

137
00:11:07,470 --> 00:11:09,400
This is also something you could do,

138
00:11:09,390 --> 00:11:13,860
it's not something I'll do here though because I don't want to primarily focus on Google Maps but on

139
00:11:13,860 --> 00:11:17,650
Javascript in general, so I'm fine with just creating a new Google map here,

140
00:11:17,760 --> 00:11:22,830
the old one will be dropped from memory anyways as soon as we don't need it anymore.

141
00:11:22,840 --> 00:11:29,020
So with that, back to SharePlace.js, we render our map in the end here with the help of the coordinates

142
00:11:29,020 --> 00:11:29,920
we got

143
00:11:29,920 --> 00:11:35,120
and now we just need to call select place from inside our success result method,

144
00:11:35,140 --> 00:11:41,160
so instead of console logging the coordinates, we can call select place and forward the coordinates.

145
00:11:41,530 --> 00:11:46,630
And with all that work, if we save that and we go back to our application, we should be able to click

146
00:11:46,630 --> 00:11:54,690
on get current location and it spins, once it's done spinning, it should actually render this but I'm

147
00:11:54,690 --> 00:11:57,720
getting an error, this select place is not a function

148
00:11:57,720 --> 00:12:05,520
and do you know what could be the issue here? Well the issue is that we're using the this keyword here,

149
00:12:05,520 --> 00:12:05,840
right and

150
00:12:05,850 --> 00:12:07,360
we do this in the end in

151
00:12:07,380 --> 00:12:08,790
locate user handler,

152
00:12:08,910 --> 00:12:12,330
we do it here in this anonymous function but I'm using an arrow function here,

153
00:12:12,360 --> 00:12:17,760
so this inside of the arrow function as you learned has the same context as outside of it, outside of

154
00:12:17,760 --> 00:12:20,570
the arrow function means inside of this method

155
00:12:20,570 --> 00:12:27,570
and what does this refer to inside of the locate user handler? For that we need to analyze how locate

156
00:12:27,570 --> 00:12:32,700
user handler is called and it is called here when we click on this button,

157
00:12:32,730 --> 00:12:38,700
so it's called upon this event and you learned about this earlier in the course. When we have an event

158
00:12:38,700 --> 00:12:45,900
listener that calls a method, this inside of this method or function does not refer to the surrounding

159
00:12:45,900 --> 00:12:46,750
context here,

160
00:12:46,770 --> 00:12:54,600
instead this refers to the target of the event. To change this, we need to call bind here and bind this

161
00:12:54,690 --> 00:12:57,420
inside of locate user handler to this,

162
00:12:57,420 --> 00:13:04,740
so to the this keyword in this line here which means this as it is defined in the constructor which

163
00:13:04,740 --> 00:13:07,940
indeed is our class and the instance based on it.

164
00:13:08,010 --> 00:13:15,300
So with bind this, we ensure that the this keyword inside of local user handler refers to the class instance

165
00:13:15,570 --> 00:13:22,110
and not to some DOM element which triggered this event. We'll by the way later need the same for submitting

166
00:13:22,110 --> 00:13:29,880
this form so we can already bind this as well and now with that if we save that and we again click on

167
00:13:29,880 --> 00:13:36,510
get current location, it loaded super fast and it renders something on the screen, zoomed in quite a bit

168
00:13:36,540 --> 00:13:41,520
because I'm in the middle of nowhere as it seems like, if I get a new location, I'm even in the ocean

169
00:13:41,520 --> 00:13:47,790
here and that's of course because I randomize my location, you should really get the pin in the location

170
00:13:47,910 --> 00:13:49,990
where you're at.

171
00:13:50,010 --> 00:13:55,920
So this works however, that's the main takeaway, we can render our map here, that is working we can render

172
00:13:55,980 --> 00:14:04,320
our Google map here which we can display and therefore we got that working in exactly the way it should

173
00:14:04,320 --> 00:14:11,700
work. And with that out of the way, let's now make sure we can also enter an address here, a street name and

174
00:14:11,700 --> 00:14:14,920
find that address and display it on the map as well.