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:
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.
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.
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.
Related Items
Just an amazing tutorial, love the way you explain clearly, i’m really glad to be a member…
Great to hear, and great to have you as a member
Excellent tutorial as usual Pippin, an amazing resource for all those who are learning how to write plugins.
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 http://wbond.net/sublime_packages/package_control is a great add-on for Sublime – the WP add-on is pretty awesome-balls as well
I didn’t have that installed, but dang, that’s sweet. And yes, the WP add-on is fantastic!
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 !
You can use the do_shortcode() function: http://codex.wordpress.org/Function_Reference/do_shortcode
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
Yes it does!
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!
It is available: http://wordpress.org/extend/plugins/simple-google-maps-short-code/
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.
No, that’s just the format I had available at the time. I personally prefer json.
I just updated the code since Google deprecated v2 of their API. Now it uses json