Skip to main content

Add Google Maps to Your Website

Lesson 30 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

Add Google Maps to Your Website

Lesson 30 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

30. Add Google Maps to Your Website

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

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.

Class Materials

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles