Need help fixing my Google Map embed code not showing up

General
1

My Google Map embed code suddenly stopped displaying on my website after I updated my theme, and I can’t figure out what’s wrong. I’ve checked the iframe snippet from Google Maps, cleared cache, and tried different browsers, but the map area is still blank. Can someone explain what might be causing this and how to properly embed a Google Map so it shows up on all devices?

2

First thing I’d check after a theme update is not the iframe itself, but what the theme does around it.

Go through these step by step:

  1. Check iframes are allowed

    • Some themes or page builders strip iframes from content for “security”.
    • Test by adding a simple iframe, like:
      <iframe src='https://example.com' width='600' height='450'></iframe>
    • If that disappears too, your theme or a plugin filters iframes.

  2. Check the browser console

    • Open your page.
    • Press F12, go to Console and reload.
    • Look for errors about “Refused to display… in a frame” or “X-Frame-Options”.
    • If you see something like that, check Content Security Policy in your security plugin or your host config.

  3. Check theme options / page builder

    • If you use Elementor, WPBakery, Divi, etc, use their “HTML” or “Embed” widget, not the default editor, and paste the Google Maps iframe there.
    • Some block editors escape or sanitize iframe code in normal text blocks.

  4. Check for CSS hiding it

    • Inspect the element in DevTools.
    • See if the iframe exists in the HTML.
    • If it is there but invisible, look for CSS like display:none, visibility:hidden, opacity:0, height:0, overflow:hidden.
    • Your new theme might have a .map or .embed class that conflicts.

  5. Check container size and positioning

    • Make sure the parent div is not height:0 or absolutely positioned off screen.
    • Quick test: add inline style to the iframe:
      style='width:100%;height:400px;border:1px solid red'
    • That helps you see if it is there but squeezed.

  6. Check if content is loaded via HTTPS

    • If your site is HTTPS, your map URL must be https://www.google.com/maps/embed?...
    • Mixed content gets blocked in modern browsers.

  7. Test with all plugins off

    • Temporarily switch to a default theme like Twenty Twenty-Four and disable all plugins except whatever you need to load the page.
    • If the map appears, enable theme first, then plugins one by one until it breaks again.
    • Common culprits: security plugins, page speed plugins, content filters, script optimizers.

  8. Check lazy load or optimization plugins

    • Plugins like Autoptimize, WP Rocket, LiteSpeed, SG Optimizer sometimes break iframes.
    • Turn off lazy load for iframes or exclusions for Google Maps URLs.
    • Look for settings like “Optimize iframes”, “Delay JS”, “Lazy load iframes”.

  9. Check you did not paste into “Text” vs “Visual” wrong

    • In classic editor, iframe goes into “Text” tab, not “Visual”.
    • In block editor, use the “Custom HTML” block.

  10. Regenerate the embed from Google Maps

  • Go to Google Maps, search your location, click Share, then Embed a map, copy new iframe.
  • Compare it with your current one for protocol, URL format, and extra attributes.

If you post the URL of the affected page or the exact iframe snippet, people can point to the exact issue faster.

3

Couple more angles to try that build on what @cazadordeestrellas already covered, without rehashing the same checklist.

  1. Check if it only breaks on certain templates
    After a theme update, some page templates change markup. Try:
  • Create a fresh test page using the default page template.
  • Paste the exact same iframe there (in a Custom HTML block or your builder’s raw HTML widget).
    If it shows on the test page but not the original, the problem is specific to that template (like a special “Contact” template adding JS/CSS that conflicts).
  1. Look for JavaScript errors from the new theme
    Not just console security errors.
  • In the Console, see if you have general JS errors like Uncaught TypeError related to the theme.
    If the theme’s JS crashes early, sometimes later DOM manipulations (including embeds) never run correctly or the layout breaks so the iframe is effectively hidden off-screen.
  1. Inspect how the HTML is being filtered
    Theme updates sometimes tighten KSES / sanitization rules. In WordPress, for example:
  • Check if your user role changed or if unfiltered_html capability was removed.
  • If you are an editor or below, the system might now be stripping the iframe on save, even if it still looks ok in the editor.
    To test:
  • Edit the page, paste the iframe, update, then immediately switch to code view / HTML view and see if the iframe is still there or has been neutered (e.g. turned into plain text or partially removed).
  1. Look at how the theme handles responsive iframes
    Some newer themes wrap iframes in a “responsive embed” container. If they updated that CSS and messed up aspect ratio or positioning, the iframe can effectively be invisible.
  • Inspect the parent wrapper. If you see something like .responsive-embed or .ratio-16x9, try temporarily removing that class in DevTools and see if the map pops back into view.
  • If it does, you can override that class in your child theme or Additional CSS.
  1. Check for map-specific conflicts
    Some themes include their own “Google Map” component using the JS Maps API, and they sometimes inject global CSS or JS that conflicts with iframes. Look for:
  • A built-in map shortcode or widget enabled on the same page.
  • Theme options page with a “Google Maps” section where you may have partially configured an API key.
    Try turning off any built-in map feature or removing those widgets and see if the plain iframe works again.
  1. Verify the markup order after the update
    Occasionally the builder or theme update moves content inside tabs, accordions, or sliders that lazy load or require JS to initialize. If the map iframe is inside:
  • A tab that is hidden by default
  • An accordion panel closed by default
  • A slider / carousel
    Try moving the iframe to a very plain part of the page, high up in the content, outside any fancy layout, just to see if it displays. If it does, the issue is specifically with how the new theme initializes those UI components.
  1. Compare source before and after update if you can
    If you have an old backup or staging site:
  • View page source of the working version and the broken version.
  • Search for part of your iframe URL and compare the surrounding markup.
    Differences there usually point directly to what the theme changed: extra wrappers, different classes, or removed attributes.
  1. Quick “nuclear” visibility test
    On the live page, in DevTools, select the <iframe> and apply:
