Elementor Google Maps Not Showing? Fix It

The Elementor Google Maps widget is a powerful tool for displaying locations directly on your WordPress site. However, various factors can prevent it from rendering correctly. Understanding these potential roadblocks is the first step to a successful fix.

Why is My Elementor Google Maps Not Showing? Understanding the Root Causes

Before diving into solutions, let’s explore the common reasons why your Elementor Google Maps might not be displaying:

• Missing or Incorrect Google Maps API Key: This is by far the most frequent culprit. Google requires an API key for most of its mapping services.
• API Key Restrictions: Even with an API key, if it’s not correctly restricted to your domain or the necessary APIs aren’t enabled, the map won’t load.
• Billing Account Issues: Google Maps Platform requires an active billing account, even for free usage tiers.
• Plugin or Theme Conflicts: Other WordPress plugins or your theme might be interfering with Elementor or Google Maps scripts.
• Caching Problems: Old, cached versions of your page might be preventing the updated map from appearing.
• JavaScript Errors: Errors in your website’s JavaScript can block the map from loading.
• Outdated Software: An outdated Elementor, WordPress, or theme version can lead to compatibility issues.
• Incorrect Widget Configuration: Simple errors in setting up the Elementor Google Maps widget itself.
• Ad Blockers / Browser Extensions: Less common, but some browser extensions can block Google Maps.

Solution 1: Verify Your Google Maps API Key and Billing

As mentioned, issues with your Google Maps API key are the most common reason for your Elementor Google Maps not showing. This is where you should always start your troubleshooting.

Step-by-Step: Obtaining and Configuring Your Google Maps API Key

1. Access Google Cloud Platform Console: Go to the Google Cloud Platform Console. You’ll need a Google account.
2. Create a New Project (if necessary): From the project dropdown at the top, select an existing project or click “New Project” to create one. Give it a meaningful name.
3. Enable Necessary APIs:
   • In the left-hand navigation, go to APIs & Services > Library.
   • Search for and enable the following APIs. These are essential for the Elementor Google Maps widget to function:
     • Maps JavaScript API
     • Geocoding API

     Note: Depending on specific features you might need, you might also enable Places API, Geolocation API, etc., but the two above are critical for basic display.

4. Create Your API Key:
   • In the left-hand navigation, go to APIs & Services > Credentials.
   • Click on + CREATE CREDENTIALS > API Key.
   • A new API key will be generated. Copy this key immediately.
