ACF multiple map markers with toggleable infowindow popups.
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.
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.
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.
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
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
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.
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
 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
. 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.
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