[Resolved] move map outside of filter and results

[Author]

Posts

[laurencea]

I'm using Elementor to display content, Toolset for functionality. When creating a view I can have filter, map, and results grouped together. I found that I can generate shortcode to split up the filter and results and place them anywhere on the page. However, The map is attached to the results.

I'd like to have one column to include the filter and the results below, with the map in the second column.

[laurencea]

Any guidance is appreciated.

[Luo Yang]

Hello,

Yes, it is possible to move the Google map shortcode outside the filter and results, you just need to put the map shortcode to where you want, specific a map ID, for example "map-1", use it in the map marker shortcode:
wpv-map-render
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-render
map_id.
Mandatory. The unique ID for the map where this marker will be rendered. Must be a string.

wpv-map-marker
https://toolset.com/documentation/user-guides/maps-shortcodes/#wpv-map-marker

[laurencea]

Here you can see the map on the right does not load. The map within the view works fine, except for initial load.
hidden link

Here's the shortcode for the map on the right :

 [wpv-map-render map_id="map-8" map_height="600px" cluster="on" spiderfy="on" map_type_control="off" street_view_control="off" marker_icon="//test2.schedulepickups.com/wp-content/plugins/toolset-maps/resources/images/markers/Shop-3.png"][/wpv-map-render]

[wpv-map-marker map_id="map-8" marker_id="marker-[wpv-post-id]" marker_title="View More" marker_field="wpcf-pickup-address" id=""]Some info here[/wpv-map-marker]

[Luo Yang]

Please check these:
1) In the same page, there should be only one map shortcode with the map_id "map-8", so you will need to remove the map shortcode in the view

2) The Views AJAX won't update codes outsider the view, so you will need to disable all Views AJAX feature, and test again.

[laurencea]

No luck. I can move filters and results around on an Elemtnor page but it seems the map must be grouped with the results. I can't find any docs for placing the map outside either. I am able to bootstrap the View into two columns. I moved [wpv-filter-meta-html] to the loop output into the desired column and was able to achieve the layout I wanted. I was hoping to use Elementor to achieve this layout so that client would have easier job editing the page but this will do for now...

[laurencea]

Thanks for the help. If you have any other ideas for this layout with Elementor, I'd still like to hear them though...

[Luo Yang]

I have setup a test site for you:
hidden link
user/pass: xgren/111111

1) The view:
hidden link
in "Loop Output Editor" use below codes to display the map marker:

...
				[wpv-post-link] | 
				[types field='test-address'][/types]
              [wpv-map-marker map_id="map-8" marker_id="marker-[wpv-post-id]" marker_field="wpcf-test-address"][/wpv-map-marker]
...

2) put above view into a page, and display the google map shortcode:

[wpv-view name="move-map-outside-of-filter-and-results"]

<hr />
[wpv-map-render map_id="map-8" map_height="600px" cluster="on" spiderfy="on" map_type_control="off" street_view_control="off" marker_icon="//test2.schedulepickups.com/wp-content/plugins/toolset-maps/resources/images/markers/Shop-3.png"][/wpv-map-render]

For your reference.

[laurencea]

Thoughts?
hidden link

View

[wpv-map-marker map_id="map-11" marker_id="marker-[wpv-post-id]" marker_title="View more" marker_field="wpcf-pickup-address"]Some info here....[/wpv-map-marker]

[Luo Yang]

Thanks for the "recordit", but as you can see, there isn't similar problem in the test site I provided above, and the google map works fine:
hidden link

In case it is a compatibility problem, please try this in your website:
1) deactivate other plugins and switch to wordpress default theme, and test again
2) If the problem still persists, please provide a database dump file (ZIP file) of your website in below private detail box, also point out the problem page URL, I need to test and debug it in my localhost, thanks

[Minesh]

Luo is on vacation for rest of the week. He will get in touch with you as soon as possible when he back to work on Monday.

[Luo Yang]

As you can see, in above test site, there isn't the Elementor plugin. it works fine in the test site:
hidden link

Have you tried to deactivate the Elementor plugin of your website?

1) If the problem is fixed, then it might be a compatibility problem with the Elementor plugin, we need to debug it in a live website,

2) If the problem still persists, no compatibility issue, you don't need to provide the database dump file, you can duplicate the same problem in above test site, or a test site in your own webserver.

Please help us to duplicate the same problem, I need to debug it in my localhost, thanks