5. Restrict Your API Key (Crucial Security Step):
   • While still on the Credentials page, click on the pencil icon next to your newly created API key to edit it.
   • Under “Application restrictions,” select HTTP referrers (web sites).
   • Under “Website restrictions,” add your website’s URL(s) in the following formats:
     • *.yourdomain.com/* (for your main domain and subdomains)
     • yourdomain.com/* (for the main domain only)

     Replace yourdomain.com with your actual domain name.

   • Under “API restrictions,” select Restrict key.
   • From the dropdown, select the specific APIs you enabled earlier (Maps JavaScript API and Geocoding API). This prevents unauthorized use of your key for other services.
   • Click Save.
6. Enable Billing:
   • In the left-hand navigation, go to Billing.
   • If you haven’t already, enable a billing account. Google offers a robust free tier, but a billing account is required for all Google Maps Platform projects. You won’t be charged unless you exceed the free limits.
7. Input API Key in Elementor:
   • Log in to your WordPress dashboard.
   • Go to Elementor > Settings > Integrations.
   • Scroll down to the Google Maps section.
   • Paste your API key into the “Google Maps API Key” field.
   • Click Save Changes.
8. Test Your Map: Clear your website and browser cache, then check the page where your Elementor Google Maps is located.

For more detailed information, consult the official Google Maps Platform documentation.

Solution 2: Clear Caches and Check for JavaScript Errors

Cached content can often be the culprit when your Elementor Google Maps is not showing. Your browser or server might be serving an older version of your page that doesn’t include the map or has outdated script references.

Step-by-Step: Cache Clearing & Browser Inspection

1. Clear WordPress Caches:
   • If you use a caching plugin (e.g., WP Super Cache, LiteSpeed Cache, WP Rocket), clear its cache from its settings page in your WordPress dashboard. Most caching plugins have a “Clear Cache” or “Purge All Cache” button.
   • If your host offers server-side caching (like Hostinger’s LiteSpeed Cache), clear it through your hosting control panel (e.g., hPanel).
2. Clear Browser Cache:
   • Chrome: Go to Settings > Privacy and security > Clear browsing data. Select “Cached images and files” and choose a time range (e.g., “All time”).
   • Firefox: Go to Options > Privacy & Security > Cookies and Site Data > Clear Data. Select “Cached Web Content.”
   • Alternatively, you can perform a “hard refresh” by pressing Ctrl+F5 (Windows) or Cmd+Shift+R (Mac).
3. Check for JavaScript Errors:
   • Open the page with the Elementor Google Maps.
   • Right-click anywhere on the page and select “Inspect” (or “Inspect Element”).
   • Go to the “Console” tab in the developer tools.
   • Look for any red error messages. JavaScript errors often indicate a conflict or a script failing to load, which can prevent the map from rendering. If you see errors related to Google Maps or “API key not authorized,” it points back to Solution 1.

Solution 3: Check for Plugin and Theme Conflicts

A common issue in WordPress is that plugins or themes can conflict with each other, leading to unexpected behavior, including your Elementor Google Maps not showing. This often happens due to conflicting JavaScript libraries or CSS styles.

Step-by-Step: Conflict Identification

1. Backup Your Website: Before performing any troubleshooting involving deactivating plugins or switching themes, always create a full backup of your WordPress site. Hostinger customers can easily do this via hPanel.
2. Switch to a Default WordPress Theme:
   • Go to Appearance > Themes in your WordPress dashboard.
   • Activate a default WordPress theme like Twenty Twenty-Four, Twenty Twenty-Three, or Storefront.
   • Check if the Elementor Google Maps is now visible on the frontend. If it is, your theme is likely the cause. You’ll need to contact your theme developer for support or consider switching themes.
3. Deactivate Plugins One by One:
   • Go to Plugins > Installed Plugins.
   • Deactivate all plugins except Elementor and Elementor Pro (if you have it).
   • Check your Elementor Google Maps. If it works, reactivate your plugins one by one, checking the map after each activation. The plugin that causes the map to disappear is the conflicting one.
   • Once you identify the problematic plugin, you can either:
     • Look for an alternative plugin.
     • Contact the plugin developer for a fix.
     • Use custom CSS/JS to mitigate the conflict (advanced).
4. Reactivate Your Original Theme and Plugins: Once you’ve identified the conflict, reactivate your primary theme and other plugins, leaving the problematic one deactivated or addressed.

For more insights on troubleshooting Elementor issues, consult the official Elementor Documentation.

Solution 4: Ensure Elementor and WordPress Are Updated

Outdated software can lead to a plethora of issues, including compatibility problems that prevent your Elementor Google Maps from displaying correctly. Developers regularly release updates to fix bugs, improve performance, and ensure compatibility with other software and APIs.

Step-by-Step: Updating Software

1. Backup Your Website: Always back up your site before performing any updates.
2. Update WordPress Core:
   • Go to Dashboard > Updates.
   • If a new version of WordPress is available, click “Update Now.”
3. Update Elementor and Elementor Pro:
   • Go to Plugins > Installed Plugins.
   • Look for Elementor and Elementor Pro. If updates are available, click the “Update now” link below their names.
4. Update Your Theme:
   • Go to Appearance > Themes.
   • If your theme has an update available, you’ll see a notification. Follow the instructions to update (usually via the Themes page or a dedicated theme options panel).
5. Clear Cache and Test: After all updates, clear your website and browser caches (as described in Solution 2) and then check your Elementor Google Maps.

Keeping your WordPress core, Elementor, and theme updated is a fundamental best practice for website security and functionality.

Solution 5: Check Widget Settings and Address Accuracy

Sometimes, the issue isn’t about API keys or conflicts, but a simple misconfiguration within the Elementor Google Maps widget itself.

Step-by-Step: Verifying Widget Configuration

1. Edit the Page with Elementor:
   • Go to the page where your map should be located.
   • Click “Edit with Elementor.”
2. Select the Google Maps Widget: Click on the Google Maps widget in the Elementor editor.
3. Verify the Address:
   • In the left-hand panel, ensure the “Address” field is correctly filled out.
   • Use a precise address, including street number, street name, city, state/province, and postal code.
   • Test with a well-known landmark (e.g., “Eiffel Tower, Paris”) to see if the map renders. This helps confirm if the issue is with your specific address or the widget itself.
4. Check Zoom Level: Ensure the “Zoom” level is set appropriately. If it’s too high or too low, the map might appear blank or not show your desired area. A value between 10-15 is usually good for a specific location.
5. Set Height: Make sure the “Height” setting under the “Style” tab is not set to 0. If the height is too small, the map might be technically there but invisible.
6. Update and Clear Cache: After making any changes, click “Update” in Elementor, clear your website and browser caches, and recheck the live page.

Common Issues and Troubleshooting Elementor Google Maps Not Showing

Beyond the core solutions, here are some specific scenarios and how to troubleshoot them:

My Map Shows a Gray Box with “Oops! Something went wrong.”

• This is a classic indicator of an API key problem. Revisit Solution 1 carefully.
• Double-check that you’ve enabled all necessary APIs (Maps JavaScript API and Geocoding API).
• Ensure your API key restrictions are correctly set up, allowing your domain to use the key.
• Verify billing is enabled for your Google Cloud Project.
• Check the “Console” tab in your browser’s developer tools for specific error messages from Google Maps. They often provide valuable clues like “ApiNotActivatedMapError” or “RefererNotAllowedMapError.”

The Map Loads, but My Pin is Incorrect or Missing

• Incorrect Address: Re-verify the address in the Elementor Google Maps widget. Try using the exact full address.
• Geocoding API Issues: Ensure the Geocoding API is enabled in your Google Cloud Project (Solution 1). This API is responsible for converting addresses into geographical coordinates.
• Old Cache: Clear all caches as described in Solution 2.

The Map Appears on Backend (Elementor Editor) but Not Frontend

• Caching aggressively: This strongly suggests a caching issue. Ensure you’ve cleared all levels of cache (WordPress, server, browser) after making changes.
• JavaScript conflicts: A plugin or theme might be injecting JavaScript that works fine in the editor but breaks the Google Maps script on the live site. Refer to Solution 3 for conflict resolution.
• Server-side blocking: Less common, but some server configurations might be blocking external scripts. Check your host’s documentation or contact their support. Hostinger offers excellent support tutorials on server configurations.

Console Error: “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

• This is a generic error that almost always points to an issue with your API Key, its permissions, or billing.
• Open the JavaScript console (F12, then Console tab) and look for a more specific error message from Google Maps. These messages are usually very descriptive and will tell you exactly what’s wrong (e.g., missing API key, invalid key, referrer not allowed, API not enabled, billing not enabled).
• Follow the relevant steps in Solution