Home>Support>Google Maps Widget in Tabs fails

Google Maps Widget in Tabs fails

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

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 10 days, 8 hours ago Alex S Hi, I Work Here

    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?

  2. 9 days, 19 hours ago antwortzeit

    Hey,

    Alex, thanks for the quick reply. Unfortunately only when logged in, how can i send you username and password?

    Thanks,
    Christian

  3. 9 days, 15 hours ago Private Message - Alex S Hi, I Work Here

    This is a private message.

  4. 9 days, 15 hours ago Private Message - WordPress

    This is a private message.

  5. 9 days, 12 hours ago Alex S Hi, I Work Here

    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?

  6. 9 days, 12 hours ago antwortzeit

    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

  7. 9 days, 12 hours ago Alex S Hi, I Work Here

    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).

  8. 9 days, 12 hours ago antwortzeit

    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!

  9. 9 days, 11 hours ago Alex S Hi, I Work Here

    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?

  10. 9 days, 11 hours ago antwortzeit

    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

  11. 9 days, 11 hours ago Alex S Hi, I Work Here

    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. :()

  12. 9 days, 11 hours ago antwortzeit

    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

  13. 8 days, 18 hours ago antwortzeit

    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

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More