[Resolved] Place the search bar on top of the map

[Author]

Posts

[simchaH]

Hi,

I am trying to design my search page so that the search/filter options are on the top the map, and then underneath the map the results will show. I am getting the error of having to keep the search inside the view, is there any workaround that would enable me to design as such?

1st Row: search fields, search filters, submit button etc.
2nd row: big map connected to the view by address
3rd row: search results - view loop output.

Currently the search is below the map, but I don't like the way it is setup.

Thanks

[Nigel]

It's not possible with the current implementation to do this using blocks (i.e. the View block and the Map block).

The "solution" is to move the Map block into the View block, in the output section (but outside of the loop, so that it appears only once).

But you will see an error if you try to do that, it is not permitted.

What you can try instead is add the map using the legacy maps interface with shortcodes, instead of the Map block.

So delete your existing Map block, then add a Fields and Text block inside the View output block (but outside of the Loop) and use the Fields and Views button (the little orange Toolset icon) to insert a wpv-map-render shortcode to display the map. Then in the Loop section insert another Fields and Text block, and use the Fields and Views button to insert a wpv-map-marker shortcode, where the location comes from the custom field that stores the address.

For details of the shortcodes see https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/

[simchaH]

Would you be able to help me with configuring the shortcode? I am confused how to do the correct syntax with needing to add in a custom map marker, plus map marker popup content.

Thanks for the idea I really appreciate it!

[Waqar]

Hi,

I can help you with the correct syntax of the map and the map marker shortcodes, but, first I'll need to understand exactly how and where do you plan to use it.

Can you please share temporary admin login details, along with the link to this search page?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

To show the map and the map markers using the shortcodes, you can follow these steps:

1. Please remove the "Map" block from the page.

2. Below the search filters in the view ( where you'd like to show the map), include a "Fields and Text" block, that will hold the map shortcode.

In the simplest form, you can add the map's shortcode like this:

[wpv-map-render map_id="map-1" map_height="300px"][/wpv-map-render]

Feel free to adjust the shortcodes attributes as needed, based on this documentation:
https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-render

As a result, a map will start showing at your desired place, but, it will not be linked to the view's results, yet.

3. To link the map with the view's results to show the map markers, please include another "Fields and Text" block, making sure that this block is placed within the "View Loop" block.

The shortcode for the map markers in this block will look like this:

[wpv-map-marker map_id='map-1' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address'][/wpv-map-marker]

The "map_id" value in both shortcodes should be the same and the supported attributes for this map marker shortcode can be viewed here:
https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/#wpv-map-marker

This will show the map markers from the view's results using location from the custom field "address", on the map.

[simchaH]

My issue is resolved now. Thank you!