How to Integrate Google Maps Into WordPress Shortcodes

December 14th, 2012 - Tutorials | 13 Comments

As you already know, WordPress is the most popular CMS in the world. Who would have known a few years ago that today we can really build fully featured and functional websites within minutes? Working with WordPress is a breeze. Not only that it allows you to create gorgeous websites fast, but thanks to the great community which gravitates around it, you`ll find answers and solutions to all of your questions.

Being a content management system, WordPress deals with words. For this reason, you might feel that the post textarea from within the WordPress dashboard doesn`t let you integrate more complex content like HTML or JavaScript. You don`t have to worry about flexibility. Wrapping content into HTML tags in a post textarea is the same thing as writing code for an .html page. The real problem comes when you want to use a certain block of code into more posts or pages. It doesn`t mean that WordPress can`t handle the problem; you can always use the code block into as many pages as you want because WordPress allows you to. The issue is deeper and related to human nature: we`re too lazy to do it.

WordPress built a bridge between the way we are and the way we work and introduced the all-mighty Shortcodes.

What are shortcodes?

As the name says, shortcodes are simple lines of code which replace more complex functionality. So, instead of writing 50 lines of complex code into a post or page, implementing them into a shortcode allows you to write only one line of code.

Now you might think that building shortcodes is hard. Well, it`s not that hard and requires minimum PHP knowledge. To prove you, I`m going to create a shortcode which allows us to integrate Google Maps into any post/page.

First let`s take a look at the embed code Google provides:

The most important attributes of the code are “width”, “height” and “src”. The first two are giving the map dimensions and the third one is rendering the map found at the url. We`re going to make use of these 3 attributes when building the shortcode.

Any additional code which aims to extend WordPress functionality is added into a file called “functions.php”. If your theme doesn`t have one, create one.

Shortcode Function:

Open your functions.php file and drop the next code into it:

function rockable_googlemap($atts, $content = null) {
   extract(shortcode_atts(array(
               "width" => '940',
               "height" => '300',
               "src" => ''
   ), $atts));

return '<div>
         <iframe src="'.$src.'&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="'.$width.'" height="'.$height.'"></iframe>
        </div>
       ';
}

add_shortcode("googlemap", "rockable_googlemap");

This is how the function looks. The code can be split in two: the main function and the function call. The main function has some parameters which are passed to the shortcode callback function:

  • $atts – an associative array of attributes
  • $content – the enclosed content (if the shortcode is used in its enclosing form like [shortcode] … [/shortcode]). We set it as null because the shortcode doesn`t use content within its begin and end tags.

If you take a look at the embed code provided by Google, you`ll see that we took it, wrapped it into a class(contact-map) for further styling and implemented into it the function attributes($width, $height and $src).

To use the shortcode, all you have to do is to add into any post/page:

[googlemap src="google_map_url"]

This form will render a google map of 940x300px. To create another map of different dimensions use the extended form:

[googlemap width="600" height="250" src="google_map_url"]

That`s it! You just implemented Google Maps into a shortcode.

Like other great features WordPress offers, shortcodes are meant to help us and extend the already ultra-extended WordPress system and because is built on PHP, it offers us the flexibility that we need in order to achieve better performances within websites! The key is to start learning it and will become your best friend!

Written by

Comments

  1. Thank you for this awesome tutorial Sergiu.

  2. thnx for sharing are great

  3. @Mike, @bessy you’re welcome ;)

  4. The company is fairly new in the hosting arena and is based in Northern UK.
    UPDATE: Also, right now Hostgator has a coupon going on.
    Besides, the company also offers a 45-day money back guarantee if it fails to keep its commitment of
    providing the uptime guarantee for the websites.

Trackbacks for this post

  1. How to Integrate Google Maps Into WordPress Shortcodes | Design News
  2. Tweet Parade (no. 52 Dec 2012) | gonzoblog
  3. WordPress shortcode to easily integrate a Google Map on your blog
  4. WordPress shortcode to easily integrate a Google Map on your blog | Wordpress Webdesigner
  5. WordPress shortcode to easily integrate a Google Map on your blog!
  6. Tweet Parade (no.51 Dec 2012) | gonzoblog
  7. 10 useful Wordpress code snippets for your functions.php | gonzoblog
  8. Tweet Heat - The hottest Tweets of the Month [Dec 2012] • Inspired Magazine

Leave a Comment