Although the map can’t automatically connect to other elements on the page, we can create custom code to trigger events outside the map. In this case we’ll explain how to trigger a click on a button created with Elementor when a region or marker is clicked. This could be used, for example, to open an Elementor Popup, that gets triggered by the button.
When creating your button, the important thing is that it contains a unique ID, like the screenshot shows.
Your button can do whatever you need it to do. A common use case is that the button will open a Popup created by Elementor. You need to setup your button accordingly. You can also hide the button if needed, but it needs to exist on the page and have a unique ID, so we can identify it when the time to trigger the click comes.
This button needs to exist on the same page of your map.
Once you have your button or buttons created, you can edit your map. You’ll need to place the button ID in the ‘Action Content’ field of your region or marker, with the following format:
a#myUSbutton
OR
#myUSbutton
Like in this screenshot below:
If you have other buttons for different markers or regions, you should do the same for the others.
The second step will be to set the click action to ‘Custom’ so we can add our custom code:
The code to be used is the following:
//we set a timeout just in case
setTimeout(function(){
let selector = data.content;
let link = document.querySelector(selector);
link.click();
},350);
Now when you add this map to the same page of the button, when the region or marker is clicked, it should trigger a click event also in that button, triggering the event associated with that button.