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.
In order to make this happen, add the following code:
Obviously, there isn’t much to this code. In short, we’re instantiating an InfoWindow and storing the reference to it in the infowindow variable.
Next, we’re adding an event listener to the Google Map events such that when the user clicks on a marker, it fires the defined callback function.
In this case, it will open an InfoWindow given the specified map and marker.
But this is somewhat confusing, isn’t it? I mean:
- Where does this code go?
- To which marker is it associated?
- What about the content that it’s supposed to display?
All good questions. First, here’s the scope of the code as it relates to setting up an InfoWindow for our marker in Atlanta.
And we can easily do the same for the marker that we have set in Alpharetta:
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.
For example, take a look at the marker for Atlanta:
Then take a look at the infowindow for 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.
Leave a Reply
You must be logged in to post a comment.