WordPress Contact Page Map: 5 Ways to Embed Google Maps

Published on January 15, 2025 • 9 min read

A contact page without a map is like giving someone your address without directions. Whether you're running a local business, restaurant, medical practice, or consultancy, adding an interactive Google Map to your WordPress contact page makes it dramatically easier for customers to find you.

43.3%
Of all websites use WordPress - making it the world's most popular CMS. That's over 800 million sites.

This guide covers 5 different methods to add maps to WordPress, working with Gutenberg (Block Editor), Classic Editor, popular page builders, and widgets. Choose the method that fits your setup.

Before You Start

First, generate your map embed code:

  1. Visit the Maps Generator tool
  2. Enter your complete business address
  3. Customize size (600x450px works well for contact pages)
  4. Set zoom level to 14-15 for street-level detail
  5. Click "Generate Map" then "Copy" the embed code

Now you're ready to add it to WordPress using any of these methods:

Method 1: Gutenberg Block Editor (Recommended)

Difficulty: Easy

Best for: WordPress 5.0+ with the block editor (Gutenberg)

Step-by-Step Instructions:

  1. Edit your Contact page (Pages → All Pages → Contact)
  2. Click the + button where you want the map
  3. Search for "Custom HTML" and select it
  4. Paste your map embed code into the HTML block
  5. Click "Preview" to see your map in action
  6. Click "Update" to publish
Gutenberg Tip: Add a "Heading" block above the map with text like "Visit Us" or "Find Our Location" for better context.

Styling Your Map in Gutenberg:

Method 2: Classic Editor

Difficulty: Easy

Best for: Sites still using the Classic Editor plugin

Step-by-Step Instructions:

  1. Edit your Contact page
  2. Switch to the Text tab (not Visual)
  3. Find where you want the map to appear
  4. Paste your embed code
  5. Switch back to Visual to see the preview
  6. Click "Update"
Classic Editor Tip: Don't paste in Visual mode - the editor may strip out the iframe code. Always use Text mode for embed codes.

Method 3: Elementor Page Builder

Difficulty: Easy

Best for: Sites using Elementor (30+ million installations)

Step-by-Step Instructions:

  1. Edit your Contact page with Elementor
  2. Drag an HTML widget to your desired location
  3. Paste your map embed code in the HTML Code field
  4. Adjust width in the widget settings (100% for full-width)
  5. Set minimum height (450px recommended)
  6. Click "Update" or "Publish"

Advanced Elementor Styling:

Method 4: Sidebar or Footer Widget

Difficulty: Easy

Best for: Site-wide location display in sidebar or footer

Step-by-Step Instructions:

  1. Go to Appearance → Widgets
  2. Find the widget area where you want the map (e.g., "Footer Column 1" or "Sidebar")
  3. Click + to add a block
  4. Search for and add a Custom HTML block
  5. Paste your map embed code
  6. Click "Update"

For Classic Widgets interface:

  1. Drag the Custom HTML widget to your chosen area
  2. Paste your embed code
  3. Add a title like "Visit Our Store"
  4. Save
Widget Tip: Footer maps work great for local businesses because they appear on every page, constantly reminding visitors where you're located.

Method 5: Divi Builder

Difficulty: Easy

Best for: Sites using the Divi theme or builder

Step-by-Step Instructions:

  1. Edit your Contact page with Divi Builder
  2. Click + Add New Section
  3. Choose a regular section or fullwidth (fullwidth looks great for maps)
  4. Add a Code module
  5. Paste your map embed code
  6. Adjust sizing in module settings
  7. Save and publish

Divi Layout Ideas:

Creating the Perfect Contact Page

A great contact page is more than just a map. Here's what to include:

Essential Elements:

Nice-to-Have Additions:

Optimization Tips

Mobile Responsiveness

Most WordPress themes handle map responsiveness automatically, but if your map appears too large on mobile, add this CSS:

Go to Appearance → Customize → Additional CSS and paste:

iframe {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    iframe {
        height: 300px !important;
    }
}

Page Speed

Google Maps iframes are lazy-loaded by default, meaning they won't slow down your page load time. They load only when visible on screen.

SEO Benefits

Adding a map to your contact page helps with:

76%
Of people who search for something nearby on their smartphone visit a business within 24 hours

Common WordPress Map Issues (And Fixes)

Issue: Map Not Showing

Solutions:

Issue: Map Appears Broken on Mobile

Solutions:

Issue: Wrong Location Displayed

Solutions:

Issue: Map Overlaps Other Content

Solutions:

Advanced: Contact Form + Map Side-by-Side

Create a professional two-column layout with a contact form on the left and map on the right:

For Gutenberg:

  1. Add a Columns block with 2 columns
  2. Left column: Add your contact form (Contact Form 7, WPForms, etc.)
  3. Right column: Add the Custom HTML block with your map
  4. Adjust column widths (50/50 or 40/60)

For Page Builders:

Use their built-in column/grid systems to create the same layout. Most page builders make this drag-and-drop simple.

Plugin-Free vs. Map Plugins: Which is Better?

Aspect Custom Embed (Our Method) Map Plugins
Setup Speed 5 minutes 10-15 minutes
Performance Faster (no extra plugin) Slower (adds files)
Maintenance None required Regular updates needed
Cost Free forever Free or $20-60/year
Customization Basic (sufficient for most) Advanced (custom markers, colors)

Our Recommendation: For 95% of WordPress sites, the custom embed method is perfect. Only use plugins if you need very specific advanced features like custom map markers, route planning, or multiple interactive markers.

Conclusion: Make Your Contact Page Work Harder

Adding a map to your WordPress contact page takes less than 10 minutes but can increase in-person visits by 40%+. It's one of the highest-ROI improvements you can make to your website.

Quick Recap:

Generate Your WordPress Map Code