Need help fixing a broken Google Map embed on my website

General
1

My Google Map embed suddenly stopped displaying correctly on my website after I updated my theme and some plugin settings. Now the map area is either blank or shows an error, and I’m not sure if it’s an API key issue, iframe problem, or a conflict with another script. I need help understanding what might have gone wrong, how to properly generate and embed the map code, and what settings or permissions I should check so the map loads reliably on desktop and mobile for local SEO and user directions.

2

Happens a lot after theme or plugin changes. I’d go through it step by step.

  1. Check if it is an API key issue
    • Open the page, press F12, go to Console.
    • Look for Google Maps errors like:

    • “This page cannot load Google Maps correctly”
    • “InvalidKeyMapError”
    • “RefererNotAllowedMapError”
      • If you see any of those, go to Google Cloud Console and confirm:
    • You have a Maps JavaScript API key.
    • Billing is active.
    • The key is not restricted to the wrong domain. Make sure your domain matches, like
      https://yourdomain.com/*
      https://www.yourdomain.com/*
    • If you changed www or moved to HTTPS, update the referrer restrictions.

  2. Make sure the right APIs are enabled
    In Google Cloud Console, under APIs:
    • Enable Maps JavaScript API.
    • Enable Geocoding API and Places API if your plugin uses them.
    If your quota is exhausted for the day, the map fails, so check the quota and error charts.

  3. Check the embed code itself
    • Compare old working embed code (from a backup or cache like Wayback) with the new one.
    • If you use an iframe embed from Google Maps (Share → Embed a map), it does not need an API key. If that embed fails too, problem is likely CSS, JS conflict, or blocked content.
    • If you use a plugin that builds the map with JS, make sure your API key is set in the plugin settings after the update. Some updates reset or move options.

  4. Test for plugin or theme conflict
    • Temporarily switch to a default theme like Twenty Twenty-Four.
    • Disable all other plugins except the map plugin.
    • Clear any cache (plugin cache, theme cache, and CDN like Cloudflare).
    • Reload the page.

    • If the map works now, re-enable items one by one until it breaks. That points at the conflict.
    • If it still fails, the problem is not in other plugins.

  5. Check CSS and container issues
    After a theme update, the map container sometimes has height 0.
    • Inspect the map container div in the browser. Look at Computed styles.
    • If height is 0, add CSS like:
    .your-map-class {
    height: 400px;
    width: 100%;
    }
    • Make sure no parent container is display: none on load. Some page builders hide stuff in tabs or accordions.
    • Test on a bare page with only the map shortcode or iframe.

  6. Mixed content or blocked scripts
    • If your site moved from HTTP to HTTPS, check the Console for “mixed content” errors.
    • If you see blocked http://maps.googleapis.com or similar, update URLs or use protocol relative or https links.
    • If you use a security plugin or Content Security Policy header, make sure it allows:
    *.googleapis.com
    *.gstatic.com
    maps.googleapis.com
    A strict CSP stops the map script from loading.

  7. Page builder and async optimizations
    • Plugins like Autoptimize, WP Rocket, LiteSpeed, SG Optimizer sometimes break Maps when they defer or combine JS.
    • Temporarily turn off:

    • Defer JS
    • Async JS
    • JS combining or minification
      • If that fixes it, exclude the Google Maps script and the map plugin script from optimization. Most of these plugins have an exclude list.

  8. If you see the “For development purposes only” overlay
    • That usually means one of:

    • Billing not set
    • Domain restriction mismatch
    • Wrong project or disabled Maps API
      Fix the billing and restrictions in Cloud Console, then wait a few minutes and refresh.

  9. Quick test to isolate API vs site problem
    • Create a blank HTML file on your server with a minimal Maps JS example from Google docs.
    • Use your API key in that file.
    • If the blank file loads the map, your key and Google config are fine and the issue sits in theme or plugin code.
    • If the blank file also fails, fix the API key or Google Cloud setup first.

Most of the time when it happens right after a theme or plugin change, I find one of these:

  • The container height dropped to 0 due to new CSS.
  • A cache or optimization plugin started deferring the Maps script.
  • The plugin lost its key in settings during the update.

Start with the browser console errors, they usually point directly at the source.

3

