1 00:00:01,357 --> 00:00:04,897 Hi everyone, this is our first bonus lecture. 2 00:00:04,897 --> 00:00:07,893 But before we get started, I just want to take the time 3 00:00:07,893 --> 00:00:12,001 to say how amazing it is to be your teacher in this course. 4 00:00:12,001 --> 00:00:14,028 As of the recording of this video, 5 00:00:14,028 --> 00:00:17,681 there are almost 1,500 students enrolled in this course 6 00:00:17,681 --> 00:00:20,791 and it got over 20 five star reviews, 7 00:00:20,791 --> 00:00:23,505 which is absolutely incredible for me. 8 00:00:23,505 --> 00:00:26,778 So I want to thank all of you for making this possible 9 00:00:26,778 --> 00:00:30,679 and for being an important part of this course. 10 00:00:30,679 --> 00:00:34,475 So now in this bonus lecture, we'll be adding a map 11 00:00:34,475 --> 00:00:37,634 to our website using a simple jQuery plug-in. 12 00:00:37,634 --> 00:00:40,118 And let's get started with that. 13 00:00:40,118 --> 00:00:42,336 So let me start by telling you how I want 14 00:00:42,336 --> 00:00:46,190 to incorporate the map into our existing website. 15 00:00:46,190 --> 00:00:49,871 So in this section, we have this contact form 16 00:00:49,871 --> 00:00:51,995 and what I want to do is this. 17 00:00:51,995 --> 00:00:54,097 So this is the final result. 18 00:00:54,097 --> 00:00:57,315 You see we have a map here and then the form now is 19 00:00:57,315 --> 00:01:01,768 on the right side here with some transparency. 20 00:01:01,768 --> 00:01:03,868 And I think this is a cool effect. 21 00:01:03,868 --> 00:01:06,352 And so, let's go build it. 22 00:01:06,352 --> 00:01:08,519 I will close this for now. 23 00:01:09,672 --> 00:01:11,222 And this is the JQuery plug-in 24 00:01:11,222 --> 00:01:14,101 that we're going to use to do this. 25 00:01:14,101 --> 00:01:18,268 So I will start now by downloading this JQuery file. 26 00:01:19,813 --> 00:01:20,730 So save as. 27 00:01:22,774 --> 00:01:27,673 And now, the website is no longer on my desktop here. 28 00:01:27,673 --> 00:01:30,830 I now have a folder here on my right column. 29 00:01:30,830 --> 00:01:33,830 But you will obviously put this file 30 00:01:34,756 --> 00:01:37,423 in your already existing folder. 31 00:01:38,353 --> 00:01:40,270 So let's just gmaps.js. 32 00:01:43,980 --> 00:01:44,813 Okay? 33 00:01:46,474 --> 00:01:48,974 And so, back to brackets here. 34 00:01:50,316 --> 00:01:54,399 I will start by incorporating the file down here. 35 00:01:56,713 --> 00:01:58,213 So script, source. 36 00:02:02,541 --> 00:02:04,374 And here it is, great. 37 00:02:07,417 --> 00:02:11,000 Now, actually I shouldn't have closed that. 38 00:02:15,753 --> 00:02:17,253 Okay, here we are. 39 00:02:18,273 --> 00:02:22,998 So I will look at this example at the most basic example, 40 00:02:22,998 --> 00:02:26,342 which is the most simple possible map. 41 00:02:26,342 --> 00:02:29,360 So let's just go ahead and copy this one 42 00:02:29,360 --> 00:02:31,636 and paste it into our script file 43 00:02:31,636 --> 00:02:35,803 because, as you know, this is our JavaScript file, 44 00:02:36,918 --> 00:02:39,501 where all our JQuery code goes. 45 00:02:41,319 --> 00:02:44,094 And since this is a JQuery plug-in, 46 00:02:44,094 --> 00:02:46,177 our code goes right here. 47 00:02:47,414 --> 00:02:50,397 So this element here, this div, 48 00:02:50,397 --> 00:02:53,147 is where we will display our map. 49 00:02:54,136 --> 00:02:55,855 So I will just make this a class. 50 00:02:55,855 --> 00:02:57,178 So map, class. 51 00:02:57,178 --> 00:02:59,953 And these are the coordinates of our points. 52 00:02:59,953 --> 00:03:02,262 The latitude and the longitude. 53 00:03:02,262 --> 00:03:06,429 I will now leave these like this, just to testing purposes. 54 00:03:10,541 --> 00:03:13,458 And we'll now go here to our codes. 55 00:03:15,962 --> 00:03:18,795 Okay right here, and try this out. 56 00:03:20,769 --> 00:03:22,352 So div, class, map. 57 00:03:25,286 --> 00:03:26,749 And, that's it, and we also need 58 00:03:26,749 --> 00:03:29,499 to style this element in the CSS. 59 00:03:32,750 --> 00:03:36,917 And I will do this down here in the form section, okay. 60 00:03:39,868 --> 00:03:43,785 So, map, let's just say the width of 100%. 61 00:03:46,915 --> 00:03:49,165 And a height of 500 pixels. 62 00:03:50,108 --> 00:03:52,070 I will change all of this later. 63 00:03:52,070 --> 00:03:55,134 For now, we just want to see what this looks like, 64 00:03:55,134 --> 00:03:57,666 and if this actually works. 65 00:03:57,666 --> 00:03:59,732 Now before we can check this, 66 00:03:59,732 --> 00:04:03,680 we have to include another JQuery file. 67 00:04:03,680 --> 00:04:05,763 And let me just check it. 68 00:04:06,872 --> 00:04:09,705 It's the official Google Maps API. 69 00:04:14,501 --> 00:04:17,918 So we need this JQuery or JavaScript file 70 00:04:20,155 --> 00:04:23,905 from Google, as well, because that's the file 71 00:04:25,437 --> 00:04:28,437 that this gMaps library builds upon. 72 00:04:29,802 --> 00:04:33,239 So let me just paste it somewhere here. 73 00:04:33,239 --> 00:04:34,864 Alright. 74 00:04:34,864 --> 00:04:38,614 So this should actually be working right now. 75 00:04:45,697 --> 00:04:46,961 And, here we go. 76 00:04:46,961 --> 00:04:49,633 So we have our very first map. 77 00:04:49,633 --> 00:04:53,800 It doesn't look the way we want it, so far, but it's great. 78 00:04:54,949 --> 00:04:59,116 So now let's go back and actually put the form right there 79 00:05:00,277 --> 00:05:04,074 on the right side, as I showed you in the beginning. 80 00:05:04,074 --> 00:05:05,258 And in order to do so, we need 81 00:05:05,258 --> 00:05:08,425 to make some changes to our HTML code. 82 00:05:11,156 --> 00:05:13,351 So what are we going to do? 83 00:05:13,351 --> 00:05:15,452 We will have a box which will 84 00:05:15,452 --> 00:05:18,619 contain both the map div and the form. 85 00:05:23,277 --> 00:05:26,016 So we will no longer have a section. 86 00:05:26,016 --> 00:05:28,016 Let me just delete this. 87 00:05:30,638 --> 00:05:34,805 And instead, I will put a div here called map-box. 88 00:05:42,968 --> 00:05:45,394 And this is not here. 89 00:05:45,394 --> 00:05:47,644 We will put this down here. 90 00:05:49,655 --> 00:05:50,655 Okay, great. 91 00:05:52,696 --> 00:05:56,446 And now, I need a box where the form will go. 92 00:05:58,874 --> 00:06:02,291 So simple I will just call this form box. 93 00:06:06,455 --> 00:06:10,622 And I will close this one as well, and put it down here. 94 00:06:15,731 --> 00:06:18,148 So this should go right here. 95 00:06:19,168 --> 00:06:22,168 Okay, so now we have these two boxes 96 00:06:23,637 --> 00:06:26,250 with the map in the background 97 00:06:26,250 --> 00:06:30,569 and the form box will go on the right side. 98 00:06:30,569 --> 00:06:34,236 So let's format this, here in our style CSS. 99 00:06:36,756 --> 00:06:39,173 So first, we need the map box 100 00:06:43,769 --> 00:06:45,436 to be 100% wide 101 00:06:47,856 --> 00:06:50,106 and a height of 500 pixels. 102 00:06:52,627 --> 00:06:54,590 Now we have the map class, 103 00:06:54,590 --> 00:06:58,769 which is the box which displays the map itself. 104 00:06:58,769 --> 00:07:02,936 And then down here, the form box, as we saw before. 105 00:07:05,572 --> 00:07:09,090 Now in order to position this box on the right side 106 00:07:09,090 --> 00:07:13,257 as we saw in the example, we will use absolute positioning. 107 00:07:14,269 --> 00:07:16,519 So it's position, absolute. 108 00:07:18,692 --> 00:07:22,859 And top zero because we want it at the top of its parent, 109 00:07:24,404 --> 00:07:27,775 which is map box, and all to the right side. 110 00:07:27,775 --> 00:07:29,749 So right, zero. 111 00:07:29,749 --> 00:07:32,349 And in order to make this work, 112 00:07:32,349 --> 00:07:36,516 we have to specify that the parent has a relative position. 113 00:07:39,350 --> 00:07:43,183 So I'm sure you remember this from the course. 114 00:07:45,538 --> 00:07:49,230 So relative and this one is absolute. 115 00:07:49,230 --> 00:07:53,397 And the background should be an almost transparent white. 116 00:07:54,315 --> 00:07:56,138 So background color. 117 00:07:56,138 --> 00:07:58,890 As you remember, white is FFF. 118 00:07:58,890 --> 00:08:02,640 And now, Command E, to change the color here. 119 00:08:03,928 --> 00:08:07,160 Let's say we want zero, zero, eight. 120 00:08:07,160 --> 00:08:08,160 Okay, great. 121 00:08:09,922 --> 00:08:11,303 And now, another important thing. 122 00:08:11,303 --> 00:08:13,718 I don't know if you remember this one. 123 00:08:13,718 --> 00:08:15,135 It's the Z-index. 124 00:08:17,479 --> 00:08:19,975 We use this property to stack elements. 125 00:08:19,975 --> 00:08:22,448 And with stacking elements, I mean that 126 00:08:22,448 --> 00:08:25,710 when we have more than two or three elements, 127 00:08:25,710 --> 00:08:29,449 which overlap each other, the one with the higher Z index, 128 00:08:29,449 --> 00:08:33,616 is the one that appears first, is the one that we will see. 129 00:08:35,149 --> 00:08:39,027 So I will say this one have Z index like 10. 130 00:08:39,027 --> 00:08:42,027 And this one will have Z index zero. 131 00:08:44,089 --> 00:08:47,549 Because this box will overlap the map. 132 00:08:47,549 --> 00:08:51,450 But of course we want to see the form. 133 00:08:51,450 --> 00:08:54,713 So this one needs to have a higher Z index than this one. 134 00:08:54,713 --> 00:08:58,880 And in fact, this only works if we define the position 135 00:08:59,774 --> 00:09:03,292 of the element and this one is relative. 136 00:09:03,292 --> 00:09:05,927 So this one should now work. 137 00:09:05,927 --> 00:09:08,177 So let's take a look at it. 138 00:09:10,955 --> 00:09:13,126 What's going on here? 139 00:09:13,126 --> 00:09:14,543 Okay, here we go. 140 00:09:15,435 --> 00:09:17,514 This looks great, right? 141 00:09:17,514 --> 00:09:20,394 We just have to tell this element 142 00:09:20,394 --> 00:09:22,811 that it also should have 100, 143 00:09:24,720 --> 00:09:28,387 sorry that it should have 500 pixels height. 144 00:09:29,594 --> 00:09:31,219 So let's do that. 145 00:09:31,219 --> 00:09:32,969 Height of 500 pixels. 146 00:09:34,562 --> 00:09:37,593 And then we want some petting here, I would say. 147 00:09:37,593 --> 00:09:40,843 So petting top could be like 40 pixels. 148 00:09:44,617 --> 00:09:47,600 And another important thing that I forgot so far, 149 00:09:47,600 --> 00:09:51,600 is to say that we want its width to be 50%. 150 00:09:52,801 --> 00:09:56,576 So all of the website will be the form 151 00:09:56,576 --> 00:09:59,493 and the other half will be the map. 152 00:10:00,418 --> 00:10:02,357 So let's take a look at this. 153 00:10:02,357 --> 00:10:03,715 Alright, here we go. 154 00:10:03,715 --> 00:10:07,882 Maybe it's a little too small, we will increase this. 155 00:10:09,129 --> 00:10:13,296 Maybe to 560 pixels and change it up here as well. 156 00:10:18,097 --> 00:10:20,597 Yeah, this looks really great. 157 00:10:21,612 --> 00:10:24,073 Okay this is little bit too narrow. 158 00:10:24,073 --> 00:10:26,573 This here, so let me just say, 159 00:10:28,207 --> 00:10:30,534 it comes from up here because we said initially, 160 00:10:30,534 --> 00:10:35,015 that a contact form should have 60% width. 161 00:10:35,015 --> 00:10:37,162 But now this longer applies. 162 00:10:37,162 --> 00:10:39,579 So let me just say, 90%. 163 00:10:42,957 --> 00:10:44,280 This is what it looks like. 164 00:10:44,280 --> 00:10:46,280 Okay, and this is great. 165 00:10:47,403 --> 00:10:48,236 Very well. 166 00:10:51,280 --> 00:10:55,240 So now I actually want another map here 167 00:10:55,240 --> 00:10:57,457 and not just some random place. 168 00:10:57,457 --> 00:11:01,624 So I will go here to Google Maps and type in Lisbon. 169 00:11:03,855 --> 00:11:05,921 And here we go. 170 00:11:05,921 --> 00:11:07,918 And here, in the address bar, 171 00:11:07,918 --> 00:11:10,995 we actually have the coordinates of the place. 172 00:11:10,995 --> 00:11:14,581 So I will just go ahead and copy those. 173 00:11:14,581 --> 00:11:17,164 And then back in brackets here, 174 00:11:18,495 --> 00:11:22,755 where we initialized the map, I will just paste these. 175 00:11:22,755 --> 00:11:24,755 So this is the latitude. 176 00:11:25,843 --> 00:11:28,201 Latitude always goes first. 177 00:11:28,201 --> 00:11:30,368 And this is the longitude. 178 00:11:32,275 --> 00:11:35,701 Paste it here, and we can also do another thing, 179 00:11:35,701 --> 00:11:39,118 which is to fix the zoom, the zoom level. 180 00:11:40,395 --> 00:11:42,562 So let's just say zoom 12, 181 00:11:44,632 --> 00:11:47,299 because the initial value is 15. 182 00:11:48,695 --> 00:11:52,278 So let's see what it looks like, like this. 183 00:11:53,849 --> 00:11:54,682 Okay, here we are. 184 00:11:54,682 --> 00:11:57,432 Okay, this is Lisbon here, great. 185 00:11:59,241 --> 00:12:03,283 Now another thing I want to do, is to add a marker 186 00:12:03,283 --> 00:12:05,187 to this point, as well. 187 00:12:05,187 --> 00:12:07,912 So I will just go back here. 188 00:12:07,912 --> 00:12:12,079 And here in the example, we can see how this works. 189 00:12:12,951 --> 00:12:16,201 So we just need to copy this code here, 190 00:12:18,385 --> 00:12:20,302 and paste it down here. 191 00:12:25,304 --> 00:12:27,471 Alright, so actually this, 192 00:12:29,844 --> 00:12:31,852 we need to define a variable here, 193 00:12:31,852 --> 00:12:34,663 such as we did before, like here, 194 00:12:34,663 --> 00:12:37,530 which is called map, which is this. 195 00:12:37,530 --> 00:12:38,530 So var, map. 196 00:12:42,023 --> 00:12:44,670 And now we can use this variable and then 197 00:12:44,670 --> 00:12:47,352 use this add marker method, which is 198 00:12:47,352 --> 00:12:50,185 like a function for this variable. 199 00:12:53,564 --> 00:12:57,731 So now, if we go ahead and copy these values to this place. 200 00:13:04,047 --> 00:13:06,047 And this is Lisbon here. 201 00:13:07,333 --> 00:13:09,936 And we can do another cool thing. 202 00:13:09,936 --> 00:13:13,519 We just go back here and copy this as well. 203 00:13:14,951 --> 00:13:18,156 So we don't need any of this. 204 00:13:18,156 --> 00:13:19,769 But this is cool. 205 00:13:19,769 --> 00:13:23,032 So content, we can now put some HTML content here, 206 00:13:23,032 --> 00:13:26,073 which will appear once we click on the marker. 207 00:13:26,073 --> 00:13:30,240 So in this case, I will say our Lisbon headquarters, 208 00:13:32,552 --> 00:13:34,130 just like this. 209 00:13:34,130 --> 00:13:36,755 So save this and let me go back here 210 00:13:36,755 --> 00:13:38,672 and see if this worked. 211 00:13:39,680 --> 00:13:42,177 Okay right, here is the marker. 212 00:13:42,177 --> 00:13:46,472 Well let's just move the map a little bit here like this, 213 00:13:46,472 --> 00:13:48,992 so that the marker appears here in the center 214 00:13:48,992 --> 00:13:50,825 of this little square. 215 00:13:51,858 --> 00:13:52,735 So that's quite easy. 216 00:13:52,735 --> 00:13:55,568 We can just change this longitude, 217 00:13:58,597 --> 00:14:00,757 so let's see what happens. 218 00:14:00,757 --> 00:14:03,090 Oh, maybe a little bit more. 219 00:14:04,438 --> 00:14:05,771 Zero five, save. 220 00:14:08,559 --> 00:14:09,940 Okay, great. 221 00:14:09,940 --> 00:14:12,077 Yeah this looks great. 222 00:14:12,077 --> 00:14:15,839 So if we click here, we actually see our text. 223 00:14:15,839 --> 00:14:17,859 Now we can use this as a normal map. 224 00:14:17,859 --> 00:14:19,942 We can zoom out, zoom in. 225 00:14:21,015 --> 00:14:23,765 You can even use the street view. 226 00:14:24,811 --> 00:14:27,516 So all that kind of stuff works here 227 00:14:27,516 --> 00:14:29,629 on our website, right now. 228 00:14:29,629 --> 00:14:31,649 So great, right? 229 00:14:31,649 --> 00:14:36,247 The last thing that we want to do, is to of course 230 00:14:36,247 --> 00:14:38,497 make this responsive right? 231 00:14:40,148 --> 00:14:41,553 So let me just check 232 00:14:41,553 --> 00:14:45,291 what this will look like on a mobile phone. 233 00:14:45,291 --> 00:14:46,820 And now, that's not good. 234 00:14:46,820 --> 00:14:48,941 On a phone we want 235 00:14:48,941 --> 00:14:53,260 to have these two not side by side, but first, 236 00:14:53,260 --> 00:14:57,260 maybe the map and then second, the contact form. 237 00:15:00,180 --> 00:15:03,013 So everything is great until here. 238 00:15:06,025 --> 00:15:08,108 Let me check all of this. 239 00:15:15,545 --> 00:15:18,878 So this is the first break point, right? 240 00:15:19,783 --> 00:15:24,368 So I should set this back to 90% here as well. 241 00:15:24,368 --> 00:15:27,386 Let me start off by doing that. 242 00:15:27,386 --> 00:15:30,136 So where's the first break point? 243 00:15:34,342 --> 00:15:37,128 I haven't looked at this code for quite some time now. 244 00:15:37,128 --> 00:15:41,295 So okay, it's contact form that we're looking for. 245 00:15:42,434 --> 00:15:43,785 Okay, here we are. 246 00:15:43,785 --> 00:15:46,035 So this should be 90%. 247 00:15:48,475 --> 00:15:49,308 Right? 248 00:15:56,603 --> 00:15:59,936 Okay now for the mobile view, let's just 249 00:16:03,498 --> 00:16:07,248 put the map on top and then second, the form. 250 00:16:09,176 --> 00:16:12,241 So how are we going to do that? 251 00:16:12,241 --> 00:16:14,741 Down here in this media query, 252 00:16:15,887 --> 00:16:19,887 let me just copy the relevant code to that place 253 00:16:23,120 --> 00:16:27,037 so that we can then make the necessary changes. 254 00:16:29,076 --> 00:16:30,076 Okay, great. 255 00:16:32,838 --> 00:16:33,755 So map box. 256 00:16:34,602 --> 00:16:38,097 Okay, all of this still applies so far. 257 00:16:38,097 --> 00:16:41,847 Now we have the map and I will increase this. 258 00:16:45,446 --> 00:16:49,446 I will actually decrease this to, let's say 200. 259 00:16:50,403 --> 00:16:52,818 Can always change this later. 260 00:16:52,818 --> 00:16:55,941 And now the form box should no longer be 261 00:16:55,941 --> 00:16:59,041 absolute position, but relative position. 262 00:16:59,041 --> 00:17:01,374 The width is also 100%. 263 00:17:02,896 --> 00:17:07,063 And we don't need any of this because these stay the same. 264 00:17:09,479 --> 00:17:13,646 And, well let me just take a look at this right now. 265 00:17:16,839 --> 00:17:20,380 So we have the map here, of course. 266 00:17:20,380 --> 00:17:24,297 Let me just reload this back to the normal map. 267 00:17:29,123 --> 00:17:29,956 Alright. 268 00:17:32,501 --> 00:17:35,565 So I will change the height here to auto 269 00:17:35,565 --> 00:17:40,280 because we don't want to control the height here. 270 00:17:40,280 --> 00:17:44,447 And the petting in the top, can be reduced to 30 pixels. 271 00:17:47,883 --> 00:17:51,550 And this should in fact also be height auto. 272 00:17:52,563 --> 00:17:55,883 And maybe 300 pixels looks better. 273 00:17:55,883 --> 00:17:59,216 So let's just take a look at this again. 274 00:18:02,478 --> 00:18:03,478 Okay, great. 275 00:18:05,125 --> 00:18:08,792 Now this looks like it looked before, right? 276 00:18:10,082 --> 00:18:12,624 We should just have some petting here 277 00:18:12,624 --> 00:18:14,457 at the bottom as well. 278 00:18:15,558 --> 00:18:19,141 So I will actually say petting 30 and zero. 279 00:18:23,198 --> 00:18:25,448 I think that's it probably. 280 00:18:26,484 --> 00:18:27,877 Yeah, here we go. 281 00:18:27,877 --> 00:18:31,140 So this is everything as it was before. 282 00:18:31,140 --> 00:18:34,936 Now we have our map, which looks great. 283 00:18:34,936 --> 00:18:38,001 Also on a mobile phone, I hope so. 284 00:18:38,001 --> 00:18:42,656 And yeah, then our form just like it was before. 285 00:18:42,656 --> 00:18:46,464 Of course you have some things that you can change here, 286 00:18:46,464 --> 00:18:48,357 such as the distance between some 287 00:18:48,357 --> 00:18:50,424 of the field and the text here. 288 00:18:50,424 --> 00:18:53,186 But you already know how to do all of that, right? 289 00:18:53,186 --> 00:18:56,019 So this is the tablet and desktop. 290 00:18:59,096 --> 00:19:00,742 Yeah that is the biggest version, okay. 291 00:19:00,742 --> 00:19:03,466 This looks actually pretty cool I think. 292 00:19:03,466 --> 00:19:06,883 So easy JQuery plug-in with great effect. 293 00:19:08,900 --> 00:19:10,966 And I hope you can use this to implement 294 00:19:10,966 --> 00:19:12,633 on your own website.