← GuidesWordPress

How to Embed Google Maps in WordPress

Add an interactive Google Map to any WordPress page, post, or sidebar — without a plugin or API key.

Contents

  1. Step 1 – Generate your embed code
  2. Step 2 – Add the code to WordPress (Block Editor)
  3. Step 3 – Add the code to WordPress (Classic Editor)
  4. Add a map to a sidebar or footer widget
  5. Tips and troubleshooting

Step 1 – Generate your Google Maps embed code

  1. Go to the Map Embed Code generator.
  2. Type your business address, city, or landmark into the location field.
  3. Adjust zoom level and map type (roadmap or satellite) as needed.
  4. Choose a width — Full Width (100%) is recommended for most WordPress themes.
  5. Click Copy Code.

Step 2 – Embed the map using the Block Editor (Gutenberg)

The Block Editor is the default WordPress editor since WordPress 5.0.

  1. Open the page or post where you want to add the map.
  2. Click the + icon to add a new block.
  3. Search for Custom HTML and click it.
  4. Paste your copied iframe code into the HTML block.
  5. Click Preview to verify the map appears correctly.
  6. Click Publish or Update to save.

Tip: If your theme restricts iframes in certain areas, try placing the Custom HTML block at the full-width level outside any group or column block.

Step 3 – Embed using the Classic Editor

If you are using the Classic Editor plugin or an older WordPress installation:

  1. Open the page or post.
  2. Click the Text tab (not Visual) in the editor toolbar to switch to HTML view.
  3. Paste the iframe code at the position where you want the map.
  4. Switch back to the Visual tab to confirm the map block is visible.
  5. Click Update.
Important: Do not paste the iframe code while in Visual mode. WordPress may strip or encode the HTML. Always switch to Text / HTML mode first.

Add a Google Map to a sidebar or footer widget

  1. Go to Appearance → Widgets in your WordPress dashboard.
  2. Find the sidebar, footer, or widget area where you want to add the map.
  3. Click the + icon and add a Custom HTML widget.
  4. Paste the iframe code into the widget's content area.
  5. Click Update.

Tips and troubleshooting

  • Map not appearing? Check that your theme or a security plugin isn't stripping iframe tags. Some security plugins have an option to allow iframe embeds — enable it carefully.
  • Map too wide or narrow? Use the Full Width (100%) preset and keep Responsive mode enabled so the map scales to your content area.
  • Wrong location? Try entering the address more specifically. Use the Coordinates mode in the generator if the address search is ambiguous.
  • Satellite view not working? Some browsers or corporate networks may restrict the satellite imagery tiles. This is a browser or network restriction, not a code issue.

Ready to embed?

Generate your free Google Maps iframe code in seconds.

Open the Generator