[Resolved] Split: Map Markers not showing on the mobile view

[Author]

Posts

[lesleeM]

Very interesting. Thanks for that find. That makes sense because I only recently deleted the development version of the site from the server as no longer needed. I'm not sure how I missed changing that URL though. I thought I changed all of them. I must have had a brain glitch just not catching that one.

OK, I see it is working again now.

While we're looking at this though, perhaps you can diagnose another issue I had with this same matter of map marker display. I tried to set up a mobile version of this view to not use a table. I kept the map display the same and changed the structure of the table output to just display the fields vertically for mobile screen widths. I've set that back up again now on the page so you can see it. I've also now rebuilt the view to fix the problem with the table headers not sorting that you previously solved for us. So the page is now set to use the rebuilt view at desktop screen widths and the mobile view at mobile phone and tablet screen widths. The rebuilt view is working perfectly. But I'm still having the same problem with the mobile view not showing the map markers. I've made sure it is not using the development URL for the map markers and that didn't solve it. I had this problem even when we were still on the development site and decided to just put this idea on the shelf temporarily until I had a better time to try to solve it again. Having this problem here has gotten me to revisit this again now and the same problem persists with the site on the root domain.

Any idea why the map markers aren't displaying when the mobile view is used?

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

During troubleshooting, I noticed that for both views ( 'Clermont Hills Table - New' and 'Clermont Hills Table - Mobile View' ), the map ID used in the map shortcode was the same ( i.e. 'map-7' ).

Since duplicate IDs are not allowed on the page, for the second map, it was automatically changed to 'map-7', by the browser. This difference would result in the map marker not getting connected to the second map.

To make sure that the map and the map marker IDs of these two views always remain unique, I've added the following changes to their respective shortcodes:

1. View: Clermont Hills Table - New

Map:

[wpv-map-render map_id="map-7" map_height="400px" fitbounds="off" general_zoom="11" single_zoom="8" general_center_lat="28.602943" general_center_lon="-81.725014"][/wpv-map-render]

Map marker:

[wpv-map-marker map_id='map-7' marker_id='marker-7-[wpv-post-id]' marker_icon='<em><u>hidden link</u></em> accumulate="false" pad="false"].png' marker_field='wpcf-location' marker_title='[wpv-post-title]'] <a href="[wpv-post-url]">[wpv-post-title]</a><br>Average Grade: [types field='average-grade' format='FIELD_VALUE'][/types]<br>Peak Grade: [types field='peak-grade' format='FIELD_VALUE'][/types]<br>Total Climb: [types field='elevation-difference' format='FIELD_VALUE'][/types] feet [/wpv-map-marker]

2. View: Clermont Hills Table - Mobile View

Map:

[wpv-map-render map_id="map-8" map_height="400px" fitbounds="off" general_zoom="11" single_zoom="8" general_center_lat="28.602943" general_center_lon="-81.725014"][/wpv-map-render]

Map marker:

[wpv-map-marker map_id='map-8' marker_id='marker-8-[wpv-post-id]' marker_icon='<em><u>hidden link</u></em> accumulate="false" pad="false"].png' marker_field='wpcf-location' marker_title='[wpv-post-title]'] <a href="[wpv-post-url]">[wpv-post-title]</a><br>Average Grade: [types field='average-grade' format='FIELD_VALUE'][/types]<br>Peak Grade: [types field='peak-grade' format='FIELD_VALUE'][/types]<br>Total Climb: [types field='elevation-difference' format='FIELD_VALUE'][/types] feet [/wpv-map-marker]

I hope this helps and please let me know if you need further assistance.

regards,
Waqar

[lesleeM]

AWESOME!!! Thanks yet again. I had no idea that would do that. I thought it would only render the code based on the CSS media query, so I thought it should have been OK to just use the same code (using the same IDs) if the code would only render once on the page. I didn't realize it would still need to be different IDs despite that.