Only load basic list after click of Search button

New home Forums Pro Add-on General queries Only load basic list after click of Search button

Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #54914
    lord
    Member

    Hi WP Google Maps,

    Great plugin, we love it, and we have purchased the Pro version.

    We have managed to hide the basic list upon load of page by using some custom JS. But the problems are:

    1. On click of Search button, the whole list shows up, then after a few seconds the filtered result (we have quite a lot of locations added, so it takes a while for them to load).
    2. On click of Reset button, we’re able to hide the list including the pagination, but after a few seconds the pagination shows up again.

    So our questions are:
    a. Is there an easier way to load the basic list only after someone has searched?
    b. If none, any tips on how to show the list only after the list has been filtered? (We want to avoid showing the full list, even for a few seconds only, as that might cause some confusion to users.)
    b. Any tips on how to hide the pagination on click of Reset button? We know it’s showing after a certain event has fired/loaded, how do we override it?

    Thank you,
    Lord

    #54968
    Dylan
    Moderator

    Hi there,

    Thank you for getting in touch, we do appreciate your time.

    Yes, that is correct, at the moment the built-in functionality to hide markers until a search is done will not affect the basic list marker listing.

    The reason the data is not consistently shown/hidden with the custom JavaScript you have implemented is that we have internally managed events which fire when the data on the map is updated.

    It is possible to use these events within custom JavaScript to make alterations to the behaviour.

    Would you be open to sharing a link to your map on your website with me? This would allow me to look at the custom code you have added, and provide you with a new snippet which achieves the same results without any elements reappearing/showing up early.

    I look forward to hearing back from you.

    #54969
    lord
    Member
    This reply has been marked as private.
    #54977
    Dylan
    Moderator
    This reply has been marked as private.
    #54982
    lord
    Member

    Hey Dylan,

    No, you are the tremendous help here!! It works perfectly now! 😀

    Many thanks!!!

    #55008
    Dylan
    Moderator

    Hi again,

    Fantastic news, so glad to hear that helped!

    Please do let me know if you ever need anything else, I would gladly assist.

    Have a great day! 🙂

    #55782
    lord
    Member

    Hi Dylan,

    It’s me again! So one more thing – how do we hide the div for the basic list when there’s no result? Right now it’s still showing some blank space which I personally find annoying!

    We’ve gone live and I can now share an actual link: https://honeykidsasia.com/singapore-schools/

    🙂

    Cheers,
    Lord

    #55800
    Dylan
    Moderator

    Hi again,

    Good to hear from you again! 🙂

    I am glad to hear you have gone live, the site looks great!

    I believe adding the following code to your custom JavaScript block should hide the marker listing when no results are found:

    jQuery(window).on('markerlistingupdated.wpgmza', function(){
    	if(jQuery('.wpgmaps_blist_row').length == 0){
    jQuery('.wpgmza_marker_list_class').hide();
        }
    });

    I hope this helps?

    Kind Regards,
    Dylan Auty

    #55818
    minion89
    Member

    Thank you for sharing this wonderful data with us. Very valuable article. Really add value the way you described everything in this article. Keep up the good work

    [url=https://boxnovel.net]boxnovel[/url]

    #55841
    lord
    Member

    Thanks so much Dylan!!! And yes, that code works!

    Might be unrelated, but the map doesn’t show in full today? Any idea why?

    https://honeykidsasia.com/singapore-schools/

    #55852
    Dylan
    Moderator

    Hi again,

    Fantastic news, so glad to hear the code worked as expected.

    I had a look at the site and found the cause of the map tiles not displaying as intended.

    It appears it is as a result of the following CSS:
    .hka-school-map .wpgmza_map .gm-style div { max-width: 250px !important; }

    Removing this locally resolved the issue on my side. Could I ask you to remove this CSS in an attempt to resolve it permanently?

    We can then look into what the CSS was intended for and I can help you create a new bit of CSS to achieve the desired result. 🙂

    Looking forward to hearing back from you.

    #55853
    lord
    Member

    Ahhh, I knew it was caused by the CSS that I added. Thanks!

    So the reason I added that was because the info window doesn’t seem to be centered? I was trying to limit its width. Any idea how could I control that? Sorry, it’s gone off topic!

    #55857
    Dylan
    Moderator

    Hi there,

    No problem at all, happy to help wherever possible.

    Please try adding the following CSS to your site:

    .hka-school-map .wpgmza_map .gm-style .gm-style-iw-c{
      padding: 0 !important;
    }
    
    .hka-school-map .wpgmza-infowindow{
      width: 230px !important;
      padding-left: 20px !important;
      padding-bottom: 20px !important;
      padding-top: 10px !important;
    }

    I believe this should centre the info-windows without altering any other structures.

    I hope this helps?

    #55858
    lord
    Member

    Hey Dylan, that worked perfectly!! I owe you so much! Thank you! 😀

    #55860
    Dylan
    Moderator

    No problem at all! Happy I could help! 🙂

    Please do let me know if you ever need anything else.

    Have a great day further.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.