How to add Google Maps to your website using embed codes

Hello, good looking people. This video, we're going to look at something called an Embed Code. We're going to start with this one here, see this, it's a map. It's on our website, it's interactive, it shows us where our restaurant is. It's super easy to do. Google does all the work, all those copy and paste stuff. Later on, we'll add a video as well, from YouTube to our website, and we'll add this thing called 'Booking', where somebody can make a reservation. We're not doing it, we're not coding it, we're not styling it. We're just going to these websites, like YouTube, Google Maps, and Open Table, and they are giving us all the things we need. We just copy and paste it, and we look awesome. All right, let's jump in now, and work out how. 

So this is what we want to add, right? It's just a kind of a screenshot at the moment, it's not actually working. We want to add it to our website. The cool thing about things like this, we're going to do Google Maps, but you could have a calendar from Google Maps here, a spreadsheet from Google. What else? You can have Ticketing from Ticketmaster or Eventbrite. You could have Facebook feeds or Twitter feeds. They all use the same sort of method, it's called an Embed Code. It's generally in something called an iframe. 

So first of all let's go get the code. We're going to do, we'll use Google Maps. I've just loaded up New Zealand version, but go to google.com/maps, I've gone to .co.nz, but anyway, doesn't matter. Then type in the business that you want to list, so type it in, find it. So this is where I'm going to move to, I'm pretty excited. It's Adare, and Adare Manor is like some fancy big state manor house thing there. The Carriage House at Adare Manor, seems like a really cool place to add to my fictional map.

So what I'm going to do is I'm going to click on it, so that I'm just kind of like isolating it over here, because I don't want all of these things over here as well. So I'm just going to find The Carriage House at Adare Manor, because whatever you see over here is going to be what's in your map. Actually, where are the other restaurants? Where are the restaurants? Oh, it has gone away.
 
So a couple of things you need to do when you're doing a map, is zoom in and out, because this is the kind of size. If you want to show it in relation to like Dublin, which is miles away, I live in Ireland, I'm from New Zealand, my wife's Irish, anyway. So you could decide the kind of scale. Do you want it to be-- so you can see the kind of driving distance between Dublin, there somewhere, or do you want it to be really kind of localized map, so people can see the street, that's all very close. To get that right, click and drag it till you get the right position, and then what you're looking for--

Now I'm going to show you as it is at the moment. Every time I teach this class and I make a video, they go and move where this button is. You know what I complain? Google changes it on me, you just got to dig it out and find it. If it is in a different place, write it in the comments so that other students know where it's gone. 

So what I'm looking for is an Embed Code. So where is it at the moment? It's under this one called Share. Gives you options for sharing, and you're looking for this one called Embed. So embedded a map, click on that. Then what I want to do is, you've got the different sizes, I'm going to pick a custom size, you could just pick one of these. Custom size. Now how wide do we want it to be? I want it to be, like I know the width of my site is 1024, so I might make it full width, 24 even. And how high, I'm just guessing, 500. So let's preview at actual size, that's what it's going to look like, once it loads eventually; awesome. 

So all I need to do now is go to copy Embed a Map. Copy HTML, and paste this on my site. It's too easy, so good. Cool thing about it is it's going to make us look real good if this works. So where am I going to put it? I'll put it inside the Main. So just before it, and I put a couple of 'Return's in. I'm going to tab across and paste it there. Cool. So that's going to be my iframe. Let's see if it works straight without any--

Sometimes they need adjustments, let's check, I can't remember. Let's preview in the browser, let's see how this goes. You ready? Which one is it? Yeah, all's great. It's kind of pushed over to the side but it's there, look at it. You can zoom in, zoom out, people can check it out, find directions, and it looks good on your website, and we don't have to do any of this kind of like hardcore stuff. Google does all the hard work for us. Now why is it all messed up, it's mainly because we put it-- a couple of things, one is we put it inside this Main tag, which I forgot, we added Padding to. I'll leave this in the course because these are the things that happen, you're like, "What happened, Dan? I know because, remember our Main, we said, earlier or later on we said we added giant padding. So what I'm going to do is I'm going to say let's not have it in Main, let's have it afterwards in our tag. What tag? Let's use a section. Yeah, section. Section is a nice thing to use, and what we'll do is, you could just use a Div. Just exploring using sections, and put it in there. 

It's going to solve some of our problems because it's in a different-- the padding's not going to be affected hopefully. Cool. That's fixed all of our problems, nice. So there's our map, we've got some padding issues that we need to fix, but that's cool, huh. Just dump it in and it looks awesome. Let's fix the padding and then I'll show you a quick little run through, some other Embed Codes. So what I'm going to do, is here, in my Section, I'm going to give it a Class name. I'm going to call this one, what am I going to call this one? Maps. Over here what I want to do, is I'm going to say, if there's dot maps, '.maps', I'd like it to have, what do I want, padding or margin? Let's have a look. Padding or margin, let's do padding. Padding bottom. And how many? let's put in 100 pixels to see what it looks like. There we go, bit of a space there. 

