Flaky loading of Google maps iframe

Hey :wave:t2:

I have a site on server that has a Google map embed in a code widget iframe with the following standard, generated code:

<iframe width="100%" height="100%" style="border:0" loading="lazy" allowfullscreen="" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJd1q98Engj0cRD0geQHaSm64&key=XXX" class=""></iframe>

The map often won’t show by simply scrolling to it. Instead, I have to refresh the page or somehow force it and then it might flash, or in fact show up. Flaky.

The idea of lazy loading is standard and desirable. But I’m wondering if that is causing some issue?

I don’t see much recent discussion around Google maps here. Is it generally working well?

I am pasting the code into a Minimalist bloc from @Eldar but I don’t see any issues there.

Do you have a link to the page?
then you can look at it with the Developer Tools and maybe see where it hangs

It’s not that’s broken per se. More that it hasn’t consistently shown up as soon as the browser reaches the scroll target.

But maybe it had to do with my server not performing its best after several uploads/refreshes and cache reloads. It seems to have improved. I’ll monitor it for a bit.

Google Maps loads a lot of asynchronous data, presumably the loading of this data only starts when the map becomes visible and not when the actual page is loaded. The map then does not appear correctly or not everything that is needed for display is there yet. You might be able to see this with the dev tools and network analysis. You can also try remove “loading=lazy”

1 Like

There seems to be a potential conflict when enabling lazy loading across your entire site, especially when it’s also applied within an iframe. To resolve this, you have a couple of options. First, you could selectively exclude the iframe from lazy loading by implementing some JavaScript. Alternatively, try removing lazy loading specifically from the iframe itself.