1 00:00:02,130 --> 00:00:06,080 So let's make sure that when we visit this my-place index.html file, 2 00:00:06,090 --> 00:00:12,180 we do actually render the address here in the header, in the h1 tag and we do render the map. For 3 00:00:12,180 --> 00:00:19,200 that, we can use the my-place Javascript file which is the file loaded in that index.html file and in here, 4 00:00:20,260 --> 00:00:29,160 I will create a new class, place or maybe loaded place or how you want to name it and there in the constructor, 5 00:00:29,200 --> 00:00:34,160 I expect to get the coordinates and the address, 6 00:00:34,270 --> 00:00:40,060 so the two pieces of information we can get from the URL in the end because keep in mind that this 7 00:00:40,060 --> 00:00:47,590 link which is generated has the address encoded in the URL and it has these coordinates encoded in 8 00:00:47,590 --> 00:00:55,690 the URL. Now in there, I then want to build a new map, so we can import map from the UI folder from 9 00:00:55,690 --> 00:01:03,040 the map file there and build a new map here by forwarding coordinates. 10 00:01:03,040 --> 00:01:05,860 I also want to output the address in my header, 11 00:01:05,860 --> 00:01:13,790 so for that we can access the header title and store it in a constant with document query selector header 12 00:01:13,790 --> 00:01:14,290 h1, 13 00:01:14,300 --> 00:01:20,620 this is a CSS selector which selects the first h1 element in the first header element on the page 14 00:01:20,630 --> 00:01:27,640 and here I got exactly one header element with one h1 element so of course we'll select this one. And 15 00:01:27,660 --> 00:01:31,250 now here in the header title element 16 00:01:31,260 --> 00:01:37,530 if you want to call it like this, header title el, I'll set text content, so I'll set the text node in there 17 00:01:37,760 --> 00:01:45,030 equal to the address we're getting. Now after this, we can instantiate this and we have to parse some 18 00:01:45,030 --> 00:01:51,080 data from the URL, so we'll call new place, new loaded place and I'll need to forward coordinates an address 19 00:01:51,090 --> 00:01:56,430 and that is part of the URL and needs to be parsed. For that again, Javascript and the browser got 20 00:01:56,430 --> 00:01:57,120 us covered, 21 00:01:57,120 --> 00:01:59,580 we haven't used it before but we'll use it now. 22 00:01:59,790 --> 00:02:05,610 There is a built-in URL constructor function or class, however you want to call it, so you can 23 00:02:05,610 --> 00:02:11,700 create a new object with new. To that, you can pass a URL and I want to pass the current URL which 24 00:02:11,730 --> 00:02:15,110 as you learned earlier is stored in location.ref, 25 00:02:15,150 --> 00:02:21,210 this is the current location, the current URL which is loaded in the browser and pass this to this 26 00:02:21,210 --> 00:02:22,010 built-in 27 00:02:22,050 --> 00:02:28,530 URL constructor function and it creates an object with options for us to get information out 28 00:02:28,530 --> 00:02:28,830 of that 29 00:02:28,830 --> 00:02:29,400 URL, 30 00:02:29,430 --> 00:02:33,730 that's what this URL utility class provided by the browser does. 31 00:02:34,290 --> 00:02:40,560 So I'll store it in a constant here and now we can get our query parameters as it's called, stored in a query 32 00:02:40,590 --> 00:02:45,170 params constant maybe by accessing url.searchParams, 33 00:02:45,180 --> 00:02:49,410 this is simply provided by this built-in object here, by this built-in class. 34 00:02:49,410 --> 00:02:51,320 So this will be our dynamic 35 00:02:52,460 --> 00:02:53,130 options here, 36 00:02:53,210 --> 00:02:58,130 so the thing after the question mark basically, stored as key-value pairs in query params 37 00:02:58,130 --> 00:03:03,440 now, thanks to search params, so stored as key-value pairs in search params so to say. And then we can 38 00:03:03,440 --> 00:03:04,790 get our coords here, 39 00:03:04,790 --> 00:03:12,320 create a new object where we have a lat key which is query params and there we have a get method and 40 00:03:12,320 --> 00:03:14,670 then get the lat argument, 41 00:03:14,690 --> 00:03:20,850 so with that we're saying hey, I want to get the value which is stored for this lat identifier in my URL 42 00:03:21,080 --> 00:03:23,540 which is this number here in the end 43 00:03:23,540 --> 00:03:28,490 and of course I'll repeat the same for the longitude. So I'll add a longitude here and get it from 44 00:03:28,490 --> 00:03:34,470 query params, get lng. Now important, what's retrieved here will always be a string, 45 00:03:34,490 --> 00:03:41,750 however I need a number here and we can convert it to a number by adding a plus or by using parse float 46 00:03:41,780 --> 00:03:44,090 of course, that also works, you can do both, 47 00:03:44,160 --> 00:03:46,390 so I'll do both here to show you both. 48 00:03:46,700 --> 00:03:52,550 So we get the coordinates, for the address, I will store that in a constant and get it from query 49 00:03:52,550 --> 00:04:00,080 params and there, get address and what you get here of course have to be the keys you find in your 50 00:04:00,080 --> 00:04:05,630 URL, so here I am getting the value for the address key, so the value after this equal sign which 51 00:04:05,630 --> 00:04:12,020 is this address here in the end and this is then retrieved and automatically parsed to a human readable 52 00:04:12,020 --> 00:04:12,550 format, 53 00:04:12,560 --> 00:04:19,040 so from that URI optimized format to a human readable one and then we can forward both here to 54 00:04:19,050 --> 00:04:26,600 loaded place to this constructor. With that if we now save that and we reload this page, I get an error 55 00:04:26,600 --> 00:04:32,240 that Google is not defined which makes sense because I'm using the map in here and for that of course, 56 00:04:32,330 --> 00:04:36,320 I use the Google Maps API, 57 00:04:36,320 --> 00:04:42,140 now that's imported in our root index.html file with this script import but not imported in our 58 00:04:42,140 --> 00:04:48,500 my-place index.html file so of course we should add that import before we add our own script here 59 00:04:48,620 --> 00:04:49,100 too. 60 00:04:49,310 --> 00:04:54,880 So let's add the Google Maps Javascript SDK import with our API key entered here in the index.html 61 00:04:54,870 --> 00:05:00,560 file in my place folder so that we do have access to the Google Maps API in all the scripts that 62 00:05:00,560 --> 00:05:05,830 belong to this file as well. With that if we now reload this, 63 00:05:05,860 --> 00:05:12,370 this still fails. Reason for that is here, we've got async on the Google Maps import and 64 00:05:12,580 --> 00:05:20,120 we actually should remove that. It can result to the Google Maps script loading too late and then our 65 00:05:20,120 --> 00:05:24,830 script might execute before Google Maps was loaded, so let's remove that so that we only have defer 66 00:05:24,830 --> 00:05:29,930 and they are executed in order and therefore now this works and here you see that location which is 67 00:05:29,930 --> 00:05:37,700 shared is loaded here and if I share the 6th Avenue, find that place, click on share place here, got 68 00:05:37,700 --> 00:05:43,300 the link, enter that link here, we got that here. 69 00:05:43,340 --> 00:05:49,190 So this is now working and I mistyped here but this is now working and this is our finished application here 70 00:05:49,220 --> 00:05:56,000 with Google Maps being used, with a couple of browser APIs being used, with browser support ensured 71 00:05:56,060 --> 00:06:02,810 by us with certain if checks where we check if the clipboard API is available and so on and with async 72 00:06:02,810 --> 00:06:08,960 await used with promises with a lot of async code in general, with the fetch API, so with a lot of features 73 00:06:08,960 --> 00:06:15,530 you'll learned about earlier in this course all coming together in this little demo application which hopefully 74 00:06:15,530 --> 00:06:20,540 therefore is a good practice and shows you how tthe different pieces work together.