[Resolved] How to display a map with custom map markers in an elementor page

[Author]

Posts

[tipinoncomuni]

Tell us what you are trying to do?
--------------------------------
I would like to display a toolset map in an Elementor Pro page, using custom markers to geolocalize the posts.

Is there any documentation that you are following?
--------------------------------
I have read every article I have found on the support forum but i'am confused about the final step: inserting the map on the Elementor page

What i have tried
--------------------------------
I created a page using Gutemberg Blocks. On that page i inserted
- a Toolset View block with the name "viewimpianti" whose view-loop contains the following shortcode for the markers
[wpv-map-marker map_id = "map_id" marker_id = "mm- [wpv-post-id]" marker_title = "[wpv-post-title]" marker_field = "wpcf-position"] [/ wpv-map-marker ]
- a Toolset Map block with the name "mappaimpianti"
The page correctly displays the map and markers

However, I'm unable to show the same map inside an Elementor page:
- I inserted the Toolset View widget and selected "viewimpianti"
- I have inserted the Shortcode widget with this code:
[wpv-map-render map_id = "mappaimpianti" map_width = "100%" map_height = "400px" fitbounds = "off" general_zoom = "6" single_zoom = "15" cluster = "on"]
The map is displayed but none of the markers are shown.

I'm feeling a little bit stupid but can you telling me how to show the same view/map that's on the Gutemberg page?

[Nigel]

Hi there

To add a Map with markers to an Elementor page (rather than a Gutenberg page) you need to use the legacy editor for Views, not the Block editor.

If you can't see the menu option Toolset > Views go to Toolset > Settings and choose to show both the blocks and legacy UI.

The create a View at Toolset > Views to query the post type you'll be displaying as markers on a map.

In the output section of the View, use the Fields and Views button to insert the shortcode for the map (you will need to add this outside of the wpv-loop tags so that it is added only once), and then within the wpv-loop tags use the Fields and Views button to insert the shortcode for the map markers, choosing the options you require.

Then when you edit a page with Elementor you should be able to insert this View using the View widget, and it should output your map and markers.

I've skipped over some of the details of creating the View, as you have been a client from long-before Blocks was introduced, so I assume you are familiar with it, but if you need more details, please ask.

[tipinoncomuni]

My issue is resolved now. Thank you!
Thanks really a lot.
The existence of both the Map and the View toolset Gutenberg block had really confused me.
I used both in the same page and that created a lot of confusion.
Hoping it can be useful to some other confused people like me, i herewith enclose the "coded" view.
As you suggested the View include the map shortcode (NOT in the output section BUT outside the loop!!!) and in this way it can be used both in Gutenberg using ONLY the view widget AND in Elementor using the Toolset View Widget with the reference to the View.

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [wpv-map-marker map_id="mappaimpianti" marker_id="mm-[wpv-post-id]" marker_title="[wpv-post-title]" marker_field="wpcf-posizione" marker_icon="<em><u>hidden link</u></em>"]
<h7>[wpv-post-link]</h7>
Altitudine: [wpv-post-field name="wpcf-altitudine"]
Piante: [wpv-post-field name="wpcf-piante"]
Anno: [wpv-post-field name="wpcf-anno"]
[/wpv-map-marker]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]Non risulta censito alcun impianto del tipo cercato[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-map-render map_id="mappaimpianti" single_zoom="6" cluster="on" spiderfy="on" map_type_control="off" street_view_control="off"][/wpv-map-render]
[wpv-layout-end]