Show Map & Results only after Submit Button Clicked

jQuery('#wpsl-gmap"').show();

Should be this.

jQuery('#wpsl-gmap').show(); or jQuery("#wpsl-gmap").show();

You had “‘

Hey – thanks for catching that. This was merely a typo in my post. I’ve tried this and also tried submit function. For some reason, it’s not working. I think it has to do with it being outputted through ajax but can’t figure out a ajax function

This was my latest code but still can’t seem to get the map triggered to show :S In theory, this should work.

<script>
jQuery(document).ready(function(){
jQuery('#wpsl-gmap').hide();
 jQuery('#wpsl-search-wrap').submit(function() {
    jQuery('#wpsl-gmap').show();
});
});
</script>

Try to simple hide the map and the search results list with CSS, then use ajaxComplete to run code after the ajax call finished to show the divs.

Use the ajaxComplete code in a separate JS file you load from the functions.php with wp_enqueue_script.

Thanks for the suggestions ?? Super nice dude!

Still no luck for me. I’ve also tried in the settings to turn off ‘Load locations on page load:’

CSS: #wpsl-gmap {display: none;}

<script>
    jQuery(document).ajaxComplete(function() {
    jQuery('#wpsl-gmap').show();
});
</script>

I’ve even tried plugging in prevent default :S I know this is out of your scope. You taking the time to even respond and help is much appreciated.

• This reply was modified 6 years, 10 months ago by thisisbolo.

Try to disable all other themes / plugins and then try again.

Write console.log(‘test’); in the ajaxComplete func and make sure it’s actually called in the browser console.

It writes to the console log but for some I can’t get the #wpsl-gmap to trigger to show

<script>
    jQuery(document).ajaxComplete(function() {
    console.log('test');
    jQuery('#wpsl-gmap').show();
});
</script>

Ok – I got this somewhat working. In the settings of the plugin, I had to unselect Attempt to auto-locate the user: OFF & Load locations on page load: OFF

The auto-locate was triggering the ajax to fire before hitting the submit button. I found this function event.stopPropagation(); to try and stop the geolocation for starting but I don’t think I’m using it properly. Below is the supporting Javascript. Only problem is the map renders all grey. Almost there!!!

<script>
jQuery(document).ready(function(){
jQuery('#wpsl-gmap, #wpsl-stores').hide();
    jQuery(document).ajaxComplete(function() {
    jQuery('#wpsl-gmap, #wpsl-stores').show();
    console.log('I just finally revealed this friggin' map');

});
});
</script>

• This reply was modified 6 years, 10 months ago by thisisbolo.

@tijmensmit Thanks for helping me through this and providing me with the right resources to learn from. What are your suggestions on getting the geo-locate to not fire the store results. Is the event.stopPropagation(); the right thing to use? And if so, then where do I used it?

Ok – I did a bit more research, I think what I need to do is refresh the map when it shows again. Do you know what the function for that is? Or what you may have defined the map as?

I found something like this but obviously I don’t have the right map definition so console returns that the ‘map’ isn’t defined.
google.maps.event.trigger(map, ‘resize’);

I think what I have to do is this…

<script>
jQuery(document).ready(function(){
jQuery('#wpsl-gmap, #wpsl-stores').hide();
    jQuery(document).ajaxComplete(function() {
    jQuery('#wpsl-gmap, #wpsl-stores').show();
    // Do something here to refresh the map so it's not grey
    console.log('I just finally revealed this friggin' map');

});
});
</script>

I’ve done more research and I think I’m on the right track but the maps still grey, it not focused on the markers. I’d also be open to suggestions on how to not have the auto geo locate trigger the listing right away ??

<script>
jQuery(document).ready(function(){
     jQuery('#wpsl-gmap, #wpsl-stores').hide();
    
     jQuery(document).ajaxComplete(function() {
          jQuery('#wpsl-gmap, #wpsl-stores').show();
          console.log('You just revealed the map');
          var center = map.getCenter();
          google.maps.event.trigger(map, 'resize');
          map.setCenter(center);
          });
});

</script>

Ok – one step forward. Now I just need to figure out how to make the map entered to the markers. This at least gets rid of the grey and actually shows a map but not quite there yet.

<script>
jQuery(document).ready(function(){
jQuery('#wpsl-gmap, #wpsl-stores').hide();

    jQuery(document).ajaxComplete(function() {

jQuery('#wpsl-gmap, #wpsl-stores').show();
    
    google.maps.event.trigger(jQuery('#wpsl-gmap')[0], 'resize');
    
});
});

</script>

You are showing the map in a tab / hidden nav?

There’s code already included in the plugin that fixes this issue, but you will have to call it manually.

Hi @tijmensmit – I’ve tried possibly every combination of code I could think of from the link you shared. I keep getting CurrentMap is undefined. How do I pinpoint the map? All I really know is the div id #wpsl-gmap.

I’m not showing the map in a hidden nav, i’m hiding #wpsl-gmap and then showing it when the user enters address and clicks submit.

The below code works. I just need some help centering the map to the markers. Any thoughts? I’m actually stumped at this point :S

<script>
jQuery(document).ready(function(){
jQuery('#wpsl-gmap, #wpsl-stores').hide();

    jQuery(document).ajaxComplete(function() {

jQuery('#wpsl-gmap, #wpsl-stores').show();
    
    google.maps.event.trigger(jQuery('#wpsl-gmap')[0], 'resize');
    
});
});
</script>

@tijmensmit Any suggestions on how I can manually call this in the code you’ve supplied? Just need to centre to the markers.