Hey, guys,
I’m probably on the margins of your GoogleMaps widget applications from the SiteOrigin Widget Bundle, but maybe you can help me anyway.
Specifically, I use 3 Google Maps within a row of tabs. In each tab there is a map, among other contents. The first map is also displayed wonderfully, but as soon as I change the tab I see a (almost) empty Google Map Canvas.
Of course, I have already looked around the web and found a lot about Google Maps in Tabs. As a rule, it is recommended to simply reinitialize the map object, e. g. to re-initialize the map object. with google.maps.event.trigger(map, ‘resize’);. This doesn’t work with your plugin, because the variables are not available to me – or are they?
A globally available variable is sowb, and I docked the function sowb.SiteOriginGoogleMap(jQuery).initMaps(); to it when changing tabs. Surprisingly, this also fulfils the purpose, but not very reliable – that is: sometimes it works, sometimes it doesn’t – and often extremely slowly in the range of up to 10 seconds.
I sincerely hope that you have an idea and can help me. Of course i could hook you up with admin access to the site in question.
I look forward to hearing from you. Thank you very much and best wishes,
Christian
Hi Christian,
So the solution you’ve come to seems to be the ideal solution (outside of the reliability issues). Maybe try a minor delay to see if that helps?
Do you have a public URL where we can take a look at your tabs?
Hey,
Alex, thanks for the quick reply. Unfortunately only when logged in, how can i send you username and password?
Thanks,
Christian
This is a private message.
This is a private message.
Hi Antwortzeit,
It appears as though only the third map doesn’t work. Does that map work normally (as in, outside of the tabs) or does it work if you change the ordering?
Hello, Alex.
Unfortunately, that varies. Sometimes it is the third tab, sometimes the second tab. Sometimes it works the first time you click through the tabs, sometimes it doesn’t work at all. It seems that our code for re-rendering is executed with every tab click, but then an external request is sent before the display, which sometimes works and sometimes fails.
And yes, if you look at the website on a smartphone, the three maps are displayed one below the other without any problems – here we load an extra line in the Page Builder.
Thanks,
Christian
Hi Christian,
Would it be possible for you to send me an export for this widget? To do this open up the page with the widget and click Layout button in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as teknik.io.
Also, can you please send me a copy of the full code you’re using so I can check it? Ideally, please link me to an asset file rather than copy and pasting it here as… well, our forum will likely format it to the point where it won’t work (which is kind of by design).
Hi Alex,
of course, here you go:
https://u.teknik.io/Qx3md.json
https://u.teknik.io/ra45i.zip
https://u.teknik.io/ugsL7.js
The zip is of course the whole theme, the js only the required JavaScript.
Also i uploaded a list of the currently active plugins including version number icyi:
https://u.teknik.io/kvPoA.png
Cheers!
Hi Christian,
Thanks. Okay, so the issue here is that what you’re doing is reloading the maps – they appear for in that gray state because they’re reloading and that’s why there’s a delay.
What happens if you hide and then reshow the map widget on click rather than recreating it?
Hi Alex,
nice idea! Doesn’t work though :-) You can recheck the WordPress-Site /standorte/ if you like. The canvasses stay gray forever.
Thanks,
Christian
Hi Christian,
Hm. I would try loading all of the Google Maps, and then hide them in tabs once they’ve started to load correctly. Outside of that, your initial method seems to be your only real option. To clarify, it’s not that the maps taking forever to load – it’s the delay is due to the rate limiting Google Maps features. As a result, your best option may be to just not use a tabs widget for the Google Maps – sorry mate. :()
Hi Alex,
yeah, i see. Don’t want to keep bothering you all day anyway. I’ll try out some more with reloading the maps, maybe juggle with the rate limit and see what comes out of it. If it doesn’t work, i’ll have to skip tabs, you’re right.
Thanks for your efforts, really awesome support!
Cheers,
Christian
Hi, Alex.
just wanted to update you quickly – maybe the information in this thread will help someone else.
So: The main problem with me was apparently my AdBlock Plus plugin. This does not cause any problems with the first map, but the dynamic reloading of the map it blocks with an ERR_BLOCKED_BY_CLIENT. However I only saw the bug in Chrome, Safari doesn’t show it, but behaves the same.
Nevertheless, even with the AdBlock deactivated, the maps load slowly. A firework of requests can be seen in the console, because the maps plugin repeatedly queries the geocoding API.
I just didn’t deal with this anymore and integrated the GoogleMaps as an iFrame instead. It doesn’t look so nice, but it works great.
Thanks again for your help!
Christian