I'm going to go back to our project. If you go to maps.google.com, this is going to be a relatively straightforward process, even if you've never done it before. If you go and search for an address or some business, I'll pick out one of my favorites, Diego Pops in Scottsdale, Arizona.

If you search for that, and then go and click the Share icon here.

This is going to bring up a little dialog box.

It gives you the ability to grab a link, but that's not what we're wanting. We actually want to embed the map. Now, the size that this gives you is not exactly ideal. It's not what we're going to want to use, but I'll show you how we can customize it.

They also have the ability to use a custom size but we don't need to do that because I want something that is going to have the ability to fit into our site and it's actually going to go bleeding edge, so it's going to go from side to side.

You can just hit Copy HTML at any of the sizes, and then we will figure it out after that.

If you switch over to the code, we can just add this in, and then we'll be able to see what needs to happen from there. We have this div of features section, so let's come here now, and I'm just going to add a wrapper div. We'll add a class later.

index.html

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3327.0765176913264!2d-111.92875828479936!3d33.49938628076005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b0bbdbed13a73%3A0xfab78c0f014377d8!2sDiego+Pops!5e0!3m2!1sen!2sus!4v1534788183429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

For right now, I just want to show you how it can be embedded. Hit save, and now if you switch back and hit refresh, you'll see that we do have a map right here.

Now, there are a few ways that we can customize this. For right now, let's just play inside of the browser. So, I'm going to select this, and we actually want to select the entire element. Now, what we're doing here is we are working with what is called an IFrame.

If you've never worked with an IFrame before, what that is in HTML is an IFrame gives you the ability to embed an entire website, so if you look at the code at the very top, even though this isn't what we pasted in, this is what renders on the screen.

It is an IFrame, and it is going to go and grab this URL, so it's actually pulling this entire website inside of our website. This has its own document. It has its own HTML, its head, its body, so it's like a mini-website pulled directly into ours. So, that's pretty cool.

If you click on IFrame right here you can actually edit this value. So, if you want the width to be 100%, then you can see that that is all that you need to do. Now we have the nice little shadow effect right here, and if we come back, you can see that's exactly what we're looking for.

All we need to do in order to edit this is to be able to wrap it up and to edit that width and say we want that to be 100%.

index.html

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3327.0765176913264!2d-111.92875828479936!3d33.49938628076005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b0bbdbed13a73%3A0xfab78c0f014377d8!2sDiego+Pops!5e0!3m2!1sen!2sus!4v1534788183429" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Hit save, and now if you come back and hit refresh, you can see our map is working perfectly.

This is giving us exactly the look and feel that we want on the home page and now we have a dynamic map that users can drag, they can click on, they can zoom in, and they can use just like they would if they went to Google Map. That's how easy it is to embed a Google map directly into your own website.