Lessons

Lesson Info

Add Google Maps to Your Website

Hello, good looking people. This video, we're going to look at something called an embed code and we're gonna start with this one here. See this? It's a map. It's on our website. It's in directive, it shows us where our restaurant is. It's super easy to do. Google does all the work. All we do is copy and paste stuff. Okay, later on we'll add a video as well okay, from Youtube to our website and we'll add this called booking thing 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. Alright, let's jump in now and work out how. Alright, so this is what we want to add, right? It's just a kind of a screen shot at the moment. It's not actually working. So we want to add it to our website and the cool thing about things like this, we're going to do google maps here, but you co...

uld have a calendar from google maps here. A spreadsheet from google, what else? You could 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 I frame. So first of all, let's go get the code. So we're gonna do, we use google maps. Okay. And I've just loaded up with the new Zealand version but go to google dot com slash maps. Okay, I've gone too dot co dot nz But anyway, it doesn't matter. And then type in the business that you want to list. Okay, so type it in, find it. Um, and let's say, so these, this is where I'm going to move to, right, I'm pretty excited. It's a deer and a deer manner is like some fancy big estate manor house thing there. The carriage house at Adair Manor seems like a really cool place to add to my fictional map. So what I'm gonna 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 a deer manner because whatever you see over here is going to be what's on your map, Still showing me the other restaurants, go away the restaurants so 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, okay, Which is miles away. I live in Ireland from New Zealand, my wife's irish. Anyway, so you can decide the kind of scale. Okay, do you want it to be so you can see the kind of driving distance between Dublin? Oh Dublin is up there somewhere um or do you want it to be really kind of localized maps so people can see the street that's on very close. I get that right click and drag it until 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. Okay, so um you're not allowed to complain, google, changes it on me, you just got to dig it out and find it and if you if it is in a different place, right in the comments so that other students know where it's gone. And so what I'm looking for is an embed code. So where is at the moment it's under this one called share. Give you options for sharing and you're looking for this one called in bed. Okay, so embedded the map, click on that. And then what I wanna do is you've got the different sizes. I'm gonna 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 10, so I might as well make it full width, 10, even and how high I'm just guessing 500. So let's preview it at actual size, that's what's going to look like right once it loads eventually, awesome. So all I need to do now is go to copy Beard map, yep, copy html and paste this on my site, It's too easy. So good. The good thing about it is going to make us look real good if this works, so where am I going to put it? I'll put it um inside the main, so just before it gonna put a couple of returns in and I'm gonna tap across and paste it there. Cool, so that's gonna be my frame, let's see if it works straight without any, sometimes they need adjustments, let's check, I can't remember and it's a preview in the browser, let's see how this goes. You ready? Yeah, which one is it? Yeah, it looks great, okay, 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 is mainly because we put it in a couple of things. One is we put it inside this main tag, which I forgot we added petting too. Okay, I'll leave this in the course because these are things that happen, you're like, what happened dan. I know because remember our main, we said earlier later on we said we had a giant padding. So what I'm gonna do is I'm going to say let's not have it in maine let's have it afterwards and tag Okay what tag? Let's use a section. Okay we could, yep section section is a nice thing to use. Okay. And what we'll do is you could just use a div just exploring using sections. Okay and put it in there. It's gonna say solve some of our problems because it's in a different the padding is not going to be affected. Hopefully. Cool. And that's fixed all of our problems. Nice. Okay, so there's our map. We've got some padding issues that we need to fix. Okay, 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 hear my section. I'm going to give it a class name. Okay, I'm gonna call this one. What am I going to call this one? Maps. Come and over here. What I want to do is I want to say if there's dot maps I'd like it to have um what do I want padding or margin have a look padding or margin will back let's do petting petting bottom Bottom and how many let's put in 100 pixels to see what it looks like. Here we go, a 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 many image issues. But here we go. Let's look at a couple of other embed code because the process is the same. We'll do two more real common one is Youtube. Okay, so go to Youtube, find a video that you like. Oh I know a good video. I'm dreading to actually this to launch. So it's going to show you all my search history. What does dan like to watch? Dun, dun, dun. Alright. And it's not too bad. Lots of car shows and home renovation, building stuff. Uh Yeah, you're like why aren't there lots of web design shows because I like to make web design videos, not watch them. Anyway. Ah So let's add a video. Let's find, oh bring her laptop. There's bound to be a good video there. Look at this guy grid and let's grab this one. Okay. It's one of my old videos on my other videos. So what you're doing is you find the video that you want to make sure it's got a handsome kiwi in it. Okay. And once you've found that you're looking for the share button now. Again, this might change you, youtube changed things around all the time as well. So you're looking for share. It'll be there somewhere and go to where we want to share a link in bed. See that one there. Look on this. Okay. There's an I frame like before. Okay, you can get it to start a 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. That's just a copy. There you go. I'm gonna jump into my studio code. Where am I gonna put it? I'll put it just underneath this. I frame. Yeah, just put underneath here. I know we're going to get rid of it and just kind of showing you a for instance, pasted in. Let's see if there's any issues. Have a look. It's the old one. The new one. It looks like this. There's a map and there's a video underneath it. 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 said be height and width. Okay, I'm going to make it a width of 124. What does that equal? I'm not even sure. Can I delete the height. Think. You can just delete the height and let it do it for you. No, you have to work out what the ratio is and make it bigger. It's a really skinny video. I'm not sure what it is. So I'm going to leave it for the moment. It's a mess that my brain can't do now. It's 10 o'clock at night. It's too late for maths and let's have a little look. Yeah, adding videos. So 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 okay? You can go to facebook and put your facebook group on here as well in different posts. What else can you do? Mail chimp have one. So you want to add an email sign up. Okay, real quick and easy. Go to mail chimp, sign up 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 that confirm them for you, they'll add them to a list that you can send them emailers. One of the 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 the moment we've just got this reasonably lame thing. Where is it? There we are there. He's got a button okay. But let's say 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, well it's really complicated. It can be, you can go to open table and if you've like been accepted into so you're the restaurant owner okay. Or the web designer for the restaurant, you're gonna have to get them to make sure they add their restaurant and they have to jump through some hoops to say yes summer restaurant and it's an open table. And what you can do then is they've got a widget creator. Okay. I found just a Brandon 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. Would you? Okay, 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 gonna put mine and put it just underneath here paste, see what it does and say look There it is there. Cool. Huh? So it goes through and somebody can go, I want to make a reservation for now and for two people at seven PM and click find a table and 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 show you 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 other ones that I use is eventbrite. I created my kind of sit down classroom business based around event brights in bed codes allowed me to do some people to take tickets and book into my courses without me actually having to do much. Alright, 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. But the rest of the stuff is just the stuff we've thrown in for learning. Alright. Good people. I'll see you in the next video.