Using The Google Maps API and WordPress

One of the challenges that comes with working with any new API is learning how to use it. And by that, I mean generally overcoming the learning curve – and I believe that this

Some libraries and frameworks have some relatively easy APIs once you grok the basics (and I think WordPress falls into this camp), and others don’t necessarily have the easiest APIs (such as, say, Google Maps).

The thing is, it’s different for all of us. What’s easy for me may not be easy for you and vice versa, and that’s okay. I think we need to stop treating one another as if it says something about our intelligence if we aren’t able to pick up something as fast as someone else.

That’s probably content for another post.

Anyway, for the past few months, I’ve been doing more work with the Google Maps API than I’ve ever done thus far in my career. All of the work as been done within the context of WordPress, but none of it has been WordPress-specific.

By that, I mean that the work that I’ve done is used within a WordPress plugin but there’s nothing that requires WordPress for it to run – the code could be abstracted and generalized into a standard PHP application and used.

I don’t write about that, though. I tend to keep my focus on what it’s like to work with WordPress in a professional capacity. So over the next few posts, I thought it might worth taking a look at some of the ways that you may want to employ the Google Maps API in your project, what it entails, and how to get started with it so you have some clue as to what you’re doing whenever you need to build something with the API.

The Google Maps API and WordPress

To be clear, the Google Maps API is actually a collection of APIs – there’s not one single API for us to use. Instead, there are these APIs that fall under the umbrella of Google Maps that allow us to take advantage of the data that Google maintains.

Google Maps

For example, some of these APIs include:

So where do we go from here? That is, how do we even know where to get started with a Google Maps project?

Honestly, it all depends on the nature of what you’re trying to build. I can’t speak for everyone who’s going to be implementing the API in their projects, but in my [limited] experience, I’ve found that I’ve always needed to start with the JavaScript API first and then build everything off of that.

Then again, that’s the nature of the work I’ve done thus far. Anyway, it still influences how this series of posts is going go.

For the purposes of the this article and the upcoming series, that’s what I’m going to cover. Ultimately, I’m going to be taking a look at a variety of the Google Maps APIs but, for the start of the series, I’m going to simply be setting up a simple template so that we can begin using the API – after all, we need a starting place, right?

Wait, A Template?

In short, I’m going to be using a template because they are far easier to integrate into an existing WordPress theme and to showcase how to achieve certain things with the Google Maps API than building an entire plugin.

Sure, a plugin is where you’re more likely to include this functionality, but blogging about all of this would just include a ton of boilerplate code to get the plugin off the ground and, frankly, that gets redundant.

So I thought I’d mix it up a little bit. If you’re an experienced WordPress developer, abstracting a lot of this code into a plugin shouldn’t be a problem. If you’re still new to WordPress development, this is likely not the best series to begin starting with – instead, I’d recommend into reading about how to build plugins with WordPress via the Codex, the WordPress Plugin Boilerplate, and more.

Here’s the challenge of running a series like this: The posts can get long. To that end, I’m going to be treating this as an introductory posts as to where I’m heading and then we’ll get into the actual work starting in the next post.

I know, sometimes having posts like this seem a bit pointless, other times they serve as a landing page for a series of articles so that we can bookmark them and come back to them later (and that’s what I’m intending to do).

Now Let’s Do Something

In the next post, we’re going to start taking a look at the following:

  1. Prepare The Template
  2. Create The Template
  3. Setup the necessary credentials so that we can query the API
  4. Include The Google Maps JavaScript API
  5. Display the map
  6. Add a marker for our home address
  7. …and more

Granted, we won’t be doing all of these in a single post, but we will be starting and working through this list so that, by the end, there’s a relatively comprehensive list of things that we can do with the API within the context of WordPress.

So if this is something you’re interested in following, bookmark this page and optionally subscribe to the RSS feed.

Series Posts

  1. Using The Google Maps API and WordPress
  2. Integrating Google Maps in WordPress
  3. Displaying Google Maps in WordPress
  4. Google Maps in WordPress: Adding a Marker
  5. InfoWindows for Google Maps in WordPress
  6. Refactoring Our Code For Google Maps in WordPress

2 Replies to “Using The Google Maps API and WordPress”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.