1
00:00:02,070 --> 00:00:07,560
So let's start by making sure that we can not just get the coordinates for an address but also the address

2
00:00:07,560 --> 00:00:09,660
for coordinates we might enter

3
00:00:09,660 --> 00:00:12,490
so that we store both coordinates and the address

4
00:00:12,510 --> 00:00:19,450
because I want to have both for then displaying this to the user when we have this shareable link. So in

5
00:00:19,500 --> 00:00:23,790
location utility file here, we can add another function

6
00:00:23,880 --> 00:00:27,490
either in front or below the other function, doesn't matter,

7
00:00:27,580 --> 00:00:35,750
another async function which I'll also export which I'll name get address for or from coords,

8
00:00:35,760 --> 00:00:37,670
so basically the opposite. Here

9
00:00:37,680 --> 00:00:43,530
I expect to get some coordinates, an object with a latitude and longitude or a lat and lng key

10
00:00:43,530 --> 00:00:50,090
and then we will use the same Google API to get the address because this Google API works in both directions.

11
00:00:50,160 --> 00:00:55,980
We can also do a reverse look up and pass in coordinates and get back an address and that's exactly

12
00:00:55,980 --> 00:00:57,390
what I want to do here.

13
00:00:57,600 --> 00:00:59,920
So we can copy this link here actually

14
00:01:00,210 --> 00:01:07,450
and then in here just set up a fetch request, again with a template literal so that we can conveniently

15
00:01:07,450 --> 00:01:15,100
inject information into this string and we need to replace your API key here with the Google API key

16
00:01:15,100 --> 00:01:22,120
constant we created and then the latitude here up to the comma, excluding the comma with something and

17
00:01:22,120 --> 00:01:26,110
the longitude after the comma up to the key here.

18
00:01:26,170 --> 00:01:32,080
Now for the latitude, I want to enter coords.lat, coords should be an object with a lat property

19
00:01:32,560 --> 00:01:38,920
and coords.lng so that we forward this information into the string and set up a correct 

20
00:01:38,920 --> 00:01:39,980
URL.

21
00:01:40,040 --> 00:01:47,260
Since we use async, we can again await this and store our response here and now I'll just copy this check

22
00:01:47,320 --> 00:01:55,460
I'm performing down there because I need the same check here and that should be response and here I'll

23
00:01:55,470 --> 00:02:01,890
just say failed to fetch address and therefore after these if checks, I know that this worked and we should

24
00:02:01,890 --> 00:02:02,980
have an address.

25
00:02:03,210 --> 00:02:05,070
Now how do we get the address?

26
00:02:05,160 --> 00:02:10,590
If we have a look at this example response, we see it's an object, again with a results key which is an array

27
00:02:10,830 --> 00:02:17,720
and the first element in the array has this formatted address field which is exactly what I need. So here,

28
00:02:18,380 --> 00:02:30,010
we can get the address by accessing data.results, the first result, .formatted_address

29
00:02:30,400 --> 00:02:35,890
and that's then what I will return here and simple use async await, this is in the end what is invisibly

30
00:02:35,890 --> 00:02:38,640
created promise will resolve to.

31
00:02:38,650 --> 00:02:46,550
So now we can call get address from coords in share place here when we locate the user. So here before

32
00:02:46,550 --> 00:02:56,250
I call select place, I will get the address here by awaiting and for that to work, we need to add async

33
00:02:56,250 --> 00:03:05,560
in front of locate user handler, so by awaiting the call to get address from coords which we need to

34
00:03:05,560 --> 00:03:12,760
import from the location file so that down there, we can call get address from coords and forward the

35
00:03:12,760 --> 00:03:19,240
coordinates object we are constructing here and I actually only want to hide my modal after that is

36
00:03:19,240 --> 00:03:26,860
done as well. So now I got the address here as well and now I will forward the address here to select place,

37
00:03:27,370 --> 00:03:33,340
also in our other method, in the find address handler, select place should here not only get the coordinates

38
00:03:33,370 --> 00:03:39,910
but also the address which we have here as well, here the user entered it and I'm doing this so that

39
00:03:39,910 --> 00:03:46,180
select place now accepts both arguments here and we can now set up a shareable link which will lead

40
00:03:46,180 --> 00:03:52,650
us to that second HTML file in the end, where we display the address and the map with the coordinates.

41
00:03:52,720 --> 00:03:59,860
So now here, let's work on select place. In select place, I don't just want to render the map but also

42
00:03:59,860 --> 00:04:06,790
create this shareable link and output the shareable link here in this input so that when we click the

43
00:04:06,790 --> 00:04:10,510
share place button, we do actually copy it into the clipboard.

44
00:04:10,600 --> 00:04:16,360
So with that, let's go back to the SharePlace.js file and in there, let's get access to the share button,

45
00:04:16,540 --> 00:04:17,910
that's the first step.

46
00:04:18,040 --> 00:04:23,950
So here I need the share button and I can now get access to it with document and then this share button

47
00:04:23,950 --> 00:04:31,510
does have an ID, share button so we can get access with document get element by ID share button here,

