[Resolved] Position Map after filters before results

[Author]

Posts

[simonC-7]

Tell us what you are trying to do?
I would like to render the map between the filters and the results. But placing the map within the view is not allowed it seems.

Having the map after the filters, but above the results is logical for the user in this case.

Is there any documentation that you are following?
None that I can find.

Is there a similar example that we can see?
hidden link

What is the link to your site?
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

I see you are using Block View to build your view. As the nature of Toolset Block view is that you can either add Map either at top of the view or bottom of the view. You can not add the map block in between the search filter and search view. Basically you can not combine view block and map block together. Both blocks needs to be added separately that is why you will have to add map block either at top of the view block or at bottom of the view block.

You can enable the legacy version of the view by following the steps given with the following Doc:
- https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

If you are ready to use classic view then it should be possible for you to add map between search filter and search result. Here is the doc about how you can build view in classic mode:
- https://toolset.com/documentation/legacy-features/views-plugin/front-page-filters/

[simonC-7]

Thanks Minesh.

Can I not use shortcodes to display the 'search form' followed by 'map' followed by 'search results'?

I have managed to get it working here, but the map does not show the marker results: hidden link

I used:

[wpv-form-view name="display-experts-on-map-listings" target_id="self"]

[wpv-map-render map_id="map-4" map_height="550" ][/wpv-map-render]

[wpv-view name="display-experts-on-map-listings" view_display="layout"]

It almost works, but submitting the form does not show markers on the map.

[Minesh]

Ok so you are using classic view and with that its possible. Even you can add the map within your view's Loop editor section just outside the <wpv-loop> section.

Can you please share problem URL where you added those shortcode and admin access details and let me review whats going wrong with your setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

In that case - you should not add the map to your block view page - you are feel free to remove it from top of the page:
- hidden link

What I've done is I've changed the map_id attribute to map_id="map-5" on your elementor's tempalte:
- hidden link

And then I've added the following marker shortcode using the shortcode block within your block view's loop:
=> hidden link

[wpv-map-marker map_id='map-5' marker_id='marker-[wpv-post-id]' marker_title='[wpv-post-title]' marker_field='wpcf-address']popup content goes here[/wpv-map-marker]

I can see the map is having markers now when I search:
- hidden link

I hope the solution I shared will help you to resolve your issue.

[simonC-7]

Thank you Minesh,

I see the map markers when I click on the link you provided, but not when I perform a fresh search from: hidden link

I'd also like the map to focus on the UK initially, before search.

[Minesh]

I see that you are using the ajax search and in that case you have to set the option for your custom search setting to "Full page refresh when clicking Submit".

I've also changed the default marker you added to "Loop Template" section and changed the map_id to "map-5":

[wpv-map-marker map_id='map-5' marker_id='marker-999' address='Scotland, UK' marker_icon='//amii.developmentandtesting.co.uk/wp-content/uploads/2022/11/amii_transparent_map_marker.png'][/wpv-map-marker]

[wpv-map-marker map_id='map-5' marker_id='marker-7' address='Oxford, UK' marker_icon='//amii.developmentandtesting.co.uk/wp-content/uploads/2022/11/amii_transparent_map_marker.png'][/wpv-map-marker]

Can you please check now.
=> hidden link

[simonC-7]

Amazing Minesh, thank you, I am learning so much.

The only reason I had Ajax activated was to use this solution, to scroll to the map when submitted. It's such a long form the user will be confused when taken to the top of the refreshed page.

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated js_event_wpv_addon_maps_reload_map_completed ready', function( event, data ) {
    
        jQuery('html, body').animate({
            scrollTop: jQuery("#js-wpv-addon-maps-render-map-4").offset().top
        }, 2000);
    
});

Is there a way to scroll to the map after submit/page-reload?

Thank you.

[Minesh]

I've adjusted the code added to "Custom CSS and JS" section of your view as given under with the custom JS box:

jQuery( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated', function( event, data ) {
jQuery('html, body').animate({
            scrollTop: jQuery("#js-wpv-addon-maps-render-map-4").offset().top - 50
        }, 2000);
});

Can you please confirm its working as expected.

[simonC-7]

Hi Minesh,

I tried a search, but it didn't scroll to the map.

I changed your code to match the ID of the map: js-wpv-addon-maps-render-map-5-1. But now it scrolls straight to the map before a search is performed. Can that be fixed?

Lastly, I would like to change the 'popup content goes here' on the code you mention in REPLY #2503045. But I can't see where it is. Can you point me to it please?

Many thanks for all your help.

[Minesh]

sorry - on what URL you are checking and where did you added your js code?

[simonC-7]

Thank you.

This is the page I am testing: hidden link

And here is where I edited your code: hidden link on the View Block > Custom JS & CSS

I think I might have edited the wrong part, because looking closer, it doesn't look like your new code.

[Minesh]

I changed your code to match the ID of the map: js-wpv-addon-maps-render-map-5-1. But now it scrolls straight to the map before a search is performed. Can that be fixed?
==>
I've adjusted the custom JS code added as given under:

jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated js_event_wpv_addon_maps_reload_map_completed ready', function( event, data ) {
    
  jQuery.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
}
 param =  jQuery.urlParam('wpv_view_count'); 
  if(param == 1546 ) {
        jQuery('html, body').animate({
            scrollTop: jQuery("#js-wpv-addon-maps-render-map-5-1").offset().top
        }, 2000);
  } 
});

Lastly, I would like to change the 'popup content goes here' on the code you mention in REPLY #2503045. But I can't see where it is. Can you point me to it please?
==>
Please check the following screenshot:
- hidden link

Really glad to help 🙂

[simonC-7]

Minesh, I have never known support as good as this! Thank you so much. You are very good at what you do. 🙂

I'd like to change the words in the Distance form, to 'miles of' instead of just 'of' (see attached). Should I open a different ticket for this?

Many thanks for your time today Minesh.

[Minesh]

That is really glad to hear. You are welcome to share your feedback.

Yes, please kindly open a new ticket for every new question you many have. This will help other users searching on the forum and help us to write correct problem resolution summery.

Thank you for your kind words and you can mark this ticket resolved 🙂