How to Add a Google Map to WordPress

Choosing Your Method

There are three primary ways to integrate a Google Map into WordPress, ranging from simple embeds to advanced styled maps:

1. Embed code: The fastest, free method for a single location.
2. WordPress Plugins: Best for custom styles and multiple map markers.
3. Page Builders: Ideal if you already use tools like Elementor or Divi.

Method 1: Embed a Google Map Without a Plugin

This is the cleanest approach if you want to avoid adding extra plugins to your site.

Step-by-Step Instructions:

1. Visit Google Maps.
2. Search for your business name or specific address.
3. Click the Share button.
4. Select the Embed a map tab.
5. Choose your preferred size and click Copy HTML.

Adding the Code to Your Site:

1. Edit your WordPress page or post.
2. Add a new block and search for Custom HTML.
3. Paste your iframe code into the block.
4. Preview the page and click Update or Publish.

Method 2: Using a Google Maps Plugin

If you require advanced features like custom pins, directions, or interactive info windows, a plugin is the better choice. WP Google Maps is a popular, free option.

How to Configure:

1. Navigate to Plugins → Add New and search for “WP Google Maps.”
2. Install and activate the plugin.
3. Go to Maps → Add New Map and configure your location and zoom settings.
4. Save your map and copy the provided shortcode.
5. Paste this shortcode into any page, post, or widget area.

Method 3: Using Elementor (or Page Builders)

If you use a page builder, you likely have a dedicated Google Maps widget built-in.

1. Open your page with the Elementor editor.
2. Drag the Google Maps widget onto your layout.
3. Enter your address in the widget settings.
4. Adjust the height and zoom level directly in the side panel.
5. Click Update to save your changes.

Bonus: Using a Google Maps API Key

Google requires an API key for high-traffic sites or those using advanced interactive features (like directions or custom filters).

1. Visit the Google Cloud Console.
2. Create a new project and enable the Maps JavaScript API.
3. Generate an API Key under the credentials tab.
4. Paste this key into your plugin’s settings page.

Final Thoughts

For a basic location display, the standard embed code is your best 60-second solution. For a more tailored experience, utilize a plugin or your page builder’s native tools. Making your physical location easy to find is a hallmark of good web design.

Which method should you use.

• Use the block editor method if you just want a map showing one address.
• Use the embed code method if you want to control the size, zoom level or a specific view.
• Use a plugin only if you need multiple pins, custom markers or store locator features.
• If the map shows a grey box after embedding, the API key on the account is usually the cause.

Would rather someone just did this for you?

We look after WordPress sites for businesses across Ireland, from one-off fixes like this to full monthly support. If you would rather not be in the dashboard at all, that is what we are for.

See our WordPress support plans.