I am trying to create two tabs with results and map from custom search on mobile. See the site on page/test/
So first on the page is the search/filter. When you have filled in some search terms it will show the results in the tab results by default. But when you want to show it on a map there is the second tab. You can switch from view in this way. I placed a Tabs element with only the results in one tab and this works fine. But the "Map" tab I can't get to work. I placed this code:
[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_title="Meer details" marker_field="wpcf-geo-location" id="$parent"][wpv-post-body view_template="layout-voor-kaart"][/wpv-map-marker]
But this is not working. How can I place the map with the results in the Avada tab?
Cheers
Marco
Okay if the map is not visible when the page loads, you must trigger some JavaScript when you switch to the Map tab:
jQuery(document).ready(function(){
jQuery('.fusion-tabs .tab-link').click(function(e){
setTimeout(function(){WPViews.view_addon_maps.reload_map('map-1234');}, 1000);
});
});
Replace map-1234 with the unique ID of your map. This may not be the best way to handle Avada tabs, so you might find better advice on handling tab events in the Avada support forums.
[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_title="Meer details" marker_field="wpcf-geo-location" id="$parent"][wpv-post-body view_template="layout-voor-kaart"][/wpv-map-marker]
Okay this map marker shortcode should go inside the results of the View. Delete it from the tab and use the Fields and Views button to insert it in the View's Loop Output between the wpv-loop tags. Even though the map appears on another tab, the markers must be included in the wpv-loop output.
Then, insert the map shortcode in the map tab like this:
{!{wpv-map-render map_id='map-1234'}!}{!{/wpv-map-render}!}
Replace map-1234 with the unique ID of your map.
Hi Christian,
Where can I place the js? In the view or does it go in the page? I am not a js guy 🙂
Marco
Ok, I have it shown but not with the result markers on it. These tabs are shown on mobile and tablet only. I created a content template with Avada Fusion Builder. Also I have a template that shows the loop of tours results and one template for the desktop. On the desktop the tabs are not used. There I show a map and a list next to it.
Now I just found out that there could be more then one template in the View Loop output. But I am not shure I am doing this right. Will it work this way?
[wpv-layout-start]
[wpv-items-found]
[wpv-post-body view_template="Mobiele tours pagina"]
<div class="row" id="search-results">
<div class="col-sm-6" id="search-results-map">
[wpv-post-body view_template="Desktop tours pagina"]
</div>
<!-- resultaten lijst -->
<div class="col-sm-6" id="search-results-list">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="loop-item-in-filter-tours-pagina"]
[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_title="Meer details" marker_field="wpcf-geo-location" id="$parent"][wpv-post-body view_template="layout-voor-kaart"][/wpv-map-marker]
</wpv-loop>
<!-- wpv-loop-end -->
</div>
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]Geen tours gevonden[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
If you want I can send my login credentials so you can take a look.
If this will work I finally get the feeling I have an overview of toolset :-). It is great don't get me wrong, but it is a lot to take in.
Thanks
Forget the above code! In the meantime I puzzled a lot. I am back at keeping map and wpv-loop apart from eachother. It was not wise to try to devide the map and results. I made the following code:
[wpv-layout-start]
[wpv-items-found]
<div class="col-sm-6">[wpv-post-body view_template="Tours kaart"]</div>
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-sm-6">[wpv-post-body view_template="loop-item-in-filter-tours-pagina"]
[wpv-map-marker map_id="map-1" marker_id="marker-[wpv-post-id]" marker_title="Meer details" marker_field="wpcf-geo-location" id="$parent"][wpv-post-body view_template="layout-voor-kaart"][/wpv-map-marker]</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]Geen tours gevonden[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Where as the template "Tours kaart" shows the map with Avada.
It has a container with desktop map:
{!{wpv-map-render map_id="map-1" map_height="calc(86vh - 140px)"}!}We halen de gevraagde tours erbij.{!{/wpv-map-render}!}
And it has container with mobile map with toggle:
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Toon alle gevonden tours op kaart</a>
{!{wpv-map-render map_id="map-1" map_height="calc(86vh - 140px)"}!}We halen de gevraagde tours erbij.{!{/wpv-map-render}!}
This last one with toggle is not showing a map always. It has strange behavior. It is not there but it is acting as a map. What do you think?
This last one with toggle is not showing a map always. It has strange behavior. It is not there but it is acting as a map. What do you think?
You have two maps with the same ID: "map-1". You should use two different map IDs if you want to have two maps in the page markup at the same time. This introduces another problem - each map marker can only appear on one map. To fix this, you should duplicate the marker shortcode, give it a different marker ID, and set the new map ID for the target map.
Try this and let me know the results.
Ok, that works. I didn't think two maps would work. The only thing on mobile is that I have to touch the screen to show the map content. The map is there but I have to touch it to see the actual map.
Is this because of the toggle maybe?
Yes, you should trigger the map reload function I provided earlier once the map is displayed:
WPViews.view_addon_maps.reload_map('map-2');
If you have this button listener set up in your own JavaScript, I can help implement the function call. If not, I need to know how it's set up. I can take a look and see if there's a hook we can attach to.
The setup is within the views with templates. So "Tours kaart" is the template with the two maps. Pretty straight forward I think. Shall I send the login?
Private reply fields enabled.
How does this button collapse the collapseExample div?
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Toon alle gevonden tours op kaart</a>
Is this toggle button functionality provided by Avada, or another plugin? It is not standard HTML, so some kind of JavaScript is required.
I took it from here hidden link. I didn't add some other things, just this code and edited it. It must be the bootstrap that's doing all the magic.
unfortunately it is time to go sleeping here, hope you have enough answers?
Add this JavaScript to reload the map after the map tab panel is shown:
jQuery('#collapseExample').on('shown.bs.collapse', function(){
WPViews.view_addon_maps.reload_map('map-2');
});
Thanks Christian, this works perfectly!
I placed it and it worked. But now it is not working anymore. Can't see what I did. I only worked in the css. I placed the js iunderneath the loop output editor of the view "Filter tours pagina". Did I do something wrong?
