[Resolved] Unable to display a map with a list of markers

[Author]

Posts

[morktron]

I am trying to: Display a map with a list of markers

Link to a page where the issue can be seen: hidden link

I expected to see: A map with multiple markers

Instead, I got: No markers

Markers work fine on singular post types such as this: hidden link - so I assume that rules out the issue being to do with the Google API

The map ID is correct, here is the code:

[wpv-layout-start]
	[wpv-items-found]
[wpv-map-render map_id="planet-local-initiatives-global-map"][/wpv-map-render]
	<!-- wpv-loop-start -->
		<wpv-loop>
          [wpv-map-marker map_id='planet-local-initiatives-global-map' marker_id='marker-2' marker_field='wpcf-address'][wpv-post-link][/wpv-map-marker]
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

[Luo Yang]

Hello,

Thanks for the details, I can see the problem in your website.

Here are what I found:
1) In the post view "Planet Local initiatives map", you are using below map marker shortcode:
[wpv-map-marker map_id='planet-local-initiatives-global-map' marker_id='marker-2' marker_field='wpcf-address'][wpv-post-link][/wpv-map-marker]

It is using static marker_id: "marker-2", that will conduct problem if there are multiple results, you can assign a unique "marker_id" for each map marker, like this:

[wpv-map-marker map_id='planet-local-initiatives-global-map' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address'][wpv-post-link][/wpv-map-marker]

2) And there might be some other compatibility problem in your website, in the URL you mentioned above:
hidden link

I can see some JS errors in my Chrome browser console window, for example:
WebSocket connection to 'hidden link' failed: Error during WebSocket handshake: Unexpected response code: 403
ErrorUtils caught an error: "<![EX[["Tried to listen to element of type %s from %s: %s","click","Error","C...". Subsequent errors won't be logged

Since Google map is depends on JavaScripts, it might conduct other unexpected result.

I have done below modifications in your website:
1) Edit the problem page, display the map shortcode + View shortcode

[wpv-map-render map_id="planet-local-initiatives-global-map"][/wpv-map-render]
[wpv-view name="planet-local-initiatives-map"]

2) Edit the post view,
hidden link

In section "Loop Editor", remove the map shortcode, and display below content template shortcode:

[wpv-post-body view_template="loop-item-in-planet-local-initiatives-map" suppress_filters="true"]

Notice, I have added attribute suppress_filters="true" into above content template shortcode, to prevent other plugins to change the content template outputs.

3) in section "Loop item in Planet Local initiatives map", display the marker shortcode:

[wpv-map-marker map_id='planet-local-initiatives-global-map' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address'][wpv-post-link][/wpv-map-marker]

Test it in front-end:
hidden link

The map works fine, please check if it is fixed or not. thanks

[morktron]

Thanks Luo, you are amazing!

I never would have worked all of that out based on the documentation. I did wonder about the marker_id, it does makes sense.

It is not mentioned in the documentation and the screenshot has a regular marker_id, so the example given wouldn't work - https://toolset.com/documentation/user-guides/display-on-google-maps/displaying-markers-on-google-maps/#displaying-a-map-with-a-list-of-markers-coming-from-a-view

So it would be worth updating this info to cut down on support tickets.

Thanks again Luo 🙂

[morktron]

My issue is resolved now. Thank you!