My image is getting, it's not big enough to carry it. If you're working on a smaller screen, you're probably not going to run into image issues, but here we go. Let's look at a couple of other Embed Codes, because the process is the same. We'll do two more, real common one is YouTube. So go to YouTube, find a video that you'd like. Oh, I know a good video. I'm waiting for actually this to launch. It's going to show you all my search history, what does Dan like to watch? And it's not too bad, lots of car shows and home renovation, buildings stuff. You're like, "Why aren't there lots of Web Design shows?" Because I like to make Web Design videos, not watch them, anyway. 

So let's add a video, let's find, oh, Bring Your Own Laptop. It's bound to be a good video there. Look at this guy, Grid in, let's grab this one. It's one of my old videos, my other videos. So what you're doing is, you find the video that you want, make sure it's got a handsome Kiwi in it. Once you've found that you're looking for the Share button. Now again this might change, YouTube change things around all the time as well. So you're looking for Share, it will be there somewhere. And go to Share Link Embed, see that one there, click on this. 

There's an iframe like before. You can get it to start at different position, do you want the Player Controls, so do you want the Play button or not? I'm just going to copy all of this. Let's just hit 'Copy', there you go. I'm going to jump into my Studio Code; where am I going to put it? I'll put it just underneath this iframe. Just put underneath here. We're going to get rid of it. I'm just kind of showing you, for instance, paste it in, let's see if there's any issues. Let's have a look, it's the old one. The new one looks like this, there's a map, and there's a video underneath it. Cool, huh. 

Now you can do things like making it 100% width. What else can you do? Let's have a little look at the code. Because we've set the height and width, I'm going to make it a width of 124. What does that equal? I'm not even sure. Can I delete the height? I think you can just delete the height, and let it do it for you. Nope, you have to work out what the ratio is and make it bigger. It's a really skinny video. Not sure what it is, so I'm going to leave it for the moment. It's Maths, that my brain can't do now. It's 10 o'clock at night, it's too late for Maths. Let's have a little look. 

Yeah, adding videos. I'm just going to mention a couple of other ones now that you can go off and do. Twitter does the same thing, so if you want to add your Twitter feed, to add a little bit of life to your website, go to Twitter, and they have an Embed Code, so you can embed a stream of your tweets. You can go to Facebook, and put your Facebook group on here as well, in different posts. What else can you do? MailChimp have one, say you want to add an email signup, real quick and easy, go to MailChimp, signup, and they will give you a little Embed Code, that you can just paste on your site, and they'll do all the heavy lifting. They'll grab the emails, they'll confirm them for you, they'll add them to a list that you can send them emails. 

One other one I wanted to show you was Open Table. So Open Table, it's not really big here in Ireland, but I know it's big around the world. Anyway, let's say that you want to add a reservation, because at the moment we've just got this reasonably lame thing, where is it, there we are there, we just got a button, but let's say, if they actually want to book a time and a place, and you don't want to have to code all that, because it can be, it's really complicated, can be. You can go to Open Table, and if you've, like been accepted into that, say you're the restaurant owner, or the Web Designer for the restaurant, you're going to have to get them to make sure they add their restaurant, and they have to jump through some hoops to say, yes, I'm a restaurant, it's an open table. And what you can do then is, they've got a widget creator. I found just a brand new restaurant, Philadelphia, I've never been there, but this restaurant, because it's on Open Table, allows you to create a really quick and easy widget. So you can pick the size, do all this, copy the code, dump it into your site, and hope it doesn't break it. 

So where am I going to put mine? I'll put it just in there, paste, see what it does, let's have a look. There it is there; cool, huh. So it goes through, and somebody can go, "I want to make a reservation for now, for two people at 7p.m," and click 'Find a Table'. It will send a booking request to Open Table. I guess I'll show you this all, I've said it a few times, but I want to see this Embed Code stuff, because not everything has to be done by you. You can stand on the shoulders of giants, that have made cool little Embed Codes, and you can just yank them out and stick them on here. 

Have we talked about other ones? A couple of more other ones that I use is Eventbrite. I created my kind of sit down classroom business based around Eventbrite's. Embed Codes allowed me to do some-- people to take tickets, book into my courses without me actually having to do much. I'm going to go through now and delete it, I will save it for this video, but I'll delete it for the next one. So when I wake up tomorrow and we start our next video, these guys are going to be gone, because the map stays, the rest of the stuff is just stuff we've thrown in for learning. All right, haere rā, good people. I'll see you in the next video.