[Resolved] Map is not visible after sort by and pagination

[Author]

Posts

[markusK-6]

Hello,

i have a bug with the map.
Please go to the Page: hidden link
then klick on the Third last Page on the bottom
then change the filter to PLZ
after that the map is not visible.

Please help!

Nice regards
Markus

[Beda]

The last 3 closing DIV of your Custom Filter HTML are wrong:

</div></h3>
  [wpv-filter-end]</div>

They are highlighted red which means they are either too many or too less.

Please adjust that as it can break entire Views.
Every HTML entity must be opened and closed properly.

Remove all CSS and JS from the View as well, for a test if this has an influence.

Then, you have a lot of conditionals in the Loop output and the map is output only if "[wpv-conditional if="( $(paket) eq '1' )"]".

So to me, it seems some posts do not match that criteria and that is why some posts (even without updating the post-search but simply after an exact number of items) the map is not rendered.

Take an example:
hidden link
This is not value 1 of "paket" and hence, the map won't render.

[markusK-6]

Hi Beda,

i corrected the code, tested without css and java script, but the problem still exists.
Yes that should be so that the map is shown only on posts with paket eq '1', the other posts have no map.

[Beda]

Then the issue is exactly as I discussed above.
I see the maps everywhere where the condition returns true.

Maybe I am missing some details, but as far I saw all those posts are not matching the condition and hence do not display the map already in the begin of the view load.

Is this correct?

Then the problem would be expected.
Can you give me an example of a Post where the "paket" is "1" and the map does not show in that view?

[Christian Cox]

Hi, Beda is unavailable so he asked me to check on this ticket. It appears that the problem has to do with the combination of manual and automatic AJAX updates for pagination and search filters. Is it possible to use the option "Pagination enabled with manual transition and AJAX" since you have also selected "AJAX results update when visitors change any filter values"? It's also possible to place static maps instead of interactive maps, which will make your page load faster when displaying a list of results like this. I will continue to investigate the problem, but I wanted to get your input about different options.

[markusK-6]

Hi Christian,

thank you, the option "Pagination enabled with manual transition and AJAX" solves the problem but the behavior is strange, the browser still stands bottom.

How can i change to statis map?

[Christian Cox]

the browser still stands bottom.
You can change this behavior with some custom JavaScript. First, add this code in the View's Filter Editor panel just after the wpv-filter-controls shortcode:

<a name="scroll-to-filters"></a>

That code sets an anchor at the top of the form, which we can scroll to later.

Then add this code to the JS editor panel just under the Filter Editor panel:

function wpvScrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    jQuery('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

jQuery(document).ready(function(){
  jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	wpvScrollToAnchor('scroll-to-filters');
  });
});

This code sets up an event listener that is fired when pagination is completed, and triggers a scroll-to-anchor function.

To switch to static maps, you must first enable the Static Maps API for your API key – this is a separate API that must be enabled in the Google API Console. Then replace your wpv-map-render and wpv-map-marker shortcodes with the HTML for a static map:

 
<img src="<em><u>hidden link</u></em> field='address-field-slug'][/types]&zoom=13&size=300x150&maptype=roadmap&markers=color:red%7C&key=YOURAPIKEY" />

Change the address-field-slug to match your address field. If your site isn’t https, change the protocol in the image src to http. You can also change the zoom and size parameters to fit your needs. Other customization can be added as well, you can review the full API documentation here:
https://developers.google.com/maps/documentation/static-maps/

[markusK-6]

Thank You very much for the fast help!