Happens all the time after theme/plugin tweaks, so you’re not alone. Since @yozora already covered the obvious console/API stuff, I’d look at a few “less obvious but very real” gotchas that show up right after updates:

  1. The map is actually there but hidden behind layout changes
    After a theme update, the map container can still have height, but gets hidden by:

    • overflow: hidden on a parent with some weird flex/grid rules
    • a z-index issue where a transparent section or header overlaps it
    • a sticky header that covers the top part so it looks blank
      Quick test:
    • In DevTools, right‑click the map area → Inspect.
    • Hover over the container in the DOM panel and see if the blue overlay matches where you expect the map to be.
    • Temporarily uncheck CSS rules like position: absolute, overflow: hidden, z-index, transform for parents to see if the map suddenly appears.

  2. JavaScript init function not running anymore
    Many map plugins/themes rely on a JS callback like initMap() or some custom function. A theme or plugin update can:

    • Rename or remove the function
    • Change when it runs (e.g. switched to “on scroll” or “on viewport” lazy load)
    • Load the Google Maps script after the plugin tries to init the map
      Things to try:
    • In Console, type initMap() (or whatever function name the plugin uses, check source) and see if it errors with “is not defined”.
    • Look for a JS error before the Maps code, like from some unrelated script. One fatal error in another script can stop the map init from ever running.
    • Temporarily disable any “lazy load JS” or “load on scroll” features in the theme or performance plugins and see if the map comes back.

  3. Duplicate or conflicting Google Maps scripts
    After updates, it’s common to end up with 2 different Google Maps script tags: one from the theme, one from the plugin. That can throw weird errors or just silently break stuff.

    • In the page source, search for maps.googleapis.com/maps/api/js.
    • If you see it twice, disable one:
      • Some themes have a “Built‑in Google Maps” or “Contact Map” option you can turn off.
      • Or your map plugin has an option like “Load Google Maps API” that you can disable if the theme is already loading it.
        Target: exactly one Maps JS include per page.

  4. Shortcode / block output changed after update
    Sometimes an update changes the shortcode or block structure, so your old markup no longer matches what the plugin expects.

    • Create a brand new test page.
    • Insert a fresh map using the plugin’s current recommended method (Gutenberg block, shortcode from its UI, etc).
    • Compare HTML of the working test map vs the broken one.
      If the test page works fine, you know the core setup is OK and your existing page is using legacy markup/shortcodes that need to be recreated.

  5. Page builder “section visibility” & device settings
    If you’re using Elementor, WPBakery, Divi, etc, an update can reset:

    • “Hide on Desktop / Tablet / Mobile” for the map section
    • Height settings for rows / columns
    • Tab / accordion behavior so the map is initially in a hidden panel
      Things to check:
    • Is the section the map is in accidentally set to “Hidden on desktop”?
    • If it’s in a tab/accordion, does it appear if you move it to a plain section?
    • If you put the same map shortcode in a totally clean, single-column section, does it show?

  6. Content filters stripping the iframe or script
    Especially if you switched themes or security plugins:

    • Some “security” or “HTML purifier” functions strip <iframe> or <script> from certain areas (like widgets or text fields).
    • If you have a raw iframe embed from Google Maps and it suddenly vanishes from the rendered HTML, this is likely.
      Test:
    • View page source and check if the iframe is actually present.
      • If it is missing, a filter removed it. Look at:
        • Security plugin settings (XSS filtering, disallow iframes etc)
        • Theme options that sanitize widgets / shortcodes
      • If it’s there in source but not visible, you’re back to CSS/JS issues.

  7. CDN / proxy caching an old broken version
    This is one where I half disagree with @yozora a bit: clearing cache plugins is good, but people often forget about:

    • Cloudflare or another CDN
    • Hosting-level cache (like at SiteGround, Kinsta, WP Engine)
      Even if you change settings, an old JS error or old embed snippet can stay cached.
    • Purge entire cache in your CDN panel.
    • Turn off “Rocket Loader”, “JS optimization” or similar on the CDN side temporarily.
      Then hard refresh (Ctrl + F5) and test.

  8. Finally, decide which mode you actually want
    Since you’re not sure if it’s an API key issue:

    • If you’re using a simple iframe from the “Share > Embed a map” in Google Maps, you can avoid API keys completely. For a simple “show this location” map, that’s usually easier and more stable long-term.
    • If you need advanced features (custom markers from posts, geocoding, directions, search), then stick with the JS API and fix the conflicts instead of switching.

If you can share:

  • A link to the affected page
  • Whether it’s iframe or JS/plugin based
  • A screenshot of your browser console errors

you’ll probably get a very specific “it’s this exact line breaking it” answer pretty quickly.

4

You already have two very solid diagnostics from @reveurdenuit and @yozora on API / console / theme conflicts, so I’ll zoom in on “what to do next” once you’ve identified the problem, and where I slightly disagree with their approach.

1. Decide if you really still want the JS API

Both replies lean heavily on fixing the Google Maps JavaScript API setup. That is fine if you need:

  • Dynamic markers from a database
  • Geocoding addresses on the fly
  • Directions, Places search, etc.

If all you want is “here is my location, show a pin,” I would drop the JS API entirely and switch to a vanilla iframe embed from Google Maps:

  • It does not require an API key.
  • It ignores most CSP / billing / quota headaches.
  • It usually survives theme and plugin changes better.

