How to add Google Maps to WordPress using Elementor Pro [Easy Tutorial]

Useful Links

• Elementor Pro
• Essential Addons for Elementor
• Siteground WordPress Hosting

What you will learn in this tutorial

• 00:00:00 Introduction
• 00:00:40 Create a new page
• 00:01:30 Add a Flexbox container with 2 columns
• 00:01:40 Add contact details, tel, email, address
• 00:03:10 Find the correct Google Map to embed
• 00:03:15 Copy the Google Map embed code
• 00:03:50 Add Elementor HTML widget and add Google Map embed code
• 00:04:20 Resize Google Maps on WordPress Elementor page
• 00:05:55 Add Google Map with custom address
• 00:07:40 Example project using Elementor and Google Maps

In this detailed video, we’ll walk you through the process of adding Google Maps to your WordPress site using the powerful features of Elementor Pro. From basic setup to advanced customisation options, we’ll cover everything you need to know to incorporate interactive maps into your web design, enhancing the user experience and providing valuable information to your visitors.

By the end of this tutorial, you’ll have the skills and confidence to add Google Maps to your WordPress site like a pro, creating more engaging and informative pages. Whether you’re a business owner, blogger, or web developer, this guide will help you leverage the power of Elementor Pro to take your website to the next level.

Embed Google Maps in Elementor Guide

To embed Google Maps into your WordPress site using the Elementor Pro HTML widget, you will follow a relatively straightforward process. This method doesn’t necessarily require an API key; instead, you’ll use an embed code directly from Google Maps. Here’s how to do it:

Step 1: Get the Embed Code from Google Maps

1. Open Google Maps: Go to [Google Maps].
2. Search for the Location: Type the location you want to embed in the search bar and hit enter.
3. Access the Share Option:

Once your location is displayed, click on the Share button in the left sidebar.

In the popup that appears, switch to the Embed a map tab.

Copy the Embed Code:

Choose the size of the map you’d like to embed from the options (small, medium, large, or custom size).

Click on “Copy HTML” to copy the iframe code provided.

Step 2: Embed the Map in Elementor

Edit Your Page/Post with Elementor:

Navigate to the page or post where you want the map. Click “Edit with Elementor.”

Add the HTML Widget:

Drag the HTML widget from the Elementor panel on the left and drop it into your desired section on the page.

Paste the Embed Code:

Paste the iframe code you copied from Google Maps into the HTML widget area.

Adjust Size and Alignment (if needed):

If you need to adjust the size further or align the map, you can add custom CSS directly in the Elementor widget settings under the “Advanced” tab, or modify the iframe attributes (like width and height) directly in the HTML code.

Preview and Publish:

Click on the Preview button to see how the map looks on your page.

If everything looks good, click Publish or Update to save your changes.

Additional Tips

Responsiveness: Make sure the embedded map looks good on all devices. You might need to adjust the width and height in the iframe code to percentages or use Elementor’s responsive settings to ensure it adapts to different screen sizes.

Styling: While the basic embed provides limited styling options, you can surround the map with text or images within Elementor to create a more integrated look.

Performance: Keep in mind that embedding third-party services like Google Maps can affect page load times. Ensure that your overall page performance remains optimised.

By following these steps, you can easily embed a responsive Google Map on your WordPress site using Elementor Pro, enhancing the user experience by providing visual location context.