As mentioned in the first post in this series, I’m going to be talking about a few of the different Google Maps APIs and how we can integrate them into our WordPress projects.
Rather than actually build a plugin that covers this material, I’m going to be creating a template to demonstrate some of this functionality. Though I’m a strong advocate for separating functionality and presentation, the work required to get a plugin up and running requires a lot of boilerplate code.
That isn’t inherently a bad thing, but I thought it’d be a chance of pace to simply introduce a template and then begin adding the necessary code from there (and making any changes to
functions.php from there).
At the end of the series, we can then take a look and see how to abstract all of the work that we’ve done into a child theme to use.
Google Maps in WordPress
The goal of this particular post is the following:
- Prepare and create the template
- Setup the necessary credentials so that we can query the Google Maps API
And when you’re used to doing things “the WordPress way,” this can sometimes cause problems. To that end, I hope to head off any problems that we may experience.
With that said, let’s go ahead and get started. For this particular tutorial, I’m assuming that you’re running:
- WordPress 4.2.2
That’s it. Other than that, we’ll be creating everything else from the ground up. To that end, let’s get started.
Creating and preparing a template for something like this is arguably the easiest step. Sure, we could get pretty involved with displaying a variety of different content, but in order to keep this as simple as possible, let’s simply define a template that includes the requirements:
- The template tag (in PHPDoc format
- A call to
- A call to
I’m not going to worry about adding any content since the focus all of this is to display a map and to add more detail to it.
Save this file in the root of the
twentyfifteen directory and name is
template-maps.php. Assuming you see everything right, you should be able to locate the template when you attempt to add a new page and apply a new template:
At this point, we’re going to hop out of WordPress and into the Google APIs in order to get our credentials.
Getting API Credentials
Once it’s activated, you’ll be able to copy it from the page to which the console directs you.
When you have this string, keep the browser tab open, save the API key to a file to which you can reference later, or place it in a code comment somewhere in your project as it will be needed in order to begin making requests to Google.
Include The API
wp_enqueue_script; however, there are some potential gotchas that I’ll cover in just in a little bit.
In the meantime, the library will be included using a standard
At this point, return to WordPress, create a new page, and apply the template that we’ve created thus far. Assuming all went well, then a blank page – save for the header and footer – should load and you shouldn’t have any errors in the console.
As far as the
wp_enqueue_script call, I’ll revisit this in a future post.
If this is the case, then the console will actually provide a message that says the library has already been included. For the purposes of this series of articles, we’re assuming that no third-party plugins or features are included that already include this script.
If you encounter this error in the console, let me know in the comments and perhaps we can figure it out.
If you’ve gotten this far without any problems, then things are going well. If you have experienced any problems, let me know in the comments and we’ll go from there.
Anyway, in the next post, we’ll look at what’s needed in order to actually begin rendering a Google Map. It’ll be significantly shorter than the content of the first two posts in this series, so it should be a bit easier to follow and less time-consuming to do so.
Up until this point, there was a lot of initial material to cover. Now that we’ve reached this point, it should be easier to look at each point in more detail without so many requirements to get up and running.
So I’ll continue with all of that with the next post in the series.
- Using The Google Maps API and WordPress
- Integrating Google Maps in WordPress
- Displaying Google Maps in WordPress
- Google Maps in WordPress: Adding a Marker
- InfoWindows for Google Maps in WordPress
- Refactoring Our Code For Google Maps in WordPress