ACF multiple map markers with toggleable infowindow popups.

I will be showing you guys how to modify the code found on the Advanced Custom Fields (ACF) website (See here). You’ll need to have a WordPress website to use the ACF Plugin however, the JavaScript the documentation provides can be used without the need of the plugin. I have set up a codepen that you can use to follow along in this post with the final version at the bottom of the post.

Fork this pen to follow along with the post. I will share the final code at the bottom of the post.

Current Issue

If you run the current version of the map, you’ll see that you are able to click on multiple markers and their info-windows will stay open. This causes some of the windows to overlap and cover the information, which is not what we want. What we will be doing is, closing all open popups and open the popup that the user selected. We’ll also be making it in a way that you’ll be able to use an external button outside of the map, to toggle the popup window.

Let the fun begin

The first thing we need to create is two variables to store the markers and infowindows. These two variables will be an array, we’ll be able to loop through each on or select an individual one to toggle. We’ll be doing this at the top of the document.

Creating global variables

Next, in the add_marker function we’ll be making a few changes. First under the line map.markers.push( marker ); we want to push the marker into the global_markers array we just created. A little further down we see that a new InfoWindow is created. Below that declaration we want to push the newly created infowindow variable into the global_infowindows variable. Lastly we want to remove the block of code that adds and event listener to the marker. This is what is currently being used to toggle the info-windows. We’ll be recreating this shortly. Below you’ll see the completed code for this step.

Pushing marker and infowindow variables into global variables.

Now that we have an array of all the markers and info-windows, we are able to start adding the toggling functionality. We will have access to methods such as open(map, marker) and close() for each of the info-windows. Read the Google Documentation for the InfoWindow Class Object, if you want to see other options that you are able to use.

First we’ll create a function to close all currently open info-windows. We’ll need to loop through the array and call the close() method. Create the function before the $(document).ready() declaration. We’ll just be using a simple for loop to do this.

Loop through each of the infowindows and call close() method

Now we’ll need to add the loop that will add the event listener to the markers to show the info-window popup. We will be adding this loop inside the new_map function which is at the top of the JavaScript file.

Attach a click event listener to each of the markers

You should now be able to click on the different markers. Active info-windows will close and a new info-window will open. Next we want to activate the popups without having to click on the map itself. Because we attached the open method to a click event, we’ll be able to use the google.maps.event.trigger(marker, event) on the marker object that we want to see information of. I will only be adding in one button to the codepen as an example. We’ll first need to create a button underneath the .acf-map element.

Add button to html

Next we need to create the click event for the button and trigger the infowindow to open. We’ll be adding this code in the $(document).ready() declaration, and below the each method which is creating the map.

Trigger infowindow popup

This will show the infowindow related to the first marker. The order of the markers in the array is equal to the order of the .marker divs. You’ll be able to substitute the [0] for any index. You can do this by adding a data-marker="idx" (where idx is a number eg. 1) to the button. Then triggering the click event for that marker and using [idx] instead of [0]. You’ll be able to see this action in the final codepen.

You may have noticed that we did not call the closeInfowindows() function when firing the click event on the button. This is because, when we attached the click event to each of the markers we called the closeInfowindows() function. So no need to call it again.

Finishing up

You should now be able to toggle between the infowindows and not have all of them active at the same time. In the final codepen, I have also added in a custom marker icon so you can see an example of that as well. If you are also sick of seeing the default Google Maps style, you can use this to edit the style of the map to your liking. As promised, here is the final code on codepen.

You can also view this code in a GitHub Repo I have created.

Thank you for reading this post, I hope that it has been useful! :D