Adding Google Maps to WordPress with Your Own Quick Shortcode

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…

  1. Create a folder named my-google-maps-shortcode in your site’s “plugins” directory.
  2. Create a file named my-google-maps-shortcode.php in 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.

The Google Maps JavaScript API

To get going, we’ll be using the Google Maps Javascript API. You’ll need a free API Key so follow the steps in the documentation to get one.

Once you have an API key there are three things you need to do next:

  • Link the Google Maps Javascript,
  • Create an empty element for the map, and
  • Create a map in the element using basic JavaScript.

Step one involves enqueueing the official JavaScript file with a special parameter that holds the API key.

The general form is: http://maps.googleapis.com/maps/api/js?key=API_KEY8&callback=initMap.

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

Our shortcode will need to output an empty element and some JavaScript. Depending on the parameters of the shortcode we can change the JavaScript to suit our requirements.

Let’s create a very simple shortcode now, which will just output the empty element.

As you can see, I’ve created a unique ID for each element. The ID of this element doesn’t have to be consistent between page loads, but it should be unique on the page to make sure the JavaScript can target it later on.

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).

At the end of the day, our empty element will look something like this: <div class="map" id="map-7f51e"></div>

Hard-Coded JavaScript

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.

Map Shortcode Example
An example of a map generated by our shortcode

Our JavaScript contains a function named initMap. This function comes from the very end of our JavaScript file reference which is 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.

Modified Map Shortcode
A modified map shortcode with parameters

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.

You can download this basic example plugin, or download our own Google Maps plugin, which will give you access to traffic overlays, street view, responsive maps, current location 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.