Embedding Google Maps in WordPress

Wordpress Logo

According to the support on the WordPress site here embedding GoogleMaps in WordPress is simply a matter of cutting and pasting the Iframe to your post. Simple! Effective? Not so much!

The problem is that if you use the Visual instead of the HTML Post or Page editors the code can get very messed up which is frustrating to say the least. So, a simple and elegant solution:

In your functions.php or custom_functions.php file (for your relevant theme of course) place the following code

//GoogleMaps Shortcode
function googleMaps($attribs, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $attribs));
return '<iframe width="''.$width.''" height="'.$height.'" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" src="'.$src.'&output=embed"></iframe>';
}
add_shortcode("googlemap", "googleMaps");

Usage within a Page or Post
[googlemap width="200" height="200" src="YOUR_URL_HERE"]

So there are three parameters for our custom shortcode: width and height are optional – if you do not specify the size will default to that specified in the functions.php file. The URL is simply the GoogleMaps share URL.

Update 25/09/2012 – Clarified a few typos where WordPress has messed with the character encoding.

4 thoughts on “Embedding Google Maps in WordPress”

  1. That worked really well, – really handy and I like not having to use a plugin for this.

  2. I thought I was the only one who was having their page messed up when moving between Visual and HTML modes. Using a snippet like this is a really good solution, thanks.

  3. Ironically during an update to this post the visual and HTML views messed up some of the encoding. Should all be fixed now though.

Leave a Comment

Your email address will not be published. Required fields are marked *