Toolset Map not showing on Frontend of site

This thread is resolved. Here is a description of the problem and solution.

Problem: The map does not appear on the front-end of my site and a JavaScript error is shown: getJSON is not a function.

Solution: Do not load jQuery slim, load WordPress standard jQuery.

This support ticket is created 4 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Toolset Maps, Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Sam 4 years, 5 months ago.

Assisted by: Christian Cox.

Author

Posts

May 30, 2020 at 3:05 pm #1644851

Sam

Tell us what you are trying to do?
I'm trying to get my map to show on the frontend of my website. It's currently just white, looks great on the back end.

Is there any documentation that you are following?
I've been attempting to follow this page: https://toolset.com/documentation/user-guides/maps/display-on-google-maps/#api-key

Is there a similar example that we can see?
Here's my front end and backend, (images attached)

What is the link to your site?
hidden link

Done already...
I changed themes, still have the issue.
Everything says it's good with the Google Maps API

May 31, 2020 at 7:38 pm #1645619

Christian Cox

Hello, thanks for the detailed analysis. I see a JavaScript error in the console related to loading a custom map style config file via AJAX:

wpv_addon_maps.js?ver=2.0.3:318 
Uncaught TypeError: $.getJSON is not a function

It looks like a dependency issue. WordPress's jQuery is loaded, then jQuery slim overwrites the jQuery object. jQuery's built-in getJSON function is therefore undefined / not a function because the slim version doesn't include it.

script src="<em><u>hidden link</u></em>" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"

Slim does not include all the AJAX modules and also excludes some effects. It may have been implemented by a 3rd-party plugin or library, or it could be added intentionally by you or one of the project developers for optimization purposes. As far as a workaround, you can try using one of the default map styles instead...but with other jQuery AJAX modules disabled by slim I wouldn't count on the site being reliable. Are you aware of a reason why slim is implemented here?

June 1, 2020 at 12:54 pm #1646499

Sam

Thanks that fixed it. I had linked to jQuery from the Bootstrap website, but looks like the default one does just fine and more things work on my site!