Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

How to (really) embed Google Maps on your church website

I think it is safe to assume that getting people into the pews is a conversion goal most, if not all church websites share. But how are guests going to eat all the donuts and sleep through the sermons if they can’t figure out how to get there? One sure way to kill off the ‘it was hard to find’ excuse is embedding Google Maps on the directions page of your church website. Especially now as Google claims to have made embedding as easy a 1-2-3; though I personally think it takes about 10 real-world steps.

Steps 1-4 of how to embed a google map

Step 1:
Goto maps.google.com (phew, that was easy!-).
Step 2:
Login to a gmail account. Yeah, note that even though you’ve added Google aps to your church’s domain, you’ll still need a gmail account. Hopefully one that reflects the name of your church will get it done. Note to Google, how about adding maps to the aps? Please?
Step 3:
Now, enter in the address of your church and charity. An alternative is to enter the latitude and/or longitude (uber-geeks please take notem, that would be ‘38°53′55.55″N 77° 2′11.96″W’ in the case of my example).
Step 4:
Click on the “Save to My Maps” and either save to and/or create a new maps page for your organization.
Note: you’ll be entering 2 bits of info, the overall “Map Page” and the individual marker/location. You’ll want this so you can add other addresses markers as needed, like to an off-campus outing, picnics in the park, site of new super-deluxe mega-church construction project, etc …

step 5 of embedding a google map

Step 5:
Modify the description of your marker, taking advantage of the fact that you can enter hyperlinks – like to the rest of your church web site.

steps 6 and 7 of embedding a google map

Step 6:
Click on the “Link to this page” link.
Step 7:
Copy the stuff in the second form text field entitled “Paste HTML to embed in website” … don’t be afraid to resize the map by clicking on the ‘Customize and preview embedded map’ link – especially to make the map tall than wide to better accommodate your ‘step 5′ annotations.
Step 8:
Encapsulate the code in a division of your choosing for later CSS control, then either save it to an individual file that you’ll include in other pages, and/or paste it into your directions page – NOT YOUR CHURCH’s FRONT PAGE.
Remember, this is a Ajaxy-Javascript type of thing, adding this to your front page means you potentially create delays for first time visitors, and or blank boxes if/when the service gets overloaded.
Also, WordPress users, I might suggest using a plug-in as the editor breaks badly when embedding such iframes – unless you disable the visual editor via your user profile.
Step 9:
Test the map from as many different browsers as possible.
Step 10:
Collect metrics to see how effective this all is.

That’s it. And heading my advice in step 8 – you can see an example of it on my website over on a separate ‘direction example‘ page I created for this mad experiment.

Your mileage will obviously vary, so leave a comment and lemme know how it goes.

In the meantime, some additional bloggery on the topic:

6 Comments

  1. Thanks the for the info. useful stuff.

    You can also add a listing for your church in the Google Maps Local Business Center. That lets you add all sorts of info to the listing that’ll come up on searches, including hours, url, & much more – even some photos.

    To see ours go to google maps and search for:
    central presbyterian church, baltimore, md

    Click the map pin for details and see the ‘more info’ for even more. neat stuff.

    (sorry if this is a duplicate post. lost the first try — I think)

  2. I noticed that on your example page, using IE6, that click the link to HYCW inside the map opens the HYCW web page inside the map box. It doesn’t do that on the actual Google maps page (accessed by clicking ‘make this map larger’).

    Is that the way it’s suppsoed to work?

  3. I went a different route with our website. Rather than provide a map right off the bat we have the user type in their address and when google maps opens it already has the driving directions from their address to our church listed.

    Here is our page:

    http://www.biblebaptisttemple.org/directions-to-bible-baptist-temple/

    And a snippet of the FORMs code I used:
    Enter your address here:

    Notice our area is also part of the google transit. Similar code used there as well for our bus stop finder.

  4. Pingback: Fundy-mental 5: Faith Baptist Church, Dayton, OH » Heal Your Church WebSite

  5. Pingback: 5 thing the Holy See website could do with the Pope’s visit to the U.S. and UN » Heal Your Church WebSite

  6. I Googled “embed map with directions” and found this how-to. Thank you so much for posting this. I knew this could be done but did not know how to do it without spending hours trying to figure it out. Thanks again!