How to hide map until a search is made

Hi there,

The plugin does not offer that functionality out of the box, you will have to do some CSS hacks to get that effect, but unfortunately we have never tried that ourselves, sorry about that!

Thanks for replying. I thought of using CSS to hide it but I can’t find any way to target the map on page load but not once the search is complete.

any ideas?

Hi again,

Unfortunately I can’t come up with any ideas for what you want to do, since the classes and the markup is the same regardless of the map being on page load or in a subsequent search, sorry about that!

Thanks for trying Farroyo

For anyone stumbling across this in the future… I hid the map with display:none; initially and then added a class to it on button click using Javascript…

// Get references to the DOM elements
const gmapElement = document.getElementById("wpsl-gmap");
const searchBtnElement = document.getElementById("wpsl-search-btn");

// Add a click event listener to the search button
searchBtnElement.addEventListener("click", function() {
  // Add the "active" class to the gmap element
  gmapElement.classList.add("active");
});

Then set the active class to display:block;

Hi again,

Many thanks for that solution, it’s clever! I hope it helps other users.

Regards,