Black Friday & Cyber Monday sale, save 30%! Valid until November 30th at 11:59:59 PM (UTC - 6). Enter BFCM2015 at checkout or Click here to apply discount →

Screenshot from 2012-09-23 15:06:00

In this advanced tutorial we’re going to walk through the process of creating a simple short code to display Google Maps. The concept is simple, but we’ll be using advanced techniques and tools for displaying our maps. All maps will be cached using transients and all requests to Google’s API services will be done with the WordPress HTTP API.

There are a few key techniques utilized to write this plugin:

1. WordPress Short Code API

Most likely you are already familiar with how to register short codes, but just in case you aren’t, the video walks you through how the short code, including several parameters, is setup.

2. Transients API

The WordPress transients API is a really simple caching system that lets you easily store data in the database. It’s great to use when doing remote requests (such as Google Maps) so that you are not forced to perform the request every time the page is loaded.

3. WordPress HTTP API

The WordPress HTTP API provides us with an excellent set of tools for performing remote requests. We can send data remotely, retrieve data remotely, and more. In the scope of this tutorial, we’re using it to send an address to Google and retrieve a set of longitude/latitude coordinates back as a response. This is by far one of my favorite APIs in WordPress.

The maps displayed with the short code we’re writing in this tutorial will look like this screenshot:

The complete code written in the video can be seen below. A further improved version of this plugin will be available in a few days, and it will be free to all premium members.

You must be logged in and have an active premium membership to view the rest of this content. Register or login from the sidebar.

Join now to gain access to this tutorial and more.

Join Now
  1. FxB

    Just an amazing tutorial, love the way you explain clearly, i’m really glad to be a member…

    • Pippin

      Great to hear, and great to have you as a member :)

  2. jgalea

    Excellent tutorial as usual Pippin, an amazing resource for all those who are learning how to write plugins.

  3. yellowhousedesign

    Great tut Pippin! Explanation is always key and was able to follow everything you did; found myself talking to my screen when I saw a syntax mistake 😉

    Not sure if you have it installed, but is a great add-on for Sublime – the WP add-on is pretty awesome-balls as well

    • Pippin

      I didn’t have that installed, but dang, that’s sweet. And yes, the WP add-on is fantastic!

  4. Antoine Divay

    Hello Pippin, thanks for the plugin, Is there any php code I can write into my single.php and display a map automatically with my address in the “echo $long_title;”.
    ‘width’ => 700 ,
    ‘height’ => 480


    Thanks a lot for your help !

  5. Antoine Divay

    Does something like work to use your shortcode in my page ?
    ID, ’emls_property_address’, true);
    echo do_shortcode(‘[pw_map address=$meta]’);


    THanks a lot for your help

    • Pippin

      Yes it does!

  6. orionrush

    You mention that this is going to be a downloadable plugin “in a few days”. Are plans still in the works for this? I assume you wanted to flush it out a bit. By the way, your fly through of the Transients API was very useful for me. Thanks!

  7. orionrush

    Pipin, any reason in particular you chose to use XML vs JSON in the wp_remote_get for coordinates? Most of the maps js I’ve worked with uses JSON so I was thinking of trying to convert what you’ve done just to learn.

    • Pippin

      No, that’s just the format I had available at the time. I personally prefer json.

    • Pippin

      I just updated the code since Google deprecated v2 of their API. Now it uses json :)

  8. orionrush

    Pipin, I was diggin into how you went about setting transients for this plugin and noted that in addition to lat, lag etc, you’re also gathering icon, formatted_phone_number, and webiste when you parse the json — I cant seem to get an address that returns any of these values, and I cant seem to find any documentation that specifically mentions these returns from the geocoding api – are these a hangover from V2 api or perhaps the places api?

    • Pippin

      They most likely are.

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

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match