Follow

Can I filter out results on the Map By default?

Many users have requested the ability to have a specific type of location displayed by default, while still having access to other locations added to the map. For example, perhaps you only want to display "campgrounds" by default, but also would like to allow results for "Hotels" if chosen by your users in the dropdown.

 

While not available directly as a part of the plugin, the needed functionality can be achieved using a little bit of JavaScript:

$(window).load(function(){
$('select[name="cm_tag"]').val(TAG_TERM_ID).trigger('change');
});

The example uses window.load() but document.ready() may also work. TAG_TERM_ID should be replaced with the internal WordPress tag ID for the particular tag you want selected when the page loads.

22 Comments

  • Avatar
    Rwilson

    How can I get this to work with the latest version of MapifyPro?

    (Assume my tag id is 16) do I use val('16') or val(16)?

  • Avatar
    Rwilson

    I figured it out (there may be a better way to do this):

    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(TAG_ID).trigger('change');
    });
    })(jQuery);
    </script>

  • Avatar
    Francisco Reyes

    Where do I have to add this piece of code?

  • Avatar
    Rwilson

    Hi Francisco,

    You can call it from your functions.php, and have it add to WP_Head.

    I'll give you two examples (and I'm going to add some extra detail for others who may come to this page as well.)

    **** EXAMPLE 1 ****
    // Adds the custom Mapify Pro filter script, inline to the wp_head on all pages of your website. The if condition makes sure the Jquery file has already been loaded before adding. Change 99 to match the ID you want to filter for on default.

    function mapifypro_filter_custom_script() {
      if ( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
        (function($){
            $(window).load(function(){
              $('select[name="mpfy_tag"]').val(99).trigger('change'); 
            });
        })(jQuery);
    </script>
    <?php
      }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );
    

    **** EXAMPLE 2 ****
    // Adds the script custom Mapify Pro filter script, inline to the wp_head only the page you specify. If you only have a map on one page, there is no need to load the script on other pages. Same as above with the ID. Also just replace 'SLUG' with the page slug of the page you want this to load on.

    function mapifypro_filter_custom_script() {
    if ( is_page( 'SLUG' ) && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
        (function($){
            $(window).load(function(){
              $('select[name="mpfy_tag"]').val(99).trigger('change'); 
            });
        })(jQuery);
    </script>
    <?php
      }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );
    

    Hope this helps.

  • Avatar
    Robert Bernaerts

    Hello Rwilson,

    Many thanks for this great solution.

    I would like to use example 2. I use Avada and added the code above in the header via the Avada menu.

    The filter is working properly, however at the very bottom of the page it gives code at the frontend,please see below. Do I need to do anything else than adding the code to the header? 

    "function mapifypro_filter_custom_script() { if ( is_page( 'granfondo-mont-ventoux' ) && wp_script_is( 'jquery', 'done' ) ) { ?>"

    Thanks
    Robert

  • Avatar
    Rwilson

    "The filter is working properly, however at the very bottom of the page it gives code at the frontend"

    If I am understanding you right, the code is being printed on the frontend of the website (so visitors can see PHP).

    When you say you added it via the Avada menu, do you mean the Theme Fusion editor (i.e. https://theme-fusion.com/wp-content/uploads/2013/09/fto_generaltab.jpg )? You can't add PHP in any of those fields, it strips out the PHP, and that is why it is showing up on the front end.

    So you have two options:

    1. Add it via the functions.php or custom_functions.php in Avada as I described.

    2. Only add the code between the < SCRIPT > tags to the Head via the Avada Menu.

     

    Hope this helps!

     

  • Avatar
    Robert Bernaerts

    Hello,

    Thanks for your answer. Please forgive me my ignorance, but I can't this seem to have done...

    After reading your reply it is clear for me I can't add the whole code to the Theme Fusion editor, which indeed was what I meant.

    So I added the code below first to avada/framework/custom_functions.php (at the end), but this didn't work. I mean the filter didn't work.

    After that I tried changing the avada/functions.php, but this didn't work either..

    The code I used is as follows:

    function mapifypro_filter_custom_script() {
    if ( is_page( 'granfondo-mont-ventoux-route' ) && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(167).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

     

    Hopefully you can help me out. Thanks!

    Robert

  • Avatar
    Rwilson

    I'm thinking your issue could be:

    A. The page slug you are using is wrong

    B. The select name tag is now different (there have been several updates since I posted this)

    C. You may need to replace 'wp_head' with 'wp_footer' in the function above, see if that works.

    D. '$' is causing a conflict and you need to use 'jQuery' in place of '$'.

     

    Do you have a URL to see this web page or are you developing on your computer? I might be able to point it out if you have a URL I could view.

     

  • Avatar
    Robert Bernaerts

    Hi,

    Sorry I had to rechange and put the first script you gave above on the website because of needed functionality.

    Could you  please let me know when you could have a look then I can rechange it again with the 2nd script with php.

    Thanks

  • Avatar
    Rwilson

    "Could you  please let me know when you could have a look then I can rechange it again with the 2nd script with php."

    You never sent the URL for me to look at...

  • Avatar
    Robert Bernaerts

    Hello did you see my reply now?

     

    Thanks

  • Avatar
    Rwilson

    No. It is probably filtering out your URL.

  • Avatar
    Robert Bernaerts

    Hi,

    Lets try again. Three replies are still status "pending approval", in one of these messages there is not an url, so no clue why it is filtered.

    Anyway I try again now:

    - I added the script above to the custom functions file

    - The url is http://goo.gl/xxlKfc

    Hopefully you can help me out. Thanks.

  • Avatar
    Rwilson

    Thanks for posting your link, I figured out the problem.

    The URL you provided is not a 'page' it's a 'post'. The function I wrote checks if the PAGE is granfondo-mont-ventoux-route.

    If you do "view source" and search for this script, it isn't on the page.

    (The post ID is 13312, which I got from the Body Class.)

    I have updated it below

    ```

    function mapifypro_filter_custom_script() {

    if ( is_single(13312) && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(167).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

    ```

    If for some reason it doesn't show up in your source code or still isn't working, replace with this one below (NOTE: it will load on all Post Type pages.)

    ```

    function mapifypro_filter_custom_script() {

    if ( is_single() && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(167).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

    ```

    If it still doesn't work, and the code IS showing up in the source code, try disabling W3 Total Cache for that page. 

     

    Hope this helps!

  • Avatar
    Robert Bernaerts

    Hi,

    Many thanks. It is working now!

    Stupid thing is I thought about it before wether the script would have to be different for posts, but after googling a bit I thought it would work for posts aswell. Well, I was wrong...

    I first tried your new script for one post and it is working. Because I've more maps where I would like to show only specific map tags after loading I tried the following, which is working for me on both maps now.

    After trying to read the script I thought I would have to give the function a unique name like function mapifypro_filter_custom_script1 and then in the action line call this specific script. Is this the correct way if I would like to filter out results on more map (posts) ?

    "function mapifypro_filter_custom_script() {

    if ( is_single(13312) && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(167).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

    function mapifypro_filter_custom_script1() {
    if ( is_single(13090) && wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(160).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script1' );"

     

  • Avatar
    Rwilson

    I have a comment Pending Approval...

    Did you end up getting it to work the way you detailed?

  • Avatar
    Kiza

    Hi!

    I used the code from option 1, BUT the map re-loads in order to show the change. 

    function mapifypro_filter_custom_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(16).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

    Is there a way to make it load the change the first time with no second load?

    http://livevillagewest.com/location/

    Thanks!

  • Avatar
    Pablo Ferrer

    Hello,

    I have found this workaround but this feature it´s completely a must in the Mapify Pro plugin.

    It doesn´t make any sense that the first view of a custom map is the main view of the main map.

    At least, it should be selectable from the Admin which is the main view of the map you are working on.

    Regards.

  • Avatar
    Rwilson

    @Kiza - Since it's a Window Load function, maybe you don't really need to wait for jQuery.

    (All I removed was the condition at the top, and the second bracket at the bottom).

    Try this and see if it makes any difference.

    function mapifypro_filter_custom_script() {
    ?>
    <script>
    (function($){
    $(window).load(function(){
    $('select[name="mpfy_tag"]').val(16).trigger('change');
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action( 'wp_head', 'mapifypro_filter_custom_script' );

    If it doesn't, there may be a way to do it by temporarily hiding the visibility of the entire map div on page load, then fading it in after a few seconds with jQuery (so it can load and reset the pins without anyone seeing it.) That's a little more complicated, hopefully above works better.

     

     

  • Avatar
    Rwilson

    @Pablo

    Just a heads up, I'm not the developer on this plugin. I just was answering a question on this thread and hopefully helping someone and save them time in the process.

    I'd recommend "Submitting a Request".

    It's a link in the top menu bar of this page.

  • Avatar
    Pablo Ferrer

    Hi @Rwilson,

     

    Thank you for your suggestion. I will!

  • Avatar
    Nick

    Can this also be used just to hide all categories?  I do not use categories for the map locations - nor do I want to.  BUT - I cannot have all of my locations load.  The user needs to search for their desired location first.

Please sign in to leave a comment.
Powered by Zendesk