InfoWindows for Google Maps in WordPress

June 12, 2015

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.

InfoWindows in Google Maps for WordPress

The way this works is relatively simple:

There should be a handler for the click event whenever the marker is selected

There should be data to display within the display that appears

In Google Maps API terms, the display that appears is called an InfoWindow so I’ll be referring to the display as an InfoWindow throughout the rest of the tutorial.

Display An InfoWindow

The first thing to do is to setup the code that will actually display the InfoWindow whenever a marker is clicked. I’m not really interested in what the marker will display at this point – I just want something to show up.

This still leaves a question though: How do we populate the InfoWindow with content?

InfoWindow Content

To display content in the InfoWindow associated with a specific marker, a new property has to be introduced to the marker object – specifically, the content property has to be introduced.

Additionally, a new line of code as to be added to the callback function that fires when the marker is clicked. This line of code will grab the content for the InfoWindow from the property of the marker that’s clicked.

Then take a look at the infowindowfor Alpharetta (as well as the final version of the source code up to this point):

Notice that a content property has been added to each of the markers that contains the text that will be displayed within the InfoWindow. Furthermore, note that although I’m not displaying it here, the content property does accept HTML so you can stylize the markup however you’d like when displaying it.

Anyway, once all is done, this will result in something like this when you click on a marker:

On Refactoring and APIs

At this point, the way in which we’re adding markers and InfoWindows is becoming common. I mean, that’s the point of an API, isn’t it? We make common calls to a set of pre-defined functions in order to trigger certain functionality.

As mentioned throughout this series, there’s still plenty of room for refactoring the code that we’ve done this far, so in the next post, I’m going to refactor the code that we’ve written thus far so that we have a more organized way to write code when working on the next few articles in the series.

Just Getting Started with WordPress?

I write a lot about WordPress development but if you're just getting started, I recommend checking out WPBeginner. They have free training videos, glossary, and more.

WPSessions hosts some of the best WordPress training you’ll find anywhere from many well-known speakers.

If there’s something you’d like to learn, and it’s not already covered here, it’s probably been covered at WPSessions. If you use the special link below you can watch your first session for free and get a steep discount on the full-access VIP membership.