[Resolved] Google maps does not loading on specific pages

[Author]

Posts

[denis]

Hello.

I kust updated all tollser plugins to latest version, and now there is a problem, displaying toolset maps.

On this pages: hidden link
We can only see "Loading from Google Maps" but not the maps.

On test page - everything is ok: hidden link

But with previous version of plugins - maps works good, and except plugin updates i did not change anything.

[Christian Cox]

Hi, there's a JavaScript error on this page that is probably preventing map initialization:
hidden link

Uncaught TypeError: Cannot read property 'carousel_settings' of undefined
    at $us.WGrid.init (podzamkom.ua.js?ver=5.6.1:135)
    at new $us.WGrid (podzamkom.ua.js?ver=5.6.1:133)
    at HTMLDivElement.<anonymous> (podzamkom.ua.js?ver=5.6.1:165)
    at Function.each (jquery.js?ver=1.12.4:2)
    at n.fn.init.each (jquery.js?ver=1.12.4:2)
    at n.fn.init.$.fn.wGrid (podzamkom.ua.js?ver=5.6.1:165)
    at HTMLDocument.<anonymous> (podzamkom.ua.js?ver=5.6.1:242)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)

this.ajaxData is undefined because $jsonContainer.length = 0, therefore this.ajaxData is never defined. Perhaps the plugin updates affected the initialization sequence of some other dependencies for your custom code?

[denis]

Hello.

I try to find what part of this page causing this error.
And i found, on the bottom of the page i have this.

{!{wpv-view name='kvesty' ispartner='0'}!}

When i remove this part - error is hone.
But i cant remove it, beause it display other quest on page. And i cant find in this view nothing about this error.

[Christian Cox]

I'll take a closer look. Can you provide login credentials in the private reply fields?

[Christian Cox]

When you remove the View, there is no element with the class "w-grid" in the DOM. When you add the View, there is an element with the class "w-grid" in the DOM. My guess is that this WGrid system's init function is only triggered if jQuery('.w-grid').length > 0. Here's a screenshot of the page working without the View, and you can see in the console jQuery('.w-grid').length = 0.

[denis]

w-grid - this is class from grid system from very popular wordpress theme Impreza >52000 sales
hidden link

Is it possible to fix this problem, without changing grid system?

[Christian Cox]

It's probably just a problem with how you've added the w-grid. I'm not sure how to fix this, because I don't know anything about how w-grid works. Let's try to determine if the problem is related to Toolset or not. Copy the markup created by the View:

<div class="w-grid type_grid cols_3 height_fixed" id="us_grid_2">
		<div class="w-grid-list">
	
	
			<article class="w-grid-item ratio_4x3 size_1x1 us_portfolio type-us_portfolio status-publish has-post-thumbnail hentry us_portfolio_category-podzamkom">
	<div class="w-grid-item-h">
	<a class="w-grid-item-anchor" href="<em><u>hidden link</u></em>" rel="bookmark" aria-label="Gold Rush"></a>
	<div class="w-grid-item-elm usg_post_image_1  post_image">
   <img width="600" height="400" src="<em><u>hidden link</u></em>" class="attachment-us_600_0 size-us_600_0 wp-post-image" alt="Gold Rush" srcset="<em><u>hidden link</u></em> 600w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 125w, <em><u>hidden link</u></em> 75w" sizes="(max-width: 600px) 100vw, 600px"></div>
   <div class="w-vwrapper usg_vwrapper_1 align_center valign_top bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Gold Rush</h2>
   <div class="w-grid-item-elm usg_post_content_1 with_text_color  post_content"><i class="fa fa-puzzle-piece"></i> Average | <i class="fa fa-clock-o"></i> 60 минут |  <i class="fa fa-group"></i> 2–5 игроков   <br>  <i class="fa fa-map-marker"></i> улица Шота Руставели, 3, Киев, Украина</div></div>	</div>
</article>


	
			<article class="w-grid-item ratio_4x3 size_1x1 us_portfolio type-us_portfolio status-publish has-post-thumbnail hentry us_portfolio_category-podzamkom">
	<div class="w-grid-item-h">
	<a class="w-grid-item-anchor" href="<em><u>hidden link</u></em>" rel="bookmark" aria-label="Fifth Element"></a>
	<div class="w-grid-item-elm usg_post_image_1  post_image">
   <img width="600" height="400" src="<em><u>hidden link</u></em>" class="attachment-us_600_0 size-us_600_0 wp-post-image" alt="Fifth Element" srcset="<em><u>hidden link</u></em> 600w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 125w, <em><u>hidden link</u></em> 75w" sizes="(max-width: 600px) 100vw, 600px"></div>
   <div class="w-vwrapper usg_vwrapper_1 align_center valign_top bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Fifth Element</h2>
   <div class="w-grid-item-elm usg_post_content_1 with_text_color  post_content"><i class="fa fa-puzzle-piece"></i> Average | <i class="fa fa-clock-o"></i> 60 минут |  <i class="fa fa-group"></i> 2–5 игроков   <br>  <i class="fa fa-map-marker"></i> улица Евгения Коновальца, 31, Киев, Украина</div></div>	</div>
