We need to hide a map in 'something' for mobile users. Essentially a map on desktop is always visible. for mobile it's hidden giving someone the choice to use it or not.
If we add the map code to a modal, it breaks the fit bounds on.
If we add it to a JQuery option we hit an different issue.
See for example purpose: hidden link
Click View map (top left)
This isn't working because we have added to the container div display:none;
This so the starting point, the container is hidden and when the button clicked, it shows.
If we remove display:none; the map works great however it's not hidden to start with.
Seems no matter whether we add a map short code to a modal, tab or now JQ something always breaks it.
Have you tried adding the map to an accordion ? For instance it will be a toggle, so the user can click a button to toggle on/off the section that contains the map.
we have tried it in all kinds, from when we used Elementor to Kadence....adding the map to anything nested busts the 'fit bounds on'.
This more an issue now as we have a newer site covering parts of Europe....here we need to use fit bounds on, this works fine on the desktop version of the map, the mobile version in anything where we hide it breaks.
Currently this page has a popup version of the map, resize your browser and you'll see the map search appear just under the search bar.
