One of the nicest things about the markers in Google Maps is the information that we can get whenever we click on them; however, up until this point, our implementation of Google Maps in WordPress doesn’t display anything when you click on the marker.

For those who have tried, you know it doesn’t actually do anything. But that doesn’t mean it can’t [obviously]. So in this post, I’m going to cover how to create a display whenever the user clicks on a marker on the map.

I’ve covered something like this in a previous post, though it wasn’t done in the context of a series that was aiming to go from end-to-end with an implementation of the Google Maps API so if you’re already familiar with how to do this, then this particular article may not be that useful.

On the other hand, if you’ve been following along since the beginning then this is the next step that we’re going to take.

Continue reading

In the previous post, we added our first map to the template that we’ve been working on throughout this series.

Through a third-party tool, we ended up getting the latitude and longitude of a city in order to center the map, and though we still have refactoring that we’ll need to do, we successfully displayed the map on the screen.

But part of the lure of using Google Maps is the feature that it offers as it relates to marking certain locations. That is, displaying one of those little red pins that Google Maps shows when you’re browsing for a location, a destination, and so on.

So starting in this article, I’m going to walk through the process of adding up to two markers.

Over the next few articles, I’ll cover how to add multiple markers, and how to do so in a way that’s efficient when it comes to loading up the map on subsequent requests so you’re not exhausting you’re API calls every single time you need to render the map.

Continue reading

If you’ve been following along with this particular series, then you’ve got a template setup and ready to begin displaying Google Maps in WordPress.

For whatever reason, if you’ve just stumbled across this series, then I’ve shared a basic introduction of the topic as well as how to setup a template within Twentyfifteen in WordPress 4.2.2 or how to display a map.

Those particular articles were a little longer than I usually like to share for posts like this, but I needed to get a few things setup before actually diving into the main points of this series.

Case in point: In this post, I’m primarily going to be talking about how to communicate with the Google Maps API to simply display a map – that’s it. Nothing more. Sure, there’s a lot more that can be done, and I plan to cover a lot of that material, but for now we just need to get a map displaying in our template.

Continue reading

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.

Continue reading