[Resolved] Maps not displaying on page with Flexslider module

[Author]

Posts

[matthewR-5]

I am trying to: Display a map within a layout linked to the latitude and longitude custom fields of the current post. It was working but then I added the flexslider module to display images in a gallery and then the map stopped showing up on the front-end.

The div is still there, it's just not rendering any map. I've added the API key and listed the relevant referrers on the google dashboard but still no map....

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

I need to use the flexslider module and I need to have the map... Any advice?

Thanks
Matt

[Nigel]

Hi Matthew

I visited your link and I can see the reason the map is not loading is because there are JavaScript errors on the page.

Can you clarify what you have done to add the flexslider to the template for this page? That seems to be the root of the issue, and if I can I'd like to replicate what you've done locally to see if I get the same error.

[matthewR-5]

Thanks, Nigel

To add the flex slider, I installed the flex slider module within toolset, then added two views to the layout for this group of pages - one main slider image view which shows the featured image and another that displays a thumbnail gallery of all photos associated with the parent page.

One of these views also has a link to a css file which controls the styles for navigation buttons etc...

Thanks
Matt

[Nigel]

Hi Matt

If I can be honest, I'm not a fan of the flex slider module. It was created a long time before I joined, is undocumented, and hardcodes the JS and CSS files, meaning they can become outdated.

If you are willing to try it, I would strongly suggest you set up the flex slider manually, it is not too difficult.

I have shared the solution with other users (e.g. https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295) though I also prepared a more detailed guide to add to our documentation.

It hasn't been published yet, but you can find it here: hidden link

You might want to look at this demo, where you can see the options required to add the thumbnail gallery: hidden link

The only thing you need to modify with the above is that you want your first slide to be your featured image.

For that you just need to output the featured image inside an initial pair of li tags before the wpv-for-each loop that you see described in the solution.

Please try that. I expect it will eliminate the JS error that is preventing your map from loading.