Embedding Google Maps

[00:00:00]
>> Jen Kramer: One of my favorite sites, Google Maps. So the next thing we're going to talk about then is Google Maps and how we can embed a Google Map into our web page. So as you I'm sure most of you are familiar with Google Maps, you've used this before.

[00:00:15]
This is maps.google.com. And so one of the things that is fairly typical to add on a contact form, contact directions, sort of page like this. Maybe over here on the side, we'd like to add directions to the Frontend Masters location, okay? And this is their address here, 60 South 6th Street, in Minneapolis.

[00:00:38]
So if we go ahead, and drop that on into Google Maps. And you can use whatever address you want. This is going to go ahead and map exactly where we are, 60 South 6th Street. Now, as you know, in Google Maps we can zoom in on that. We can zoom out on that.

[00:01:01]
So you can play around, we can move it around in space, clicking and dragging, we can move it around. So you can change this around and get it, [COUGH] get a view that works for you. Get a view that works for you. And once you have that, then we can go ahead and share it.

[00:01:19]
So there's a little share button over here on the side in your Google Maps. Okay, Share and it's gonna give you some options for sharing. You may have used this first option here, which is to send a link, right? I'm sure we've all done this. Here's how you get somewhere, email somebody a link, for example, or text somebody a link.

[00:01:38]
Put your link up on social media. But you may not have noticed there's a second option here called Embed a Map. Okay, if you look at that, this is going to go ahead and show you what this map is going to look like. The map is built for you, okay?

[00:01:57]
There we go. And so once again, you can zoom in on it, you can zoom out on it, get it looking the way you want. And then look up here at the top. We can pick a size, we can make a small map. We could make a large map.

[00:02:14]
We can do a custom size and type in some sort of dimensions that we want. I'm going to go with a small map. And notice how Google is being very nice to us and writing us a lovely little piece of code up here on the top in a tag you might not have seen before.

[00:02:28]
Everybody see that, this little clip of code up here. This is the iframe tag. What is the iframe tag? Anyone have any ideas?
>> Speaker 2: Basically inserts another website into your own website.
>> Jen Kramer: Yeah, so this is actually gonna cut a little hole in your webpage and show Google instead.

[00:02:52]
So the code here doesn't actually live on your web page, we're just saying hey, go out to Google and grab this thing off their server and display it on my webpage in this little hole that we're gonna make. Makes sense, okay? So all we have to do is say, copy HTML.

[00:03:08]
That's gonna go ahead and copy that to our clipboard. And then in our form, we just have to place it. So I'd like to put our location, maybe I'd like to go ahead and drop in the form right there. So you can just copy and paste and then the Google Map will show up very nicely right there on your website.