</article>


	
			<article class="w-grid-item ratio_4x3 size_1x1 us_portfolio type-us_portfolio status-publish has-post-thumbnail hentry us_portfolio_category-podzamkom">
	<div class="w-grid-item-h">
	<a class="w-grid-item-anchor" href="<em><u>hidden link</u></em>" rel="bookmark" aria-label="Access code: Bastille"></a>
	<div class="w-grid-item-elm usg_post_image_1  post_image">
   <img width="600" height="400" src="<em><u>hidden link</u></em>" class="attachment-us_600_0 size-us_600_0 wp-post-image" alt="Access code: Bastille" srcset="<em><u>hidden link</u></em> 600w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 125w, <em><u>hidden link</u></em> 75w" sizes="(max-width: 600px) 100vw, 600px"></div>
   <div class="w-vwrapper usg_vwrapper_1 align_center valign_top bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Access code: Bastille</h2>
   <div class="w-grid-item-elm usg_post_content_1 with_text_color  post_content"><i class="fa fa-puzzle-piece"></i> Difficult | <i class="fa fa-clock-o"></i> 90 минут |  <i class="fa fa-group"></i> 2–4 игроков   <br>  <i class="fa fa-map-marker"></i> улица Шота Руставели, 3, Киев, Украина</div></div>	</div>
</article>


	
			<article class="w-grid-item ratio_4x3 size_1x1 us_portfolio type-us_portfolio status-publish has-post-thumbnail hentry us_portfolio_category-podzamkom">
	<div class="w-grid-item-h">
	<a class="w-grid-item-anchor" href="<em><u>hidden link</u></em>" rel="bookmark" aria-label="Time travelling"></a>
	<div class="w-grid-item-elm usg_post_image_1  post_image">
   <img width="600" height="400" src="<em><u>hidden link</u></em>" class="attachment-us_600_0 size-us_600_0 wp-post-image" alt="Time travelling" srcset="<em><u>hidden link</u></em> 600w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 125w, <em><u>hidden link</u></em> 75w" sizes="(max-width: 600px) 100vw, 600px"></div>
   <div class="w-vwrapper usg_vwrapper_1 align_center valign_top bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Time travelling</h2>
   <div class="w-grid-item-elm usg_post_content_1 with_text_color  post_content"><i class="fa fa-puzzle-piece"></i> Average | <i class="fa fa-clock-o"></i> 60 минут |  <i class="fa fa-group"></i> 2–5 игроков   <br>  <i class="fa fa-map-marker"></i> улица Шота Руставели, 3, Киев, Украина</div></div>	</div>
</article>


	
			<article class="w-grid-item ratio_4x3 size_1x1 us_portfolio type-us_portfolio status-publish has-post-thumbnail hentry us_portfolio_category-podzamkom">
	<div class="w-grid-item-h">
	<a class="w-grid-item-anchor" href="<em><u>hidden link</u></em>" rel="bookmark" aria-label="Think like a thief"></a>
	<div class="w-grid-item-elm usg_post_image_1  post_image">
   <img width="600" height="400" src="<em><u>hidden link</u></em>" class="attachment-us_600_0 size-us_600_0 wp-post-image" alt="Think like a thief" srcset="<em><u>hidden link</u></em> 600w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 125w, <em><u>hidden link</u></em> 75w" sizes="(max-width: 600px) 100vw, 600px"></div>
   <div class="w-vwrapper usg_vwrapper_1 align_center valign_top bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Think like a thief</h2>
   <div class="w-grid-item-elm usg_post_content_1 with_text_color  post_content"><i class="fa fa-puzzle-piece"></i> Difficult | <i class="fa fa-clock-o"></i> 90 минут |  <i class="fa fa-group"></i> 2–5 игроков   <br>  <i class="fa fa-map-marker"></i> улица Шота Руставели, 3, Киев, Украина</div></div>	</div>
</article>

          </div>	
		</div>

Paste this markup directly in a custom Page, then deactivate all Toolset plugins. Then test the Page on the front-end of the site. If the same JavaScript error appears in the console, you know the problem has nothing to do with Toolset. Then you could ask your theme developers to help you determine why the grid markup is causing a JavaScript error.