This sounds similar to what was discussed here... Rogue Button Behaviors on animation ...and basically I suggested simply using JavaScript.
Are you having the same problem?
If so, I'll have a YouTube video online in a few of days. (Hopefully, HA HA!) It sounds like I picked a useful topic. But if you don't want to wait, here's the short version...
First, select all the elements...
var maps = document.querySelectorAll(".🗺"); // Don't forget the dot, very important 😊
(Yes, I use emoji as class names — it's valid 
)
Then, I just hide them all...
maps.forEach((e) => { e.style.opacity = 0; });
So basically, that's what I do.
Then, I make the elements I want appear. In this case, it's changing the opacity, but changing the display is also another option.
Here I get the selected map from the form/input...
var selectedMap = document.querySelector("input[name='🌎']:checked").value;
...and then I make it visible...
document.getElementById(selectedMap).style.opacity = 1;
I'm really excited about this video, so maybe it will be helpful to you too when it's done. It should be easier to understand when you can see it.