How to Add a Google Map to Your Website

How are you doing, everyone? Today’s OCC Quick Tips video gives instructions for adding a map to your website.

You know, these days, any kind of ministry or school or church or organization can benefit by providing a map to those that visit your site. In fact, perhaps one of the most common reasons someone will visit your website is to gather contact and location information.

So, today, I’m going to show you how to quickly add a map to your website using Google Maps. As you can see, I’m on the Google homepage, and this is where we’ll start with our little tutorial.

We want to begin by clicking the “Maps” icon….the “Maps” link here at the top of the page. Many of you are probably familiar with this feature already, but perhaps didn’t realize it could be used to enhance your site. Okay, and we start by entering the address of the location you would like mapped. I’m going to type the name and address of a church that I’m familiar with.

As you can see, Google’s already filling in some of it for me. So, I will select that right here just by pressing “Enter” on my keyboard or, of course, you can click the “Search Maps” button as well.The result is a nicely detailed map with several options. You can adjust zoom levels. You can move the map in one direction or another.

If you’re satisfied, however, with what you see, click the small link up here in the corner that has the icon and chain link right here. Click on that.

Now, even though what you’re seeing here is a bit intimidating, there’s nothing really to be concerned about. Simply click in this lower box to select the code that you’ll need for your site, and you can right click to choose “Copy”, as I’m doing right here.

Or, of course, you can go up to the “Edit” menu and you can choose “Copy” there, or many people use the “Control-C” on your keyboard. The point is, you need to copy this text right here to be used later on.

Once you’ve done that, of course, it’s time to paste the code on your website. And those of you who have created your sites using an html editor can simply paste the code where you would like it.

However, for those of you using the NE1 Web Builder provided by ourchurch.com, let me show you how the “Paste HTML” feature works. I’ve already logged in to my sample website here. And I’m sure this page looks familiar to many of you.

My first step, of course, is to click on the page I want to place a map on. I’ve already created a page here cleverly titled “Google Map”. And, at this point, the page really only contains the “Under Construction” text. As you can see, it says “Google Map”, which is the name of the page and then “This Page Under Construction”.

So let me start by doing a little editing here to change the title and erase my construction text. Let’s put “Church Map.” And I’m just going to erase this altogether. There we go. And then I’ve already clicked right here where I want the map to go, right underneath my little title.

And, this is where I would go to the far right of the toolbar and click the “Paste HTML code” button. And in this box here, you basically have just two things to fill in. Up at the top, you can give the name of your code any name you want. Let me just name this “Google Map”.

And then down in this HTML code box, click here and this is where I want to paste what I just copied from Google Maps. A lot of code there, but again, you don’t need to know what it says or how it works.

Just simply paste it in there and then click the “Insert Code” button and the result is that I get a little bit of a piece of code right here that represents the map for you. So my next step is simply to click “Save Changes.”

And once those changes are saved, then I’m ready to go ahead and preview that map. And this is really, really nice because all I have to do is click on “Preview Website.” And once that website comes up, I want to click on my page entitled “Google Map.” And you can see the result.

Incidentally, this “Paste HTML Code” feature can be used for all sorts of third party scripts and codes. Not just maps. The beauty of it is that, because it is built the way it is, you can enter it on any page, in any location on any page. That makes it really handy.

So that’s all for now Using Google Maps Stay tuned for future OCC Quick Tips. Thank you.

View web hosting prices! or Start building your site now!

Paul Steinbrueck is co-founder and CEO of OurChurch.Com, elder of CypressMeadows.org, husband, father of 3, blogger. You can follow him on Twitter at @PaulSteinbrueck and add him to your circles at Google+ as .

Comments are closed.