Voiceover: Hi everyone, this is our first bonus lecture.
But before we get started, I just want to take the time
to say how amazing it is to be your teacher in this course.
As of the recording of this video,
there are almost 1,500 students enrolled in this course
and it got over 20 five star reviews,
which is absolutely incredible for me.
So I want to thank all of you for making this possible
and for being an important part of this course.
So now in this bonus lecture, we'll be adding a map
to our website using a simple jQuery plug-in.
And let's get started with that.
So let me start by telling you how I want
to incorporate the map into our existing website.
So in this section, we have this contact form
and what I want to do is this.
So this is the final result.
You see we have a map here and then the form now is
on the right side here with some transparency.
And I think this is a cool effect.
And so, let's go build it.
I will close this for now.
And this is the JQuery plug-in
that we're going to use to do this.
So I will start now by downloading this JQuery file.
So save as.
And now, the website is no longer on my desktop here.
I now have a folder here on my right column.
But you will obviously put this file
in your already existing folder.
So let's just gmaps.js.
Okay?
And so, back to brackets here.
I will start by incorporating the file down here.
So script, source.
And here it is, great.
Now, actually I shouldn't have closed that.
Okay, here we are.
So I will look at this example at the most basic example,
which is the most simple possible map.
So let's just go ahead and copy this one
and paste it into our script file
because, as you know, this is our JavaScript file,
where all our JQuery code goes.
And since this is a JQuery plug-in,
our code goes right here.
So this element here, this div,
is where we will display our map.
So I will just make this a class.
So map, class.
And these are the coordinates of our points.
The latitude and the longitude.
I will now leave these like this, just to testing purposes.
And we'll now go here to our codes.
Okay right here, and try this out.
So div, class, map.
And, that's it, and we also need
to style this element in the CSS.
And I will do this down here in the form section, okay.
So, map, let's just say the width of 100%.
And a height of 500 pixels.
I will change all of this later.
For now, we just want to see what this looks like,
and if this actually works.
Now before we can check this,
we have to include another JQuery file.
And let me just check it.
It's the official Google Maps API.
So we need this JQuery or JavaScript file
from Google, as well, because that's the file
that this gMaps library builds upon.
So let me just paste it somewhere here.
Alright.
So this should actually be working right now.
And, here we go.
So we have our very first map.
It doesn't look the way we want it, so far, but it's great.
So now let's go back and actually put the form right there
on the right side, as I showed you in the beginning.
And in order to do so, we need
to make some changes to our HTML code.
So what are we going to do?
We will have a box which will
contain both the map div and the form.
So we will no longer have a section.
Let me just delete this.
And instead, I will put a div here called map-box.
And this is not here.
We will put this down here.
Okay, great.
And now, I need a box where the form will go.
So simple I will just call this form box.
And I will close this one as well, and put it down here.
So this should go right here.
Okay, so now we have these two boxes
with the map in the background
and the form box will go on the right side.
So let's format this, here in our style CSS.
So first, we need the map box
to be 100% wide
and a height of 500 pixels.
Now we have the map class,
which is the box which displays the map itself.
And then down here, the form box, as we saw before.
Now in order to position this box on the right side
as we saw in the example, we will use absolute positioning.
So it's position, absolute.
And top zero because we want it at the top of its parent,
which is map box, and all to the right side.
So right, zero.
And in order to make this work,
we have to specify that the parent has a relative position.
So I'm sure you remember this from the course.
So relative and this one is absolute.
And the background should be an almost transparent white.
So background color.
As you remember, white is FFF.
And now, Command E, to change the color here.
Let's say we want zero, zero, eight.
Okay, great.
And now, another important thing.
I don't know if you remember this one.
It's the Z-index.
We use this property to stack elements.
And with stacking elements, I mean that
when we have more than two or three elements,
which overlap each other, the one with the higher Z index,
is the one that appears first, is the one that we will see.
So I will say this one have Z index like 10.
And this one will have Z index zero.
Because this box will overlap the map.
But of course we want to see the form.
So this one needs to have a higher Z index than this one.
And in fact, this only works if we define the position
of the element and this one is relative.
So this one should now work.
So let's take a look at it.
What's going on here?
Okay, here we go.
This looks great, right?
We just have to tell this element
that it also should have 100,
sorry that it should have 500 pixels height.
So let's do that.
Height of 500 pixels.
And then we want some petting here, I would say.
So petting top could be like 40 pixels.
And another important thing that I forgot so far,
is to say that we want its width to be 50%.
So all of the website will be the form
and the other half will be the map.
So let's take a look at this.
Alright, here we go.
Maybe it's a little too small, we will increase this.
Maybe to 560 pixels and change it up here as well.
Yeah, this looks really great.
Okay this is little bit too narrow.
This here, so let me just say,
it comes from up here because we said initially,
that a contact form should have 60% width.
But now this longer applies.
So let me just say, 90%.
This is what it looks like.
Okay, and this is great.
Very well.
So now I actually want another map here
and not just some random place.
So I will go here to Google Maps and type in Lisbon.
And here we go.
And here, in the address bar,
we actually have the coordinates of the place.
So I will just go ahead and copy those.
And then back in brackets here,
where we initialized the map, I will just paste these.
So this is the latitude.
Latitude always goes first.
And this is the longitude.
Paste it here, and we can also do another thing,
which is to fix the zoom, the zoom level.
So let's just say zoom 12,
because the initial value is 15.
So let's see what it looks like, like this.
Okay, here we are.
Okay, this is Lisbon here, great.
Now another thing I want to do, is to add a marker
to this point, as well.
So I will just go back here.
And here in the example, we can see how this works.
So we just need to copy this code here,
and paste it down here.
Alright, so actually this,
we need to define a variable here,
such as we did before, like here,
which is called map, which is this.
So var, map.
And now we can use this variable and then
use this add marker method, which is
like a function for this variable.
So now, if we go ahead and copy these values to this place.
And this is Lisbon here.
And we can do another cool thing.
We just go back here and copy this as well.
So we don't need any of this.
But this is cool.
So content, we can now put some HTML content here,
which will appear once we click on the marker.
So in this case, I will say our Lisbon headquarters,
just like this.
So save this and let me go back here
and see if this worked.
Okay right, here is the marker.
Well let's just move the map a little bit here like this,
so that the marker appears here in the center
of this little square.
So that's quite easy.
We can just change this longitude,
so let's see what happens.
Oh, maybe a little bit more.
Zero five, save.
Okay, great.
Yeah this looks great.
So if we click here, we actually see our text.
Now we can use this as a normal map.
We can zoom out, zoom in.
You can even use the street view.
So all that kind of stuff works here
on our website, right now.
So great, right?
The last thing that we want to do, is to of course
make this responsive right?
So let me just check
what this will look like on a mobile phone.
And now, that's not good.
On a phone we want
to have these two not side by side, but first,
maybe the map and then second, the contact form.
So everything is great until here.
Let me check all of this.
So this is the first break point, right?
So I should set this back to 90% here as well.
Let me start off by doing that.
So where's the first break point?
I haven't looked at this code for quite some time now.
So okay, it's contact form that we're looking for.
Okay, here we are.
So this should be 90%.
Right?
Okay now for the mobile view, let's just
put the map on top and then second, the form.
So how are we going to do that?
Down here in this media query,
let me just copy the relevant code to that place
so that we can then make the necessary changes.
Okay, great.
So map box.
Okay, all of this still applies so far.
Now we have the map and I will increase this.
I will actually decrease this to, let's say 200.
Can always change this later.
And now the form box should no longer be
absolute position, but relative position.
The width is also 100%.
And we don't need any of this because these stay the same.
And, well let me just take a look at this right now.
So we have the map here, of course.
Let me just reload this back to the normal map.
Alright.
So I will change the height here to auto
because we don't want to control the height here.
And the petting in the top, can be reduced to 30 pixels.
And this should in fact also be height auto.
And maybe 300 pixels looks better.
So let's just take a look at this again.
Okay, great.
Now this looks like it looked before, right?
We should just have some petting here
at the bottom as well.
So I will actually say petting 30 and zero.
I think that's it probably.
Yeah, here we go.
So this is everything as it was before.
Now we have our map, which looks great.
Also on a mobile phone, I hope so.
And yeah, then our form just like it was before.
Of course you have some things that you can change here,
such as the distance between some
of the field and the text here.
But you already know how to do all of that, right?
So this is the tablet and desktop.
Yeah that is the biggest version, okay.
This looks actually pretty cool I think.
So easy JQuery plug-in with great effect.
And I hope you can use this to implement
on your own website.