Search Filter Pro Ajax call and Google Maps

Anonymous

#191023

Hi,

I’ve been using Advanced Custom Fields map feature (https://www.advancedcustomfields.com/resources/google-map/) to load all locations into a map. When the page loads the map will render. I’ve used the .js file in the link above. It works great, and your plugin will load the results on first try.

However when adding a filter the page wil refresh using ajax, but the map won’t render with the new locations. How can I call maps.js again after the ajax call from Search Filter Pro?

Thansk!

Trevor

#191028

It MIGHT be something like this:

(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.acf-map').each(function(){
      // create map
      map = new_map( $(this) );
    });
  });
}(jQuery));

Anonymous

#191044

Seems new map cannot be defined. I’m looking for a way so that the entire maps.js which I created can be reloaded after the ajaxfinish.

Trevor

#191050

It is possible that the old map needs to be destroyed before the new map is made. Would it need the map.remove() function to do this? You might need to ask the ACF guys that question.

Anonymous

#191083

Thanks Trevor.
I have added the code to my main.js, but even with debugging using console.log() to detect if even ajax has started nothing happens.

$(document).on(“sf:ajaxstart”, “.searchandfilter”, function(){
console.log(“ajax start”);
});

Does the class selector .searchandfilter have to there?

Trevor

#191085

Yes it does. If you are not seeing that message in the console, something is very wrong. Are there any javascript errors being thrown, which might halt javascript processing?

Anonymous

#191088

Nope, none.
I’ve tried various ways to implement the code. Ajax calls on another form works great, but even there the console.log won’t output. I’ll submit the url soon, it’s still on localhost for now.

Trevor

#191096

Ok, I will wait to hear back from you.

[Author]

Posts