1 00:00:00,650 --> 00:00:04,220 In this video I want to start to add in one last feature to our application. 2 00:00:04,310 --> 00:00:06,260 I'm at the Google Maps documentation right here. 3 00:00:06,260 --> 00:00:08,330 Don't worry about pulling this up on your own screen. 4 00:00:08,360 --> 00:00:10,450 I just want to show you something really quickly. 5 00:00:10,580 --> 00:00:11,810 Notice how there's a marker right here. 6 00:00:11,810 --> 00:00:13,610 Just like the marker we have placed. 7 00:00:13,610 --> 00:00:18,650 If I click on that marker I get a little pop up right here that has some information that's relevant 8 00:00:18,650 --> 00:00:19,840 to that marker. 9 00:00:19,970 --> 00:00:22,400 So that's exactly what I want to make inside our application. 10 00:00:22,430 --> 00:00:27,170 I want to make sure that any time we click on one of our markers we show some information relevant to 11 00:00:27,170 --> 00:00:31,040 the company or the user that this marker represents. 12 00:00:31,040 --> 00:00:36,860 So let's figure out first how to just open up a window like this to do so we can either read our type 13 00:00:36,860 --> 00:00:41,180 definition file again or in this case we could just read the official documentation. 14 00:00:41,210 --> 00:00:45,170 In this case we're going to take a look at the official documentation because showing this info window 15 00:00:45,440 --> 00:00:50,480 is a little bit more complicated than adding the marker or showing the map gets it really quickly. 16 00:00:50,480 --> 00:00:55,080 Let's take a look at the documentation so there's a code snippet right here for the map we were just 17 00:00:55,080 --> 00:00:56,130 looking at. 18 00:00:56,280 --> 00:01:01,200 The first thing they do is create a string that contains some amount of each team L. That will be shown 19 00:01:01,200 --> 00:01:06,680 inside of that pop up window then immediately after that they create an instance of something called 20 00:01:06,680 --> 00:01:10,160 an info window the info window is the pop up. 21 00:01:10,160 --> 00:01:16,310 So this is going to be a instance of a class or an object that represents a pop up window when they 22 00:01:16,310 --> 00:01:21,890 create the info window they pass in the content that the window will display as an option. 23 00:01:23,590 --> 00:01:29,290 They then go on to create a marker and then finally they add an event listener to the marker itself. 24 00:01:29,290 --> 00:01:35,440 So any time the marker gets clicked they find the info window they call the open method on it and they 25 00:01:35,440 --> 00:01:41,050 pass in the map that they want to show the window on and the marker that they want to show the window 26 00:01:41,080 --> 00:01:42,310 above. 27 00:01:42,370 --> 00:01:43,500 And that's pretty much it. 28 00:01:44,600 --> 00:01:48,670 So we could look at our type definition file again to understand how to do all this stuff. 29 00:01:48,680 --> 00:01:52,960 But like I said in this case creating an info window is a little bit more complicated. 30 00:01:53,000 --> 00:01:56,190 So I just want to take a look at the official documentation really quickly. 31 00:01:56,210 --> 00:02:01,160 Now having said that let's take a look at the type definition file any ways and just try to find where 32 00:02:01,160 --> 00:02:06,800 the info window is defined inside the type definition and where we can find like all the possible options 33 00:02:06,800 --> 00:02:13,980 we can pass in to customize the info window as well so back inside my editor I'm at custom map I can 34 00:02:14,040 --> 00:02:19,440 do another command click on Google dot map stop map that's going to pull open the type definition file 35 00:02:19,440 --> 00:02:26,910 for Google Maps and inside of here I'm going to do a search for info window and we're looking for class 36 00:02:26,940 --> 00:02:32,900 info window there it is right there so to get a good idea of how to use this info window we could either 37 00:02:32,900 --> 00:02:38,000 read that official documentation or read the type definition file you'll notice that there's actually 38 00:02:38,000 --> 00:02:41,130 comments inside of here to help you understand how to use it. 39 00:02:41,200 --> 00:02:46,290 So here's the constructor no this thing gets called anytime we create an instance of a class. 40 00:02:46,300 --> 00:02:53,140 So in other words anytime we have like this right here new info window that is us calling the constructor. 41 00:02:53,140 --> 00:02:58,120 So this object right here that gets passed in is going to be an argument to the constructor. 42 00:02:58,300 --> 00:03:04,060 So that means that options object is going to be this argument right here and that object has to satisfy 43 00:03:04,240 --> 00:03:05,560 this type. 44 00:03:05,560 --> 00:03:10,430 So we can look at the definition of this type and understand what different options we can pass into 45 00:03:10,450 --> 00:03:11,770 the info window. 46 00:03:11,770 --> 00:03:17,050 So I'm going to again command click on Info window options right here and like I said this will tell 47 00:03:17,050 --> 00:03:22,870 us about all the different properties we can pass into the info window when we create it you'll notice 48 00:03:22,870 --> 00:03:25,240 one of the first options right here is content. 49 00:03:25,350 --> 00:03:26,380 It's like we just saw. 50 00:03:26,470 --> 00:03:32,560 Content is going to be the H team L where the plane string that will be displayed inside the info window 51 00:03:34,000 --> 00:03:37,750 so we can also take a look at some of the other properties we can pass into the info window when we 52 00:03:37,750 --> 00:03:38,290 create it. 53 00:03:38,710 --> 00:03:40,590 None of these other ones are super relevant for us. 54 00:03:40,620 --> 00:03:45,400 But just wanted to to remind you that we can take a look at the different options by referencing the 55 00:03:45,400 --> 00:03:51,800 type index file as opposed to trying to find the different options inside the official documentation. 56 00:03:51,810 --> 00:03:52,360 All right. 57 00:03:52,380 --> 00:03:56,340 So I think that's enough of the type definition file again I just wanted to remind you that we can figure 58 00:03:56,340 --> 00:04:01,090 out how to use an info window by looking at this stuff instead. 59 00:04:01,270 --> 00:04:01,510 All right. 60 00:04:01,540 --> 00:04:04,750 I'm gonna go back over to my custom map class now to get started. 61 00:04:04,750 --> 00:04:09,550 We're just going to try to show a plane in a full window with some generic content inside of it. 62 00:04:09,550 --> 00:04:13,660 I'm not going to worry about showing some information about a specific user or company. 63 00:04:13,660 --> 00:04:18,980 Let's just get like some Hi there or like hello world text inside of an info window. 64 00:04:18,980 --> 00:04:26,140 So to do so I'm gonna go down to my AD marker method so anytime we create a marker I'm going to assign 65 00:04:26,140 --> 00:04:34,050 that marker to a temporary variable like so then I'm going to add an event listener to the marker. 66 00:04:34,200 --> 00:04:39,060 So anytime we click on this marker we're going to run a function inside that function is where we are 67 00:04:39,060 --> 00:04:40,890 going to create our info window. 68 00:04:40,950 --> 00:04:47,600 So I'll say marker dot add listener anytime that thing gets clicked. 69 00:04:47,600 --> 00:04:49,180 Let's run this function right here. 70 00:04:49,970 --> 00:04:52,550 So then inside of here we can create our info window. 71 00:04:52,550 --> 00:05:00,670 So I'll say const info window is new Google Maps dot info window. 72 00:05:00,880 --> 00:05:03,340 We're going to pass in the options object. 73 00:05:03,370 --> 00:05:07,110 Remember that options object can have a content property. 74 00:05:07,280 --> 00:05:09,520 It's going to say that name tell me show this info window. 75 00:05:09,520 --> 00:05:14,340 Just show some content side of it that says Hi there like so. 76 00:05:14,460 --> 00:05:20,650 And then finally we'll do an info window dot open and I'm gonna pass in a reference to the map that 77 00:05:20,650 --> 00:05:27,650 I want to show this window on and a reference to the marker that we're gonna show this above so the 78 00:05:27,650 --> 00:05:32,600 map we're gonna show this on is going to be this dot google map because remember we stored a reference 79 00:05:32,600 --> 00:05:40,020 to our Google map as a property of our custom map class and then the second argument will be the marker 80 00:05:40,080 --> 00:05:45,470 that we want to show this above which is the marker we just created two seconds ago. 81 00:05:45,470 --> 00:05:47,030 Now one thing on a mention really quickly. 82 00:05:47,030 --> 00:05:52,910 I know back over here in the code snippet they first create the info window and then later on once the 83 00:05:52,970 --> 00:05:56,060 marker gets clicked they only call info window dot open. 84 00:05:56,480 --> 00:05:58,060 So we're doing things just a little bit differently. 85 00:05:58,070 --> 00:06:02,510 We are saying we're not going to create the info window until the marker gets clicked. 86 00:06:02,540 --> 00:06:03,860 Honestly there's no difference. 87 00:06:03,860 --> 00:06:09,020 You could just as easily move the creation of the info window outside of the event handler. 88 00:06:09,020 --> 00:06:09,710 It's totally up to you. 89 00:06:09,770 --> 00:06:15,060 No difference whatsoever but I'm going to put it inside because I think the code makes us a little bit 90 00:06:15,060 --> 00:06:18,180 more census y. 91 00:06:18,200 --> 00:06:18,480 All right. 92 00:06:18,500 --> 00:06:21,980 Let's save this and we'll do a quick test back inside of our browser. 93 00:06:21,980 --> 00:06:23,950 So back and so my browser here we go. 94 00:06:23,960 --> 00:06:25,410 I'll do a quick refresh. 95 00:06:25,510 --> 00:06:29,690 And now if I click on a marker I should see a pop up here that says Hi there. 96 00:06:29,690 --> 00:06:31,270 Perfect. 97 00:06:31,270 --> 00:06:32,660 All right so this looks pretty good. 98 00:06:32,680 --> 00:06:38,230 Obviously the only downside here is that we don't have any customization of these pop ups for a company 99 00:06:38,260 --> 00:06:39,430 or a user. 100 00:06:39,430 --> 00:06:42,940 So I don't even know if this marker represents a user or a company. 101 00:06:42,940 --> 00:06:46,510 Let's take another quick pause right here and we'll figure out how to fix that up in the next video.