🖼️ Fix Images That Disappeared After Adding Map Code

Camilo Aponte

Camilo Aponte

Last updated on Sep 30, 2026

🔍 What Happened to My Images?

If your website images disappeared shortly after you added a map embed code (such as a Google Maps iframe), the two events are almost certainly connected. Map embed code that contains unclosed HTML tags, extra quotation marks, or misplaced characters can corrupt the surrounding HTML structure, causing images — and sometimes entire sections — to stop rendering.

The good news is that your images have not been deleted. They are still stored in your media library. The issue is a broken HTML structure that prevents the browser from displaying them correctly.

🛠️ How to Fix the Problem

  1. Open Website Studio. In the left sidebar, navigate to Website Studio (URL: /website-studio) and open the affected page in the editor.
  2. Locate the map code block. Scroll to the section where you pasted the map embed code. Click on that block to select it.
  3. Switch to the HTML/Code view. Inside the block editor, switch from the visual view to the HTML or code view so you can inspect the raw markup.
  4. Remove the map code entirely. Delete all of the map embed code you pasted. Save the page and preview it to confirm whether your images reappear. If they do, the embed code was the cause.
  5. Clean the embed code before re-adding it. Copy your map embed code into a plain-text editor (such as Notepad or TextEdit in plain-text mode) to strip any hidden characters. Check that every tag is properly closed — for example, an <iframe> must end with </iframe> — and that there are no stray quotation marks or extra brackets.
  6. Re-paste the cleaned code. Return to the HTML view of the map block and paste the cleaned code. Save and preview the page again to verify that both the map and your images display correctly.

⚠️ Common Mistakes That Break Page Layouts

  • Unclosed tags: An <iframe> or <div> that is never closed will cause everything below it to be interpreted as part of that element, hiding images and other content.
  • Copied code from a web page instead of the embed tool: Copying map code directly from a rendered web page often picks up extra HTML that conflicts with your site's structure. Always use the official Share → Embed option from Google Maps or your map provider.
  • Pasting into the visual editor: Pasting raw HTML code into the visual (WYSIWYG) editor rather than the HTML/code view can introduce duplicate or malformed tags. Always paste embed code in the code view.
  • Extra line breaks or whitespace in the code: Some editors insert <br> or <p> tags inside your embed code when you paste, which can break it.

✅ Best Practices for Adding Map Embeds

  • Always use the HTML/code view of a block when pasting any embed code.
  • Validate your embed code at a free HTML validator (such as validator.w3.org) before adding it to your page.
  • After saving any code change, immediately preview the page on both desktop and mobile to catch layout issues early.
  • Keep a backup of your page content before making code edits — use the page duplication or version history feature in Website Studio if available.

💬 Still Need Help?

If your images are still missing after following these steps, or if you are unsure which part of the code is causing the issue, our team is ready to assist. If you need further assistance, open the chat widget in the bottom-right corner of the platform and type human teammate to be connected with a member of our team.