How to edit the layout of map.

New home Forums Basic Version General queries How to edit the layout of map.

This topic contains 26 replies, has 3 voices, and was last updated by  dylboy 3 months ago.

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #49728

    ta26
    Member

    Hi,

    I want to modify the layout of searching area of store locator and the marker filter shown in the attachment. The default layout is not satisfying. How can I edit the css file? where can I find it?

    Regards

    • This topic was modified 4 months, 3 weeks ago by  ta26.
    Attachments:
    You must be logged in to view attached files.
    #49741

    Hi there,

    Thanks for getting in touch with us.

    You can add your custom CSS by going to Maps > Settings > Advanced Settings > Custom CSS and this CSS will be run on the frontend.

    I would be more than happy to also help you with the styling and provide you with custom CSS to improve this if you would be interested and if it would perhaps be possible to send me an example of how you would like it to look?

    I hope this helps.

    Best regards,
    Dylan

    #49763

    ta26
    Member

    Hi Dylan,

    Thanks for your reply. I just want to make this area more beautiful and modern.
    Could you please provide some CSS. Maybe similar to the picture in attachment but I also need the get user location button and keep the filter as checkbox instead of droplist.
    Thanks.

    Regards,
    TA26

    Attachments:
    You must be logged in to view attached files.
    #49770

    Hi TA26,

    Thanks and I would be more than happy to help you with this.

    Would you perhaps be open to sending me a link to your website with the store locator so that I can prepare the correct CSS for you to achieve this look?

    Thanks for your time and I look forward to hearing back from you and assisting you further.

    Best regards,
    Dylan

    #49772

    ta26
    Member

    Hi Dylan,

    The website url is plusi.world. The map is under Taichi and Open Gym page.
    We have tried to add some custom css but it is not desirable.
    Also, is it possible to show some messages like alert after searching if there is no result found?

    Best regards,
    TA26

    #49773

    ta26
    Member

    I found there already are function to show Not found message. I don’t know why it does not work. Is there any other settings to active this functionality or there are bugs.

    Attachments:
    You must be logged in to view attached files.
    #49775

    Hi TA26,

    Thanks for the response and the link. Could I kindly ask you to please add the following Custom CSS to Maps > Settings > Advanced > Custom CSS:

    .wpgmza_sl_main_div {
      display: flex;
      flex-wrap: wrap;
    }
    .wpgmza-form-field {
      flex: 1;
      padding-right: 10px;
    }
    .wpgmza-form-field input[type="text"],
    .wpgmza-form-field select {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
    .wpgmza_sl_query_div input {
      width: calc(100% - 43px) !important;
      display: inline-block !important;
      vertical-align: bottom;
      height: 40px;
      line-height: 40px;
    }
    .wpgmza-form-field__label {
      display: block;
      width: 100%;
    }
    .wpgmza_sl_query_div .wpgmza-use-my-location {
     width: 40px;
      text-align: center !important;
      padding: 0 !important;
      height: 40px;
      position: relative;
      display: inline-block !important;
      vertical-align: bottom !important;
    }
    .wpgmza_sl_reset_button_div {
      display: none;
    }
    .wpgmza_sl_search_button_div {
      height: 100px !important;
      line-height: 153px;
    }
    .wpgmza_sl_search_button_div input,
    .wpgmza_sl_query_div .wpgmza-use-my-location{
      background: #a0ce4e;
      border: none;
      color: #fff;
      border-radius: 0 !important;
      transition: .12s ease-in-out;
      cursor: pointer;
    }
    .wpgmza_sl_search_button_div input:hover,
    .wpgmza_sl_query_div .wpgmza-use-my-location:hover {
      background: #90ba44;
    }
    
    .wpgmza_sl_search_button_div > input {
      height: 40px;
      line-height 40px;
    }

    AND please add the following Custom JS to Maps > Settings > Advanced > Custom JS:

    jQuery(document).ready(function($){
    jQuery(".wpgmza_sl_category_div").insertAfter(".wpgmza_sl_main_div");
    });

    After adding, saving the settings and clearing your cache, can you please have another look and confirm if this is correct from your side?

    Thanks for your time and I look forward to hearing back from you.

    Best regards,
    Dylan

    #49785

    ta26
    Member

    Hi Dylan,

    Thanks! That helps a lot!

    I got other things need your help.

    1. I found there already are function to show Not found message. I don’t know why it does not work. Is there any other settings to active this functionality or there are bugs. Or is there any other way to pop up message to show “No result found” by js?
    2. I used checkbox for marker category. I wish to make some checkbox of the category such as “Taichi Spot” to be checked as default. How can I implement that?

    Regards,
    TA26

    Attachments:
    You must be logged in to view attached files.
    #49792

    Hi TA26,

    Thanks for the response and I am glad to hear that helped.

    1. Regarding the ‘No Results Found’ message, this should work if you have entered a string in the relevant input field in Map > Edit > Store Locator > No Results Found this should display when no results are found. Can you please confirm that you have entered this string?

    2. It is possible to set a default category to filter by, by adding the ‘cat’ attribute to the map shortcode for the page. An example of this would be the following shortcode:

    Where ‘cat’ is the ID of the category.

    Please let me know if this helps.

    Best regards,
    Dylan

    #49853

    ta26
    Member

    Hi Dylan,

    As you can see in the attachment, I have input ‘No Results’ in the input fields but it still does not work.

    To add the ‘cat’ attribute to the map shortcode, I don’t see the example of how to do it but only a map. Could you please give more instruction about how to do it?

    Thanks!

    Best Regards,
    Ta26

    Attachments:
    You must be logged in to view attached files.
    #49856

    ta26
    Member

    Hi Dylan,

    I have tried to add ‘cat’ to the shortcode in this format:

    No results found in this location. Please try again.

    Add your own marker







    Marker Title
    Marker Address or GPS Location

    Or click on the map and drag to add a marker

    Marker Description
    Marker Category
    Please tick this box to prove you are human

    .
    I works and set category 1 checked as default, but it shows a lot of warning messages below the pages, which are
    : file_put_contents(/www/wwwroot/www.plusi.com/iteration2/wp-content/plugins/wp-google-maps/includes/build.log): failed to open stream: Permission denied in on line .

    I also made screen shot about this warning message that you can check in attachment.
    Is it because I used the shortcode in wrong format?

    Regards,
    Ta26

    #49857

    ta26
    Member

    Hi Dylan,

    Pls ignore the previous post about the warning message. I have fixed it. The thing I need your help is still the no result message, which is not shown. I have enter string in that input field but it still does not work.

    Best regards,
    Ta26

    Attachments:
    You must be logged in to view attached files.
    #49871

    Hi Ta26,

    Thanks for the response. Would you perhaps be open to creating a temporary account for me on your website so that I can take a closer look at why this message is not appearing to assist you further and fix this issue?

    If possible, please remember to post it in a private response to make sure your details are kept safe.

    I look forward to hearing back from you and assisting you further in getting this resolved as soon as possible.

    Kind regards,
    Dylan

    #51189

    dylboy
    Member

    HI ,
    i like the idea of this layout provided.
    I have two issues when I try to implement the code.
    1,
    I can’t see Maps > Settings > Advanced > Custom JS:
    I have the custom css area but not the custom js.
    2,
    Just by adding the custom css it get a little better but doesnt really align itself.
    Maybe it is cause i cant call the JS script properly.

    Another thought would be to put search options off into a column to the side of the map.
    But the current default settings are not pretty.
    ANy help greatly appreciated.
    Cheers Dylan

    Attachments:
    You must be logged in to view attached files.
    #51192

    Hi dylboy,

    Thanks for getting in touch.

    Regarding the Custom JS section not being available, I believe this might be due to an older version of the plugin being used on your website. Could I kindly ask if you could perhaps confirm which versions you are currently using so that I can assist you further?

    To help with the CSS and the styling of the map, could I kindly ask if you could perhaps send me a link to your website as this would be a great help in preparing some CSS to improve the layout for you as mentioned.

    I hope this helps and look forward to hearing from you.

    Best regards,
    Dylan

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.