How to Add Google Maps to Your Elementor Page

How to Add Google Maps to Your Elementor Page

Adding Google Maps to your Elementor page is a great way to help visitors find your location or to showcase areas of interest. Google Maps can enhance your website’s usability and provide important geographical information at a glance. In this guide, we’ll walk you through the process step-by-step. Let’s get started!

Step 1: Create a Google Maps Embed Code

Before you can add a map to your Elementor page, you need to get the embed code from Google Maps.

1. Open Google Maps

   Go to Google Maps in your web browser.

2. Find Your Location

   Enter your desired location in the search bar. You can search for a specific address, a business, or a landmark.

3. Get the Embed Code

   • Once the map loads, click on the Share button. This button usually looks like an arrow and can be found on the left side of the interface.
   • In the pop-up window, select the Embed a map tab.
   • Choose the size of the map you want from the drop-down box (Small, Medium, Large, or Custom size).
   • Click on Copy HTML. This will copy the embed code to your clipboard.

Step 2: Open Your Elementor Editor

Now that you have your Google Maps embed code, you can add it to your Elementor page.

1. Log in to Your WordPress Dashboard

   Navigate to your WordPress website and log in to the dashboard.

2. Navigate to the Page

   Find the page where you want to add Google Maps. You can do this by clicking on Pages > All Pages from the left menu, then selecting the page you want to edit.

3. Edit with Elementor

   Click on the Edit with Elementor button to launch the Elementor page builder.

Step 3: Add Google Maps in Elementor

You will now add the map to your page using the Elementor editor.

1. Add a New Section

   In the Elementor editor, click on the plus icon to add a new section. You can choose a single-column structure for the map.

2. Drag and Drop an HTML Widget

   From the Elementor panel on the left, find the HTML widget. You can type "HTML" in the search bar or locate it under the General section.

   • Drag and drop the HTML widget into your new section.

3. Paste the Google Maps Embed Code

   In the HTML widget settings, you will see a text area where you can enter custom HTML code.

   • Paste the Google Maps embed code that you copied earlier into this area.

4. Adjust the Map Size (if necessary)

   If you want to adjust the size directly, do this within the Google Maps embed code. You can change the values in the width and height parameters based on your design preference.

Step 4: Preview and Publish Your Changes

1. Preview Your Page

   To see how the map looks on your page, click the Preview Changes button (eye icon) at the bottom of the Elementor panel. This opens the page in a new tab.

2. Make Adjustments (if needed)

   If the map isn’t displaying as you expected, go back to the Elementor editor to make any necessary adjustments.

3. Save Your Changes

   Once you are satisfied with how the map appears, click the Publish button (or Update if you are editing an existing page) in the Elementor panel to save your changes.

Conclusion

Congratulations! You have successfully added Google Maps to your Elementor page. Integrating a map can enrich your website’s content and provide valuable information to your visitors. Whether it’s for showcasing your business location, highlighting travel destinations, or providing directions, having a visual representation of a map is a significant addition to your site.

If you have any questions or run into issues while adding Google Maps to your Elementor page, feel free to leave a comment below. Happy mapping!