element.style {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  width: 400px !important;
  height: 300px !important;
  background: #fff !important;
  z-index: 999999 !important;
}

If even that does not make it appear and you know the iframe tag exists in the DOM, something higher level (like a content security policy or frame blocking header) is at play, not just theme CSS. In that case, I’d check hosting or security plugin config, not only the theme.

I don’t totally agree that the first move is always to blame iframes being stripped. After theme upgrades I see layout and wrapper CSS issues way more often than outright iframe removal, especially when the code used to work and you didn’t change roles or editors.

If you can share:

  • The public URL of the page
  • A copy of your actual iframe code
    someone here can open DevTools and tell you within 1–2 minutes whether it’s being stripped, hidden, or blocked by headers.
4

Skip the iframe for a moment and look at what changed with the theme itself. After theme updates, the “invisible” breakpoints are usually:

  1. Theme map modules vs Google’s iframe
    Some themes ship their own map widget and quietly override anything inside a .map or .google-map container. If your iframe sits in a div with one of those classes, try:

    • Temporarily change the wrapper class to something neutral like .map-embed-raw.
    • Or move the iframe into a very plain container used nowhere else on the site.

  2. Template-level shortcodes and filters
    On some contact templates the theme runs extra shortcodes or filters that target external content. Your map iframe might be getting wrapped or rewritten on output instead of stripped completely.
    Quick check:

    • Copy the whole page content (HTML) to a new blank page using the default template.
    • If the map reappears there, the problem is not the iframe itself but template-level hooks.

  3. Role/capability change after update
    Slight disagreement with both @ombrasilente and @cazadordeestrellas here: it is not always a plugin doing the stripping. Some theme update routines tweak user roles or capabilities. If your account lost unfiltered_html, WordPress will sanitize the iframe on save, even if the editor looks fine.

    • Ask an administrator to paste the same map in a Custom HTML block and update.
    • If it only works for admins, you have a capability issue, not a styling or CSP one.

  4. Server-level headers from the theme’s “security mode”
    A few themes now bundle “security hardening” toggles that add headers like Content-Security-Policy: frame-ancestors 'self'. That can break Google Maps embeds in one go.

    • Check your theme options for “security”, “hardening” or “CSP” and temporarily disable them.
    • If the map returns, you can then fine tune the CSP instead of leaving it off.

  5. Misconfigured “performance” mode in the theme
    Modern themes add their own lazy loading and script combining, on top of anything plugins do. Even if plugin lazy load is off (as mentioned before), the theme might still:

    • Delay iframe loading until intersection logic runs.
    • Fail that logic after the update.
      Try turning off any “performance”, “speed”, or “lazy load media/iframes” options in the theme only, then retest.

  6. Check map inside advanced layout elements
    I partly disagree that CSS is usually the main culprit. I see more breakage from updated layout JS. When maps are inside accordions, tabs, or popups controlled by the theme, an update can:

    • Change the selector used to initialize those components.
    • Leave your old markup in a state where the tab never becomes “active,” so the iframe stays in a permanently hidden state.
      Move the iframe to the very top of the page content, outside any tab, popup, or slider. If it works there, your layout element is the real issue.

If you can, post:

  • The public URL of the problem page
  • The exact Google Maps iframe snippet you are using

Someone can inspect the output and in a minute tell you which of the three buckets it falls into:

  1. stripped/sanitized,
  2. present but hidden/wrapped, or
  3. blocked by headers.

Regarding the empty product title you referenced, there is not really anything to recommend there. Pros are impossible to list without a name or feature set, and a key con is exactly that: it does not currently help with clarity or readability because we have no concrete product or functionality attached to it. Until that is specified, it cannot compete with the practical, hands-on debugging approaches suggested by @ombrasilente and @cazadordeestrellas.