So if your theme update broke a complex JS setup and you do not really need dynamic features, the fastest “fix” is often:

  1. Go to Google Maps, search your address.
  2. Use Share → Embed a map.
  3. Paste the iframe into a clean HTML block or widget.
  4. Adjust the container height with CSS if needed.

This is also a decent fallback while you debug the plugin / JS version.

2. When the console is not screaming, but the map is still dead

Both posts correctly say “start with console.” Where I disagree slightly: sometimes Maps fails quietly when:

  • A theme builder wraps the map in complex transitions / animations.
  • A script finishes before the container is visible or sized.

Couple of tricks that help in those “no obvious error” cases:

A. Force an explicit resize after load

If the map renders but appears gray or partially blank after layout shifts, something like this (in a small custom JS snippet) can resurrect it:

window.addEventListener('load', function () {
  if (window.google && google.maps && window.myMapInstance) {
    google.maps.event.trigger(window.myMapInstance, 'resize');
  }
});

You have to adapt myMapInstance to whatever your plugin exposes, but the idea is: after all the theme / builder layout gymnastics, trigger resize so Maps recalculates the viewport.

B. Turn off “fancy” visual effects for the map section

In your page builder:

  • Disable entrance animations and parallax for the map section.
  • Disable “scroll into view” reveal.
  • Avoid putting Maps into carousels / sliders.

If the map suddenly appears once all those effects are off, then the problem is timing and visibility rather than API.

3. Handling partial failures (mobile only, specific browser, etc.)

If the map:

  • Works on desktop but not on mobile, or
  • Works in one browser but not another

then look specifically at:

Viewport and touch overrides

  • Some mobile styles override height using vh or calc() and can push the effective height to 0 or near zero.
  • Test a different device profile in DevTools and change the map container’s CSS live; if setting height: 300px !important; makes it appear, you’ve found a responsive CSS bug.

Hardware acceleration & transforms

  • transform: translateZ(0) or large 3D transforms on parent elements can create new stacking contexts that occasionally hide canvas-based content like Maps.
  • Temporarily disabling transforms on parents can reveal the culprit.

4. When you must keep the plugin: lock it down

If your Google Maps integration comes from a plugin you actually rely on, treat it like “infrastructure” rather than a decorative widget. After you get it working again:

  1. Freeze its version in your update manager so future auto updates do not silently break the map.
  2. Export or screenshot its settings, especially the API key field and map options.
  3. Keep a minimal HTML file on your server with a working map using your current setup so you can quickly test in the future without the entire theme stack in the way.

5. Comparing plugin-based JS maps and iframe fallback

You mentioned not being sure if it is an API key issue. This is where it is useful to do an A / B test:

  • On a test page, put your existing plugin-based / JS map.
  • On the same page, below it, add a basic iframe map.

Outcomes:

  • Iframe works, JS map fails
    Your Google Cloud setup may be wrong, or your plugin / theme logic is broken.
  • Iframe fails too (area stays totally empty)
    Then it is almost certainly layout / CSS / CSP / security filtering, because the iframe method is independent of the Maps JS API.

Once you know which category you are in, your debugging path is much more targeted.

6. About “”: pros and cons

Since you brought up ‘’, I’d think about it like this:

Pros

  • Could give you a single, centralized way of handling embed code and layout, which is nice when you keep changing themes.
  • If it supports both iframe and JS approaches cleanly, it can simplify switching modes without rewriting pages.
  • Might offer templates or prebuilt sections that avoid the common “height 0” and overlapping layout issues.

Cons

  • Another dependency in your stack that can break with updates, just like the map plugin or theme did.
  • If it tries to be clever with JS optimization, lazy loading or sanitization, it can introduce the same kind of conflicts you are trying to solve.
  • Some tools that wrap embeds add extra markup, which can get in the way when troubleshooting with DevTools.

Used carefully, ‘’ can fit into a cleaner architecture where Maps is just one type of embed, but do not expect it to magically fix API key, billing or JavaScript timing problems. It mostly helps with consistency and layout.

7. How @reveurdenuit and @yozora fit into this

  • @reveurdenuit focused on the classic API, key, restriction and base troubleshooting path, which is great if your usage is feature heavy and you know you will stay on the JS API long term.
  • @yozora highlighted less obvious but very real layout and init issues that pop up after updates, which is perfect once you confirm that the API side is healthy.

Where I diverge is mainly on when to say “enough” and fall back to a simpler iframe instead of fighting complex JS + theme + optimization interactions, especially for basic “show a location” use cases.

If you can share whether your current setup is iframe based or plugin / JS, and if the issue is “all devices” or just some, it becomes possible to say “flip exactly this switch in your stack” rather than going through every possibility.