Adding Google Maps to WordPress with Your Own Quick Shortcode
If you often use Google Maps on your site, or just want an easier way to embed maps in posts and pages, here’s how you can do it with your own shortcode.
We’ve covered the basics of creating shortcodes before, so today we’ll put this knowledge into practice by creating a Google Maps shortcode you can use anywhere on your site.
Creating a Shortcodes Plugin
In this tutorial, we’re going to create a plugin. If you haven’t done it before, check out our easy to follow getting started with plugins guide.
But if you want the nutshell version…
- Create a folder named
my-google-maps-shortcodein your site’s “plugins” directory.
- Create a file named
my-google-maps-shortcode.phpin it and paste the following at the very top:
That’s all! You should now be able to activate the plugin in WordPress and get started.
In this tutorial, I will be using this custom plugin (which you can download at the end of this article) along with Twenty Fifteen, the current default WordPress theme.
Once you have an API key there are three things you need to do next:
- Create an empty element for the map, and
The general form is:
To enqueue this script we’ll use the
wp_enqueue_scripts hook in our plugin.
When defining the location of the script, note that I’ve left out the protocol (HTTP) and the colon. This is recommended because the request will use the more secure HTTPS if your site uses it, otherwise it will fall back on HTTP.
The Basic Shortcode
Let’s create a very simple shortcode now, which will just output the empty element.
To get a unique ID I’ve taken a string as the base which contains the local time. Right now this would be “Google Map1440658708”. I then generated an sha1 hash from it which looks like this: 194567aaa0785d40c4af5a5536533497bf49541b.
I created a shorter string from this mess by defining a random starting point (between character 2 and 10) and a random length for the string (between 5 and 8).
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
At the end of the day, our empty element will look something like this:
<div class="map" id="map-7f51e"></div>
Let’s add a basic Hello World example by hard-coding a specific location and view.
The following will show a map centered on Yellowstone National Park in Wyoming (a thoroughly awesome place!).
I used output buffering to make the code a bit clearer. Everything after the
ob_start() function goes into the buffer instead of being output.
You can then capture the buffer and clear it with
ob_get_start() – a nice way to get complex HTML generated by PHP into a variable.
callback=initMap. If you rename the callback in the file, you’ll need to rename your function as well.
The function creates a new
google.maps.Map object, passing it the element and some parameters. The two parameters we’re using are
center, which defines the center point of the map, and zoom, which defines the zoom.
At this point, all we have to do is add parameters to the shortcode and make sure they are picked up. In a real world scenario, I would advise moving the inline styling into a CSS file, of course.
Adding Shortcode Parameters
To make the example more useful, let’s allow users to define the center point with a lat and lng parameter and set the zoom level. While there, let’s make sure the map height can also be changed.
As you can see, it’s a matter of using
shortcode_atts to grab parameters and then replacing hard-coded values with PHP variables. I can now use
[map lat='47.4925' lng='19.0514' zoom='10' height='200px'] to create a narrower map, centered on Budapest.
Creating awesome functionality with shortcodes is easy, especially when coupled with great APIs like Google Maps.
There is a lot more room for improvement, like using addresses instead of coordinates using the Geocoding API, and adding Google Street View, pins and more.
Do you use maps on your site? How many maps is too many on one site? How easy do you think it is to create your own plugin on a scale of one to 10? Let us know in the comments below.