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