Skip Navigation

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

This support ticket is created 2 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 5 replies, has 3 voices.

Last updated by simchaH 2 years, 5 months ago.

Assisted by: Waqar.

Author
Posts
#2213257

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

#2213647

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+01:00)

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/

#2215281

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!

#2215481

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#2216649

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#2218943

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.