48
00:04:31,630 --> 00:04:32,820
just like this.

49
00:04:32,870 --> 00:04:38,620
Now actually, I want to set this up in the constructor though where we also get access to the other

50
00:04:38,740 --> 00:04:46,270
buttons and so on but I will store it in a property, not in a constant, still here I want to add a listener,

51
00:04:46,360 --> 00:04:50,650
an event listener, a click listener and we'll hook this up to a method in a second.

52
00:04:50,650 --> 00:04:56,260
So for now we just get access to the share button here, we can then use this in select place because initially

53
00:04:56,260 --> 00:05:02,710
this button should be disabled and it is because I set the disabled attribute here. So in SharePlace.js

54
00:05:02,730 --> 00:05:10,810
now that we got an address, I will set this share button disabled to false to enable it, so to set

55
00:05:10,810 --> 00:05:18,570
this disabled property to false. Now I want to get access to that share link input so to this input element

56
00:05:18,570 --> 00:05:19,640
here next to the button

57
00:05:19,740 --> 00:05:26,070
and this has an ID of share link so we can select it by this ID, by using document get element by

58
00:05:26,070 --> 00:05:36,930
ID, share link and on this share link input element here, maybe name it element at the end,

59
00:05:37,030 --> 00:05:41,140
I want to set the value to a link which I now want to construct.

60
00:05:41,380 --> 00:05:46,390
I'll do this as a template literal so that we can build this in a more powerful way, in an easier way

61
00:05:46,390 --> 00:05:49,530
which makes it easy to build a string with dynamic values

62
00:05:49,720 --> 00:05:56,410
and there I want to start with the current server address and we can get this by accessing the location

63
00:05:56,410 --> 00:06:00,070
object you learned about earlier in the course and there, the origin property,

64
00:06:00,070 --> 00:06:02,590
this gives us our current domain,

65
00:06:02,590 --> 00:06:08,520
so in our case here localhost:8080. Thereafter I want to add a slash

66
00:06:08,780 --> 00:06:12,280
and then for example my-place and this can't be anything,

67
00:06:12,290 --> 00:06:17,000
this should be the name of the subfolder so that in the end when we then later visit this link, we load

68
00:06:17,000 --> 00:06:23,240
that index.html file in that sub folder, so my-place and then add a so-called query parameter

69
00:06:23,240 --> 00:06:24,550
with a question mark,

70
00:06:24,560 --> 00:06:29,930
so that's basically some extra data we can add in the URL which we then can read from that

71
00:06:29,930 --> 00:06:33,380
URL in that other page we'll be loading later

72
00:06:33,380 --> 00:06:36,780
and there I want to set an address key equal to

73
00:06:37,030 --> 00:06:39,670
and now basically set this to the address I'm getting here

74
00:06:39,680 --> 00:06:45,030
but again encoded to work in a URL which we can do dynamically with encodeURI

75
00:06:45,050 --> 00:06:49,340
as you learned, URI

76
00:06:49,340 --> 00:06:56,300
capital R and I, pass in the address here and then after this add an ampersand symbol to add another

77
00:06:56,330 --> 00:07:04,490
optional query parameter to the URL which should be lat which I set equal to coordinates.lat

78
00:07:04,880 --> 00:07:12,040
and then again &lng set equal to coordinates.lng.

79
00:07:12,430 --> 00:07:18,430
So with that, I basically encode all that data into this URL which I construct here.

80
00:07:18,520 --> 00:07:24,250
Now with that, let's save that and see it in action and I'm getting an error that I can't use await

81
00:07:24,340 --> 00:07:26,900
outside of an async function,

82
00:07:26,950 --> 00:07:28,810
so where are we using await?

83
00:07:28,810 --> 00:07:35,860
Well my bad, of course locate user handler, that being marked as async doesn't help us because await

84
00:07:35,890 --> 00:07:40,690
is not directly part of locate user handler, it's part of this anonymous function,

85
00:07:40,690 --> 00:07:45,490
so this anonymous function needs to be marked as async. I think that's a good mistake to happen actually

86
00:07:45,490 --> 00:07:50,350
because it makes it really clear that the direct function in which you want to use await needs to

87
00:07:50,350 --> 00:07:53,030
be marked with async, not some other function around it,

88
00:07:53,110 --> 00:07:55,240
the function in which you directly use it,

89
00:07:55,300 --> 00:08:00,150
so this function here needs the async keyword for await to work in it.

90
00:08:00,160 --> 00:08:05,830
So now with that if we save that, I get an error regarding the event listener, that makes sense,

91
00:08:05,840 --> 00:08:11,680
let's comment it out for the moment here in the constructor of place finder and now with that if we save

92
00:08:11,680 --> 00:08:20,860
that, if I get my location for example, you see now this URL is constructed here and we can click

93
00:08:20,860 --> 00:08:25,450
share place which for the moment won't do anything because that's the next thing, I want to make sure

94
00:08:25,450 --> 00:08:28,870
that when we click share place, we copy this link into the clipboard.